New "State of the Web" video: Images!
Tags: images, webdev
Published: 2019-06-06 05:33:10

---
title: New "State of the Web" video: Images!
published: true
description: Learn about the state of images on the web in this Chrome Developers video.
tags: images, webdev
---

Today I published a new video in my "State of the Web" series in which I talk with [Colin Bendell](https://twitter.com/colinbendell) from Cloudinary about the state of images. We cover _a lot_ of ground in this 47 minute video, so I made this written summary of the conversation points. Hope you like it!

{% youtube nEyvFpz5A6Q %}

- Image loading techniques for layout stability
  - Set explicit height/width
  - Low quality image placeholders
- Conventional wisdom for file formats
  - JPEG great for photographs
  - GIF/PNG great for illustrations and icons
  - SVG great for vector based imagery
  - varies based on browser support
  - varies based on transparency requirements
- Fine tuning image quality
  - JPEG has quality index (eg 80)
  - Chroma subsampling
  - Progressive JPEG
- Serving responsive images for mobile friendliness
  - srcset
  - picture and src
  - Media queries
  - laptops _are_ mobile devices
- Using Client Hints to understand the user's capabilities
  - Server negotiates what to return to the client based on what they can support
    - viewport size
    - connection type
  - Fingerprinting security
  - User Agent string is unreliable
- Role of images in accessibility
  - [50% of images properly use the alt attribute](https://httparchive.org/reports/accessibility#a11yImageAlt), per HTTP Archive and Lighthouse data
  - In absence of an image's alt attribute, screen readers speak the URL
  - Abled developers may forget about accessibility
  - Machine learning systems are working on generating alt text
- Human visual perception
  - Color blindness
  - Color sensitivity
  - How we visually optimize images may not be optimal for everyone
  - E-commerce implications of image/color fidelity
- WebP tradeoffs
  - ~10-30% byte savings over JPEG
  - Forced chroma subsampling could lead to poor quality for images with text
  - Limited to sRGB color space
- Best practices for animations
  - Animated GIFs are really bad, can quickly grow to MB
  - mp4 support in img src
  - Ad tech industry found that animations/motion are great for ads
  - Using video tag is great, but may be platform constrained like on CMS
- Image page weight
  - [Two thirds of pages are made up of image bytes](https://httparchive.org/reports/state-of-images#bytesImg), per HTTP Archive
  - Images are downloaded with low priority
  - Optimizing JavaScript is going to have the biggest impact
  - Lazy load images below the fold
- Automating image quality
  - We should be depending on algorithms to determine optimal techniques
  - Squoosh app visualizes impact of optimization
  - Incorporate into CMS or build system
- User-generated images
  - Optimization needs to scale up to handle any image a user may upload
  - Security concerns
- Recommended resources
  - [Addy Osmani's images.guide](http://images.guide)
  - Colin's articles on [Client Hints](https://cloudinary.com/blog/client_hints_and_responsive_images_what_changed_in_chrome_67), [images in Safari](https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/)
  - [web.dev image optimization strategies](https://web.dev/fast#optimize-your-images)