CSS folded poster effect
This is a very nifty use of CSS gradients!
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 links
Move Fast & Don’t Break Things | Filament Group, Inc.
This is the transcript of a brilliant presentation by Scott—read the whole thing! It starts with a much-needed history lesson that gets to where we are now with the dismal state of performance on the web, and then gives a whole truckload of handy tips and tricks for improving performance when it comes to styles, scripts, images, fonts, and just about everything on the front end.
Essential!
Request with Intent: Caching Strategies in the Age of PWAs – A List Apart
Aaron outlines some sensible strategies for serving up images, including using the Cache API from your service worker script.
Less Data Doesn’t Mean a Lesser Experience| TimKadlec.com
If you treat data as a constraint in your design and development process, you’ll likely be able to brainstorm a large number of different ways to keep data usage to a minimum while still providing an excellent experience. Doing less doesn’t mean it has to feel broken.
Web Bloat Score Calculator
Page web bloat score (WebBS for short) is calculated as follows:
WebBS = TotalPageSize / PageImageSize
Yes, this is a tongue-in-cheek somewhat arbitrary measurement, but it’s well worth reading through the rationale for it.
How can the image of a page be smaller than the page itself?
Related posts
Accessibility testing
It’s not just about finding the issues—it’s about finding the issues at the right time.
The top four web performance challenges
Counting down the charts—what will be in the number one spot?
Secret src
Hammering out the issues around standardising responsive images.
dConstruct optimisation
Tweaking the dConstruct 2012 site for performance.
Downloading from Google Fonts
For some reason, Google Fonts only provides .ttf files if you’re self-hosting. I don’t know why.