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.Highlights00:00 Intro00:50 Why is it so hard?03:56 What do you need?05:04 The sizes attribute explained09:39 Library: lazysizes13:22 Couldn't browsers do better?16:13 Idea: better progressive images19:19 Computing power and bandwidth 20:55 Focus on mobile PageSpeed23:13 WordPress default sizes attribute27:00 The Shrinkening28:08 Fluid layouts & clamp29:28 WordPress max image size31:43 Good enough vs. perfect32:50 Fetchpriority=high34:41 The picture element37:09 Background imagesLinksLazy Sizes: https://github.com/aFarkas/lazysizesFlynt Starter Theme: https://flyntwp.com/PageSpeed Module: https://developers.google.com/speed/pagespeed/moduleAdd "auto sizes" for lazy-loaded images: https://github.com/whatwg/html/issues/4654Optimizing 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-sideMore from BleechBlog Posts (WordPress Development)Flynt (WordPress Starter Theme)VRTs (Visual Tests for WordPress)Siegfried, deploy! (YouTube Channel)

Ver todos los episodios