Should I use Retina images?

I know this may be obvious that yes I should, but I’m looking specifically at some banner images I’ve got, if I make them Retina dimensions, even with a jpg compression at 40 they are still fairly large data size, I’m just thinking of the data rate levels for a mobile device using mobile data and general page load data size on any computer.

So the question really is, are Retina images still downloaded as part of the page load in F3 in the Background and Image tool for non-Retina devices, but hidden from view, or are they not downloaded at all if the browser/device is a non-Retina device? I would imagine it would need some fancy PHP script to determine and serve, but with that I’m only guessing. I’m pondering over whether to add so any advice would be great. Thanks - Ben

1 Like

Retina features in Foundry 3 use two methods, depending on image type, to responsively load images. For images such as those used as background in the likes of the Background tool a media query is used to detect if the display is double-density or not. If it is it loads the retina image as the background. For tools like Image it uses srcset within the img tag. This serves the same purpose – detect if the image is double-density or not. The browser then chooses the appropriate image to serve up. This is all done with HTML and / or CSS.

2 Likes

That’s fantastic Adam, thank you for the info and the understanding of the ‘mechanics’ behind it. Thanks again - Ben