Link tags: images

Earth Restored — Toby Ord

Beautifully restored high-resolution photographs of the Earth taken by Apollo astronauts.

Swipey image grids.

This is how you write up a technique! Cassie takes an SVG pattern she used on the Clearleft “services” page and explains it in step-by-step detail, complete with explanatory animated diagrams.

THE INTERNET — Opte

Visualising the growth of the internet.

Creating websites with prefers-reduced-data | Polypane Browser for Developers

There’s no browser support yet but that doesn’t mean we can’t start adding prefers-reduced-data to our media queries today. I like the idea of switching between web fonts and system fonts.

5 most annoying website features I face as a blind person every single day by Holly Tuke

Five pieces of low-hanging fruit:

• Unlabelled links and buttons
• No image descriptions
• Poor use of headings
• Inaccessible web forms
• Auto-playing audio and video

Full bleed layout using simple CSS | Kilian Valkhof

A follow-up to full-bleed layout post I linked to recently. Here’s how you can get the same effect with using CSS grid.

I like the use of the principle of least power not just in the choice of languages, but within the application of a language.

Same Energy Snap

Match up images that have been posted in pairs to Twitter with the caption “same energy”. This is more fun and addictive than it has any right to be.

CSS Grid full-bleed layout tutorial · Josh W Comeau

When you’ve got a single centered column but you want something (like an image) to break out and span the full width.

AddyOsmani.com - Preload late-discovered Hero images faster

Did you know there’s an imagesrcset attribute you can put on link rel="preload" as="image" (along with an imagesizes attribute)?

I didn’t. (Until Amber pointed this out.)

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.

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 picture element to provide webp images 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 2²⁴ colors. That’s… a lot of colors, roughly 2²⁴ 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.