The present and potential future of progressive image rendering - JakeArchibald.com
When I set about writing this article, I intended it to be a strong argument for progressive rendering. But after digging into it, my feelings are less certain.
The Contrast Swap Technique: Improved Image Performance with CSS Filters | CSS-Tricks
A clever performance trick for images:
- Reduce image contrast using a linear transform function (Photoshop can do this)
- Apply a contrast filter in CSS to the image to make up for the contrast removal
Related links
Standing still - a performance tinker | Trys Mudford
What Trys describes here mirrors my experience too—it really is worth occasionally taking a little time to catch the low-hanging fruit of your site’s web performance (and accessibility):
I’ve shaved nearly half a megabyte off the page size and improved the accessibility along the way. Not bad for an evening of tinkering.
Learn Images
Mat has written this free course for you all about images on the web. Covering image formats, responsive images, and workflows, this is one to keep on speed dial.
How To Improve Largest Contentful Paint for Faster Load Times - Calibre
A no-nonsense checklist of good performance advice from Karolina.
Picture perfect images with the modern img element - Stack Overflow Blog
Addy takes a deep dive into making sure your images are performant. There’s a lot to cover here—that’s why I ended up splitting it in two for the responsive design course: one module on responsive images and one on the picture element.
Related posts
Accessibility testing
It’s not just about finding the issues—it’s about finding the issues at the right time.
Performance and people
When it comes to web performance, there are technical issues and then there are human issues.
Dark mode revisited
Adding another theme to my stylesheet switcher.
Dark mode
Adarktio
Inlining SVG background images in CSS with custom properties
A clever technique I learned from Trys.