Retina images
It's easy to serve retina images to hi-res screens with Sirv.
If your page uses Sirv JS, then retina images will be served automatically. Alternatively, you can manually specify retina images with 'srcset'. The pros and cons are described below.
What is a hi-res screen?
Hi-res screens squeeze more pixels into the same space, making images look really sharp. Modern screens such as the Samsung Galaxy S9 have up to 4 times more pixels per inch than standard resolution screens, so to ensure your images look sharp on such a screen, they should be 4 times larger than a standard res image.
For the best user experience, you should serve differently sized images to each screen. You can't just serve the largest image to all screens or many users will receive unnecessarily large images, which will damage your page loading time and your SEO.
Use Sirv JS for automatic retina images
The easiest way to always serve the best image to every screen is with Sirv JS. It will automatically detect the users display and serve a suitable scaled image to match the screen resolution - 1x, 2x, 3x or 4x.
Follow the steps in the responsive imaging documentation or check out some responsive imaging examples.
Use srcset to manually choose retina images
Alternatively, add the srcset attribute to your img tag. The browser will request whichever image matches the pixel density of the users' screen.
For best results, specify 4 densities - 1x, 2x, 3x and 4x. The following example sets 4 densities, with images scaled by Sirv's width scaling at 400px, 800px, 1200px, 1600px:
<img src="https://demo.sirv.com/image.jpg" srcset="https://demo.sirv.com/image.jpg?w=400 1x, https://demo.sirv.com/image.jpg?w=800 2x, https://demo.sirv.com/image.jpg?w=1200 3x, https://demo.sirv.com/image.jpg?w=1600 4x" width="400">
The srcset method of serving retina images requires more effort than Sirv JS but it will request the image straight after page load, making it the fastest possible way to load retina images. If using Sirv JS, there is a small delay while Sirv requests image info and then calculates the most optimal image to serve.
Help from a Sirv expert
If you'd like advice serving the best possible optimized images, please send your questions to the Sirv support team. We reply to all emails within 24 hours.
