Web image resolution for retina display pro#

The technique on A List Apart is basically the same idea.

Serving just slightly higher resolutions to smooth retina portrayal a little, as suggested in a video by Paul Boag.

A bunch of possibilities well described and discussed on Smashing Magazine.

It is based on a cookie storing the screen resolution, a web server configured to serve images from a PHP script, and named script to read the cookie and serve the appropriate image.

Adaptive Images, a (mostly) server side solution.

Serving high resolution ('retina') images, but compress them more (JPEG quality), as suggested by Yoav Weiss, or let the mobile networks compress them when really needed (i.e.Vectors wherever possible including CSS techniques (gradients, rounded corners etc.), SVG and icon fonts.Some of the solutions/discussions I noted: After all, technology will keep changing all the time in the future, too. In fact, it is probably best to utilize generic responsive design techniques, instead of designing for specific devices. The problem is also closely related to images in responsive designs in general.

Web image resolution for retina display pro#

Note that retina displays are not limited to the Macbook Pro Retina and the coming iMacs, but also include mobile devices, which may have their own needs. Which one is best for you depends on various factors, such as how your website is designed, what kind of technology your typical visitors are using etc. There are different solutions, each with its own pros and cons.