Responsive Placeholder Image
Transparent Pixels
I became interested in image replacement techniques to keep page size down, AJAXing in full images later as needed, and I stumbled across The Smallest Transparent Pixel. Using a bas64 encoded 1x1 transparent pixel as a placeholder, you set the width and height attributes to the space you want to fill.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" width="200" height="150" />
Unfortunately, the 1x1 pixel images have issues with common responsive styles, due to the image's square aspect ratio.
Let's say you set img { max-width: 100%; } to prevent images from causing horizontal scrolling on small screens. Your 1x1 pixel img's width can be squished down below what you set in the width attribute, but the height remains the same, leaving you with an oddly shaped placeholder.
If you try to correct this with img { max-width: 100%; height: auto; }, the height attribute is completely ignored, and the width can be squished below the width attribute's setting, leaving you with a square; probably not the aspect ratio you intended.
This is intended behavior in the browser and works great for regular images, but how can we fix this for this filler image?
SVG to the Rescue
GIFs and PNGs aren't the only images you can inline. Our friend SVG can even be inlined without base64. SVG also has an aspect ratio built in using the viewBox attribute. So if we swap out our 1x1 pixel for this...
<img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 200 150'%2F%3E" width="200" height="150" />
...our responsive styles work as intended! The important bit is the 116 byte src attribute. This works all the way back to IE9 due to the encodedURIComponent conversion of special characters, which unfortunately makes it a little more difficult to read.
Notice how the responsively sized svg maintains its aspect ratio. This is set here viewBox%3D'0 0 200 150', giving the svg a width (200) and height (150) to get the correct aspect ratio. This could be viewBox%3D'0 0 16 9' for 16x9 images or the exact width and height of the image you plan to use as a replacement.
Image Replacement
The above is a great snippet by itself to be used in place of the standard 1x1 pixel image, but how can we apply this to image replacement?
<figure class="image-replacement" data-src="http://i.imgur.com/YVSnio4.jpg" data-width="1400" data-height="900">
<noscript><img src="http://i.imgur.com/YVSnio4.jpg" width="1400" height="900" /></noscript>
</figure>
In our HTML, we have a figure tag with the relevant image info set in data attributes for our Javascript to pull. There's a simple noscript fallback so that our Javascript-less bretheren don't suffer.
The placeholder svg has been updated to display an icon instead of just being blank, but the technique is still the same of setting the correct viewBox. The icon itself is a symbol which has its own viewBox, allowing it to be easily sized and centered in the main svg. Unfortunately, the symbol can't be defined or reused outside of the individual img, since it seems that browsers treat it as an external, self contained file.
The Javascript is very minimal, taking the data attributes of the figure to create the placeholder, then loading the image when hovered, mainly to show how the image seamlessly replaces the placeholder. The content doesn't have to reflow and text doesn't jump around. For a real image replacement scenario, you'd likely want to configure it to load images as they come into viewport, or perhaps when they're next in the slideshow.
Summary and Closing
Use data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 200 150'%2F%3E as the placeholder src attribute for any image you need to replace, updating the viewBox value to keep the correct aspect ratio.
There are other ways you can accomplish all of this, but this technique is ultra simple, self-contained and can likely be used outside of image replacement.
Comment below if you have any improvements or examples of other uses.
SVG to the rescue indeed! Thank you for this. I tried making an FPO style for wireframes but couldn’t get the aspect ratio to stick, until now. I hope you don’t mind but I credited you and this post in my pen: http://codepen.io/crgdbs/full/ftuCk/ Thanks again!
@crgdbs Glad it was useful! This technique would definitely be great for wireframes.
How about this way - less javascript, more presentation control in css. Still uses SVG and js for delay loading but doesn't have width / heights in HTML. Just controls the aspect ratio in css.
http://codepen.io/petemill/pen/yyGQxg
@petemill Interesting thought, but the biggest benefit of the base64 SVG is as a self contained placeholder where the aspect ratio can be controlled directly. In the image replacement example, Javascript is used to simplify creating the SVG and to keep the initial page weight down. A CMS could easily handle inlining the proper base64 SVG for each image to be replaced.
If all of your images are the same aspect ratio, then your CSS method can work, but there's almost no benefit to using the SVG instead of an external
background-image. Also, additional classes and styles would be needed for different images like portrait and landscape, otherwise the image will be cropped or scaled down since it's positioned absolute.A different 'less Javascript, more CSS' solution would be to have the SVG as the value of a psuedo-element, so that the SVG itself is setting the width and height. You'd still need to create additional classes for each aspect ratio, though.
That's true, I accept the restriction that you must unfortunately know the aspect ratios ahead of time, in the css, and assign a suitable class in the HTML to match. I've mostly only worked on big sites which know all the allowed aspect ratios for standard CMS content :-)
However I think one of the biggest advantages to your SVG placeholder is that it will scale beautifully. So, as a designer, I can change the width of the area and everything will scale, including the resolution of the image area by its aspect ratio, seen here: http://codepen.io/petemill/pen/dPaPZx Of course you'd have to make sure the JS image replacement knows how to retrieve an image suitable for the element size. That's how some responsive image libraries work though, so that's ok.
So, thanks for the SVG inspiration, because I think it works great as a responsive image placeholder.
@petemill Ah! I meant that since you were dropping the base64 SVG in CSS as a
background-image, it doesn't provide much of an advantage over an external SVG that you link withbackground-image: url('../img/placeholder.svg');. The latter would be much easier to maintain and both have no effect on the aspect ratio.Or you could use the padding trick to preserve the ratio, in this case 75% (150/200px)
.max img { padding-top: 75%; height: 0; width: 100%; }See the Pen 1x1 Pixel Max-Width by Tomek Augustyn (@og2t) on CodePen.
It looks like Twitter uses `` instead, which is a little easier to work with than messing with a data URI:
http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/
@Tigt Yes, I've seen that method. The data-URI trick is useful for where you actually need a data-URI (CSS,
<img>src, etc.) especially as a placeholder, but the canvas trick is a lot shorter and easy to remember!Thanks a lot for this – been looking for a solution like it for quite some time, and it works perfectly for my needs. Just wanted to share a quick thing – I had an issue where I needed to use max-height on a lazy loaded image (i.e.
img { width: auto; max-height: 60vh; }). Unfortunately, themax-heightproperty made the data uri SVG – which rendered perfectly withoutmax-height– appear with the correct aspect ratio, but way too small. The solution was to add thewidthandheightproperties to the data uri (in addition to having the samewidthandheightproperties on the actualimgtag) like this:Makes for a longer data uri and a few more bytes, but scales like a champ. Thanks again for the info!