Rick ViscomiToday I published a new video in my "State of the Web" series in which I talk with Colin Bendell 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!
- 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, 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, 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
- Colin's articles on Client Hints, images in Safari
- web.dev image optimization strategies
