Forum

Thread tagged as: Question, Configuration

Retina Images

Hey guys,

I'm looking into adding retina images to an existing site.

From what ive seen online there are such things like retina.js, which uses the @2x suffix, what actually happens when adding density="2' to the image template tag... does this mean i dont need to use the retina.js scripts? or is that something completely different?

Any light on the situation would be grateful!

Thanks
ewe agency

ewe agency 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

The image will be saved with an @2x suffix. If you want to use it conditionally based on the browser's capability then you'll still need the JavaScript, but Perch will generate the images for you.
ewe agency

ewe agency 0 points

7 years ago

ah ok brilliant, so just to query, when i upload the retina resolution image that will double in size when using the density tag?
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

The density attribute is a multiplier of the image dimensions. If you have an image tag like this:

<perch:content id="image" type="image" width="400" density="2" />

and upload an image that is big enough, the resulting file will be 800px wide, but displayed at 400px wide.

If you want to dynamically switch in-browser, you'd want both:

<perch:content id="image" type="image" width="400" density="1" />
<perch:content id="image" type="image" width="400" density="2" />