Friday, April 6th, 2018
Monday, March 12th, 2018
The hits just keep on coming from the Filament Group. Here Scott shares a really clever technique for creating an image magnifier using the
sizes attribute of the
Thursday, March 2nd, 2017
These icons-as-a-service could be really useful for making quick’n’dirty HTML prototypes.
Wednesday, March 9th, 2016
This is really, really clever. You can’t use generated content (
:after) on replaced content. The
img element is replaced content …but only when the image actually loads. So if the image fails to load, you can apply specific fallback styles (using
Saturday, December 19th, 2015
We’ve got Space Ipsum for text. Now we have SpaceHolder for images.
Wednesday, February 18th, 2015
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).
Tuesday, September 30th, 2014
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.
Tuesday, September 23rd, 2014
Jason points out that the picture element might not be needed for most responsive image use cases; the srcset and sizes attributes will probably be enough—that’s what I’m doing for the photos on my site.
Wednesday, June 26th, 2013
This is a really nice and simple idea: view photos from a specific place taken at a specific time. Voyeuristic fun.
Thursday, March 15th, 2012
Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).
Tuesday, November 3rd, 2009
A fascinating trip down memory lane to the birth of the IMG element.
Monday, March 3rd, 2008