The strategy is as simple as this: Double the image dimensions and reduce the JPG quality. Deliver this image for normal and high-res devices. The resulting image will have higher resolution, but thanks to the good working JPG compression only marginal bigger filesize.
There are two Drupal modules which do this:
- Hi-Res Images - Super simple module, which only divides the image dimension attributes (of the img tag) by two. You need to create your image styles double in size by yourself.
- Retina Images - You create your image styles in the normal size, and this module tries to double the dimensions for you.
For both modules you need to adjust the JPG compression level of the GD lib to avoid a substantial increase of file-size for all your images (at admin/config/media/image-toolkit). If you do not want to adjust the JPG compression for all images, you can use another module, which allows to specify the compression per image style: Image Style Quality.
NOTE: If you need a cropping module like Manual Crop then choose Hi-Res Images, as it works well with it.
Image quality comparisons
- http://www.netvlies.nl/blog/design-interactie/retina-revolution
- http://retinafy.me/jpgs/
- http://filamentgroup.com/lab/rwd_img_compression/
Drawbacks
- Does not work with gif or png images
See also