Glossary · Formats
Retina
High-density pixel screens; to keep an image sharp on them, a version at double resolution is used.
In detail
On a retina (or “high-density”) screen, each design pixel is drawn with 2 or more real pixels. A 300×250 pixel image looks blurry if stretched over that space, so a 600×500 version is prepared and displayed scaled down to 300×250.
The trade-off is weight: an image at double resolution weighs considerably more. That is why in HTML5 it is best to use text and vector shapes (SVG) whenever possible, and reserve large images for what truly needs them.
Example
A 600×500 photo displayed with width: 300px for a 300×250 banner.