Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.
Time-shifted photographs of my hometown in Ireland.
Marc took some great pictures at Patterns Day.
Photos of analogue interfaces: switches, knobs, levers, dials, buttons, so many buttons.
If you enjoyed reading Marcin’s serendipitous story on Twitter, here are the pictures to accompany it.
A selection from an ongoing photography project—seven years and counting—leading up to the launch of the Orion project.
Sci-fi book covers and posters from the 1970s.
Lovely, lovely photos from this weekend’s Indie Web Camp.
Great photos from a great gathering.
A very handy tool for figuring out breakpoints for responsive images.
Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.
This is so, so wonderful—hundreds and hundreds of photographs from all of the Apollo missions. Gorgeous!
The shots of Earth take my breath away.
Smart thinking from Sara on providing a PNG fallback to browsers that don’t support SVG. Although, actually what I like about this solution is that it’s less about providing PNG as a fallback, and more about treating PNG as the baseline and SVG as the enhancement (an approach that the picture element is perfect for).
This strikes me as an eminently sensible idea by Emil: using the picture element to begin providing WebP alternatives to JPG.
Of course, picture-supporting browsers will have to adjust their decision-making algorithm to support this pattern.
A great primer on using
picture. I think I’ll be referring back to this a lot.
Rhea and Titan, as seen by Cassini.
A fascinating tale of mistaken identity with one of Lyza’s photos.
I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.
This is a concern that Matt Wilcox has raised:
Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.
I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.
Following on from that post of Jason’s I linked to, Chris also emphasises that, for most use cases, you probably only need to use srcset (and maybe sizes), but not the picture element with explicit sources.
It’s really, really great that people are writing about this, because it can be quite a confusing topic to wrap your head around at first.