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/
Without Hi-Res
|
With Hi-Res
|
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.
Project information
- Module categories: Media
- 388 sites report using this module
- Created by jbrown on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.