What is an srcset attribute in IMG tag and how to use it?

Question

I want to know how could I start using the HTML srcset img attribute in my mobile apps. Or Is there any other jQuery plugin which helps me to solve image resolution

Answer 1

Here is a detailed guide on srcset along with code samples.

srcset allows you to define a list of different image resources along with size information so that browser can pick the most appropriate image based on the actual device’s resolution.

Each comma-separated item in srcset has:

1. Image URL, e.g. http://ik.imagekit.io/demo/default-image.jpg or relative path /demo/default-image.jpg
2. An empty space
3. The actual width of the image or display density:
   • Either using display density descriptor, for example, 1.5x, 2x etc.
   • Or, using width descriptors, for example, 450w. This is the width of the image in pixels.

Using display density descriptor

The syntax for display density descriptors is straightforward. srcset provides a comma-separated list of image resources along with display density it should be used, for example1x, 2x etc.

Live demo - https://imagekitio.github.io/responsive-images-guide/srcset-density.html.

Using width descriptor

The syntax is similar to the display density descriptor, but instead of display density values, we provide the actual width of the image.

This lets the browser pick the best image

Using width descriptor allows the browser to pick the best candidate from srcset based on the actual width needed to render that image on that particular display at runtime.

Note that display pixel density is also taken into account by the browser while calculating the required width.