Hi-Res Images

CSS px are not intended to be mapped 1:1 with screen pixels. They are actually defined as an angular measurement: http://inamidst.com/stuff/notes/csspx

Web browsers running on modern hi-res screens need to be calibrated by "zooming in". This happens automatically with Apple Retina Display. For images to fully utilize hi-res screens, image dimensions need to be twice the CSS dimensions.

Interestingly, the JPEG quality setting of images on hi-res screens can be reduced dramatically without compression artefacts becoming visible, meaning that filesizes are not much larger; it is even possible for the filesize of hi-res images to be smaller: http://blog.netvlies.nl/design-interactie/retina-revolution/

This technique does not use JavaScript.

Unlike Retina Images, this module will work with effects provided by other modules.

Incompatible with Microdata due to #1875346: Remove theme_microdata_image_formatter() as core theme_image_formatter() now supports attributes.

Incompatible with Image Block due to #1972472: add width and height property for image?.

Installation

For an image style to be Hi-Res it needs to be configured to create an image at twice the desired CSS px. Then add the "Hi-Res (x2)" effect (provided by this module) as the last effect in the style.

The JPEG quality setting can be reduced separately in the Image Toolkit configuration.