Automatic Retina images for web sites

Serving all screen densities

Optimized image delivery for varying screen resolutions can seem like using magic. But with the right spells in your book, your web experience can be visually excellent on all displays without compromising website performance. Let's look at these spells:

SVGs and icon fonts for graphics

SVGs and icon fonts are the magician's tools for logos or icons. Being vector-based, they ensure pixel-perfect clarity at any size and avoid any unnecessary bandwidth wastage.

The <picture> for complex requirements

If srcset is a rabbit pulled out of a hat, the <picture> element is the entire magic show. It gives total control over image selection based on device capabilities, like viewport size and resolution.

<picture>
    <source srcset="wow-retina.jpg" media="(min-pixel-ratio: 2)">
    <img src="wow-standard.jpg" alt="wow factor included">
</picture>


Keeping file size low with compression

/* 
Magic trick ahead: 
Turning high-res images into "light" files
*/


Compression gauges are your wands here. Tools like ImageOptim or TinyPNG are your trusty friends combining maximum sharpness and minimum load times.

CSS media queries for custom backgrounds

CSS media queries can help adjust your background images for Retina displays. Pair them with properties like background-size, and you've got yourself a background that blooms on every screen.

/* 
When your image has to dress up for the hi-res party 
*/
@media (-webkit-min-device-pixel-ratio: 2) {
    body {
        background-image: url('partyAt2x.jpg');
        background-size: cover;
    }
}


Visualization

Imagine two art galleries …

Standard Gallery (🖼️):

• Displays a standard, but nonetheless beautiful, painting.

Retina Gallery (🎨🔍):

• Exhibits a painting & its twin — a finely detailed version visible only to visitors with a magnifying glass (a.k.a. Retina eyes!).

As for visitors, they get the best viewing experience for their visual acuity, without unnecessary strain or load. Behind the scenes:

<img src="prettyStandard.jpg" srcset="quiteDetailed.jpg 2x" alt="An aesthetic spectacle">


Calmly, srcset serves the right piece to the right eyes!

Capturing all use cases

Auto-magic with retina.js

When you move from simpler spells to automated magical systems like retina.js. It scans your page for high-resolution images, doing the magic automatically, leaving you only the simple job of referencing the low-res image.

// Proof that programmers are ahead in the evolution chain: Automation


Server-side optimization with Adaptive Images

Adaptive Images, is a master spell that dynamically adjusts image resolutions based on the user's device from the server side, translating into smarter bandwidth usage and faster load times.

# A chat with the server: "Can you adjust this for retina? Thanks!" 


Gzip compression – SVGs' secret spell

When SVGs come to play, ensure you're also leveraging gzip compression. It reduces your vector graphics significantly, making downloads speedier and web experience smoother.

# SVGs and .gzip, a love story!


Mastering the @1.5x image resolution technique

Balancing between standard and retina, you could also consider @1.5x resolution technique for devices that fall in the middle as discussed in an A List Apart article.

Possible pitfalls and solutions

Checking browsers' spell compatibility

Not all browsers interpret srcset, <picture>, and SVG the same way. It's crucial to keep a compatibility map for fallback solutions when needed.

Tackling image compression by mobile networks

Some mobile networks may compress images, which can affect their quality. Regular tests under different network conditions can ensure your images are seen as intended by users on the move.