Quick tip, with thanks to David Owens for the inspiration.

Problem: IE8 doesn't support background-size, so you have to include a separate stylesheet with separate background images just for IE8 if you have to code for it.


background:url('../img/non-retina.png') no-repeat center right;
background-image:url('../img/[email protected]'), none;

This will serve a non-retina image to IE8 and a retina image to everything else, which can be sized with background-size. IE8 doesn't support multiple backgrounds per element, everything else does.

Combine with the technique of saving retina sized JPEGs at really low quality (~30% - example here) to address all browsers with the same images and not have to worry about any image replacement malarkey or elements or the like...

Thursday Top Tip!