AVIF has landed - JakeArchibald.com
There’s a new image format on the browser block and it’s very performant indeed. Jake has all the details you didn’t ask for.
Link tags: images
186
Coldwater.Science
The World Ocean is as close as you can get to outer space without leaving Earth. It’s an entirely different universe, nothing like the life we have on land.
CSS photo effects - a Collection by Lynn Fisher on CodePen
These wonderfully realistic photo effects from Lynn are quite lovely!
CSS folded poster effect
This is a very nifty use of CSS gradients!
A Guide to the Responsive Images Syntax in HTML | CSS-Tricks
Chris has put together one of his indispensable deep dives, this time into responsive images. I can see myself referring back to this when I need to be reminded of the syntax of srcset and sizes.
The beauty of progressive enhancement - Manuel Matuzović
Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all.
Some great practical examples of progressive enhancement on one website:
- using grid layout in CSS,
- using
type="module"to enhance a form with JavaScript, - using the
pictureelement to providewebpimages in HTML.
All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.
Dams Public Website
I had the great pleasure of visiting the Museum Plantin-Moretus in Antwerp last October. Their vast collection of woodblocks are available to dowload in high resolution (and they’re in the public domain).
14,000 examples of true craftmanship, drawings masterly cut in wood. We are supplying this impressive collection of woodcuts in high resolution. Feel free to browse as long as you like, get inspired and use your creativity.
Better Image Optimization by Restricting the Color Index – Eric’s Archived Thoughts
A great little mini case-study from Eric—if you’re exporting transparent PNGs from a graphic design tool, double-check the colour-depth settings!
I’d been saving the PNGs with no bit depth restrictions, meaning the color table was holding space for 224 colors. That’s… a lot of colors, roughly 224 of which I wasn’t actually using.
Responsive Images the Simple Way - Cloud Four
A nice succint explanation of using the srcset and sizes attributes on the img element—remember, you probably don’t need picture and source elements if your use case is swapping out different sized versions of the same image.
One caveat thought: you do need to know the dimensions of the images. If you’re dealing with unknown or user-generated photos, that can be an issue.
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.
The Department of Useless Images - Gerry McGovern
The Web is smothering in useless images. These clichéd, stock images communicate absolutely nothing of value, interest or use. They are one of the worst forms of digital pollution because they take up space on the page, forcing more useful content out of sight. They also slow down the site’s ability to download quickly.
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.
Online Color Picker From Image - Pick your color
A nice standalone tool for picking colours out of photos, and generating a colour palette from the same photo.
Native lazy-loading for the web | web.dev
The title is somewhat misleading—currently it’s about native lazy-loading for Chrome, which is not (yet) the web.
I’ve just been adding loading="lazy" to most of the iframes and many of the images on adactio.com, and it’s working a treat …in Chrome.
The Crushing Weight of the Facepile—zachleat.com
Using IntersectionObserver to lazy load images—very handy for webmention avatars.
Photo Editor : Pixlr.com - free image editing online
This is quite nifty: a fully-featured photo editing tool right in the browser, with no log-in or registration required.
Reducing motion with the picture element
Here’s a clever tiny lesson from Dave and Brad: you can use prefers-reduced-motion in the media attribute of the source element inside picture.
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?
CSS-only chat
A truly monstrous async web chat using no JS whatsoever on the frontend.
This is …I mean …yes, but …it …I …