It's still a complicated task to optimize images for different devices, screen sizes, and pixel densities. In this episode we discuss the challenges of creating perfect responsive images and explore various techniques that can help optimize images.

Highlights of the episode:
00:00 Intro
00:50 Why is it so hard?
03:56 What do you need?
05:04 The sizes attribute explained
09:39 Library: lazysizes
13:22 Couldn't browsers do better?
16:13 Idea: better progressive images
19:19 Computing power and bandwidth
20:55 Focus on mobile PageSpeed
23:13 WordPress default sizes attribute
27:00 The Shrinkening
28:08 Fluid layouts & clamp
29:28 WordPress max image size
31:43 Good enough vs. perfect
32:50 Fetchpriority=high
34:41 The picture element
37:09 Background images

Links:
Lazy Sizes: https://github.com/aFarkas/lazysizes
Flynt: https://flyntwp.com/
PageSpeed Module: https://developers.google.com/speed/pagespeed/module
Add "auto sizes" for lazy-loaded images: https://github.com/whatwg/html/issues/4654
Optimizing The Image Element LCP: https://www.smashingmagazine.com/2023/01/optimizing-image-element-lcp/
WordPress max image size: https://developer.wordpress.org/reference/hooks/big_image_size_threshold/
WordPress default sizes: https://developer.wordpress.org/apis/responsive-images/#browser-side

Learn more about BleechGo to bleech.de Read our blog
WordPress Starter Theme Flynt

Bleech on Social Media
LinkedIn: Bleech
YouTube: Siegfried, deploy!

Contact us