Tags: picture

149

sparkline

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.

Now and Then Cobh

Time-shifted photographs of my hometown in Ireland.

Patterns Day 2017 | Flickr

Marc took some great pictures at Patterns Day.

Patterns Day 2017

Control Panel | Flickr

Photos of analogue interfaces: switches, knobs, levers, dials, buttons, so many buttons.

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.

IndieWebCamp Brighton 2016 | Flickr

Lovely, lovely photos from this weekend’s Indie Web Camp.

IndieWebCamp Brighton 2016

IndieWebCamp Nuremberg on Flickr

Great photos from a great gathering.

IndieWebCamp Nuremberg 2016

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.

Icy rocks around Saturn on Flickr

Rhea and Titan, as seen by Cassini.

Icy rocks around Saturn

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.