retina.js test environement

Img Tags

Img tag @1x

This image does not opt in. It will always be shown at 1x.

Img tag @2x

This image should be shown at 2x all retina environments, but shown at 1x in non-retina environments.

Img tag @3x

This image should be shown at 3x in all environments 3x and up, shown at 2x in 2x environments, and shown at 1x in non-retina environments.

Background Images

Bg @1x

This image does not opt in. It will always be shown at 1x.

Bg @2x

This image should be shown at 2x all retina environments, but shown at 1x in non-retina environments.

Bg @3x

This image should be shown at 3x in all environments 3x and up, shown at 2x in 2x environments, and shown at 1x in non-retina environments.

Rarer Cases

External URL w/ Naming Convention

This image is pulled in externally. Retina.js should still work on external files. Thanks to POWINTERACTIVE for unwittingly allowing us to borrow their logo :)

External URL w/o Naming Convention

retina.js continues to provide basic support for manually indicating a direct URL for a "retina" image. Note that this technique does not allow for multiple images to be associated with multiple pixel densities.

Inline Background Image

This image should be shown at 2x all retina environments, but shown at 1x in non-retina environments.