Load retina image on your site with the correct resolution and size for the device.
When it comes to loading images we all want to display the best quality we can on our website. But doesn’t mean loading the biggest image you have expecting one image does all. Downloading huge image when only a smaller image is required would only slow down your site and user experience. Also downloading an image that is too small to then use at a larger size would pixelate and look poor quality.
So the one image does all does not really work, but downloading a series of images and then picking the one you want to display also does not work. There is also the need to download and display a larger images on retina screens which is basically twice the size as a standard image. You need to download a specific image size and resolution depending on the device and screen size. This is where srcset comes in. The srcset attribute in html5 enables you to choose from a list of images and download only the image that best suits your needs at the size and resolution required.
Using images editing tools such as Photoshop you can create an image and the largest size required and then set it to export that same image at various sizes. This will add a suffix to the end of the file name such as @x2, @x0.5, @x1, etc. so your image names will look something like this:
You can choose your own suffix to help you identify each image size and resolution.
So now with a set of images at various resolutions that you can upload to your site and choose the image you want to display at any given screen size, or serve up a larger image for retina displays. You will not be uploading several files for each image you want to use which will take more space on your website hosting area. Most hosting options are quite generous and will allow ample space for this.
So instead of loading each image individually like this:
You can now pick the best image and size from your set of images like this:
<img srcset=“/images/myimage-1x.jpg 1x, /images/myimage-2x.jpg 2x”/>
The 1x image being the standard size image and the 2x image being the retina sized image. Your browser not download both images but will download and display only the correct image for your screen size and resolution. So for a standard screen it will download and display myimage-1x.jpg and on a retina display it will download and display myimage-2x.jpg
So this will choose which image to display for retina devices but this will not decide the size of the image between a desktop screen and a mobile. The retina image might be great for the desktop but a bit of overkill for a retina mobile which doesn’t need such a large image to fill its screen. Also downloading such a large file on a mobile which might be using mobile data will just slow down the experience.
With srcset you can also specify the image depending on the screen width but adding the screen width after the image and before the comma. To set 3 different images pending on the screen with you might add something like this:
<img srcset=“/images/myimage-med.jpg 1024w, /images/myimage-lrg.jpg 2048w, /images/myimage-sm.jpg 800w”/>}
So for the standard display with a width 1024px you will display myimage-med.jpg. For large screen with display widths of 2048px you will display myimage-lrg.jpg and smaller screens such as tablets or mobile you will display myimage-sm.jpg. Using this method is also great should you want to change the proportions between screen sizes. Maybe a wide letterbox image for the large image, standard proportion for medium and square image for small mobile etc. This can again be combined with the retina size option so you could also have
<img srcset=“/images/myimage-lrg-1.jpg 2048w 1x, /images/myimage-lrg-2.jpg 2048w 2x”/> to choose the image for the larger screen and also choose the retina version if required.
Most newer browsers support the srcset option as standard. A list of which browser support it can be found here. By adding the standard src before the srcset option you can set a standard size image which older browsers will understand so not to break the image display on older browsers.
Add the standard image with src and alt like this:
<img src=“/images/myimage-med.jpg” alt=“my image title” srcset=“/images/myimage-med.jpg 1024w, /images/myimage-lrg.jpg 2048w, /images/myimage-sm.jpg 800w” />
So using the srcset when choosing your image is a great way to ensure you download the optimum image to suit your view. The retina image will not be downloaded if the browser does not detect you have a retina display and will revert to the default. Image instead so not to waste time downloading and image that is too big. But this will create additional work when adding new images to your pages as you may need to upload and link several images each time.
If you need help fine tweaking your existing website code the visit our website improvements page.