))
Techniques for perfect responsive images
Manage episode 355574567 series 3419630
Content provided by Bleech. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Bleech or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://player.fm/legal.
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
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 Starter Theme: 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
More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)
47 episodes
Share
