Using SVG as placeholders — More Image Loading Techniques - JMPerez Blog
Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.
Tags: picture
149
Now and Then Cobh
Time-shifted photographs of my hometown in Ireland.
Control Panel | Flickr
Photos of analogue interfaces: switches, knobs, levers, dials, buttons, so many buttons.
Typewriters in the Technical Museum in Figueres | Flickr
If you enjoyed reading Marcin’s serendipitous story on Twitter, here are the pictures to accompany it.
NASA – Past and Present Dreams of the Future | Benedict Redgrove
A selection from an ongoing photography project—seven years and counting—leading up to the launch of the Orion project.
70s Sci-Fi Art
Sci-fi book covers and posters from the 1970s.
Responsive Image Breakpoints Generator by Cloudinary
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.
Project Apollo Archive on Flickr
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.
Scribblit
This is so nifty! Mikey has made a site where you can order his interactive artwork.
Interactive? That’s right! Each framed picture comes with a pen so you can doodle over the picture (and wipe it clean again).
Check out The Fett and The Falcon!
Flickr: Official SpaceX Photos’ Photostream
SpaceX has a Flickr account, and you have permission to use these photos.
Better SVG Fallback and Art Direction With The <picture> Element
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).
WebP via picture
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.
Oh, Jeremy, you silly billy. It turns out that this works right out of the box. Nice!
Responsive Images in Practice · An A List Apart Article
A great primer on using srcset and picture. I think I’ll be referring back to this a lot.
99 Cent: A Look at the Widespread Confusion Over a Photo Gursky DIDN’T Shoot
A fascinating tale of mistaken identity with one of Lyza’s photos.
Keep ’em Separated — ericportis.com
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.
Responsive Images: If you’re just changing resolutions, use srcset. | CSS-Tricks
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.