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
Here is a good article on the srcset
attribute and how to use it. srcet
allows you to declare a set of images to be displayed on different viewport sizes. You just have to save and image at different resolutions e.g. banner-phone-HD.jpeg would be the highest resolution.
Exmaple:
<img alt="my awesome image"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">
The above would serve banner-phone.jpeg to devices with viewport width under 640px, banner-phone-HD.jpeg to small screen high DPI devices, banner-HD.jpeg to high DPI devices with screens greater than 640px, and banner.jpeg to everything else.
There are also other methods like CSS media queries you can use to produce the same effect.
I am not aware of any JQuery plugins which would help with this.
In short, Srcset
is a new attribute which allows you to specify different kind of images for different screen-sizes/orientation/display-types. The usage is really simple, you just provide a lot of different images separating them with a comma like this: <img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">
. Here is an example: srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"
This is a longer answer which explains things in more details.
Difference between srcset and picture. Both srcset
and picture
does approximately the same things, but there is a subtle difference: picture
dictates what image the browser should use, whereas srcset
gives the browser a choice. A lot of things can be used to select this choice like viewport size, users preferences, network condition and so on. The support for srcset
is pretty good and almost all current browsers more or less support it. Situation with a picture
element is a little bit worse.
Descriptors are just a way to show what kind of image is hidden behind the resource. There are various kinds of descriptors:
srcset="image.jpg, image-2X.jpg 2x"
The display density values—the 1x, 2x, etc.—are referred to as display density descriptors. If a display density descriptor isn’t provided, it is assumed to be 1x. Good variant to target retina displays.srcset="image-240.jpg 240w, image-640.jpg 640w"
. I am sure this is self explanatory. The only problem is that by itself width descriptor is not really helpful. Why? read heresrcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">
. The instructions for the browser would look like this: (max-width: 480px) 100vw
— if the viewport is 480 pixels wide or smaller, the image will be 100% of the viewport width. (max-width: 900px) 33vw
— if the viewport is 480 pixels wide or smaller, this rule will never be reached because of the previous media condition. And 254px is when there is no media condition listed, the length is assumed to be a default value used when none of the other media conditions are met.Just for completeness will add here that there is an image-set() attribute for a background image in CSS and some other helpful link here
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:
http://ik.imagekit.io/demo/default-image.jpg
or relative path /demo/default-image.jpg
1.5x
, 2x
etc.450w
. This is the width of the image in pixels.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.
<img src="image.jpg"
srcset="image.jpg,
image_2x.jpg 2x"
/>
Live demo - https://imagekitio.github.io/responsive-images-guide/srcset-density.html.
The syntax is similar to the display density descriptor, but instead of display density values, we provide the actual width of the image.
<img src="image.jpg"
srcset="small.jpg 300w,
medium.jpg 600w,
large.jpg 900w"
/>
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.