The Retinafy technique
Some images on elixir-europe.org use the retinafy technique.
How does it work?
We decide on the image width we want, and make a jpeg image double this width but save it at low quality.
So let's say we wanted an image at 300px wide. Traditionally we would just resize the image to 300px and save at a jpeg quality of 65-75. In this technique we would resize it to 600px and save it at a quality of 25-30.
This gives us double the size we need for a desktop display, but about same file size as a image 300px wide saved at 65-75 quality. In other words, we have a bigger picture for about the same file size.
The quality is lower, of course, but this doesn't matter because you set the image width at 300px in the CSS and the image is compressed. It looks good on desktop and high resolution displays.
The code for the second image is below:
<figure style="width: 300px;"> <img src="images/example-image-300px-30quality.jpg" alt="Human Data meeting" /> <figcaption>600px wide, quality 30, 30KB</figcaption> </figure>
In practice I find that retinafied images look slightly worse than traditional images on desktop displays, but much better on higher resolution displays. The top image (traditional one) looks slightly sharper on a desktop, but blurry on a higher resolution display.
Use one of the HTML5 techniques if you can. The retinafy technique is much simpler than these techniques but it has disadvantages:
- It's non-standard.
- It won't allow you to change image sizes gracefully at different screen widths.
- If people download the images to use they will look poor quality.
- It doesn't take into account 3x resolution screens like iPhone 6 Plus and 7.
- It takes decision making away from the browser and user. With the HTML5 techniques, the browser is able to decide which image best suits the device. In future people may be able to set image preferences in their browser. The retinafy technique will not enable this.