DEV Community

loading...
Google Web Dev

New "State of the Web" video: Images!

rick_viscomi profile image Rick Viscomi ・2 min read

Today 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
  • 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

Discussion (0)

pic
Editor guide