Geek Answers Handbook

Submit an image with a different size / resolution depending on the width of the device and the bandwidth of users

Im creating a website with a full-screen background, the website is responsive and is currently serving the same images on the iphone, as it would with a 27-inch monitor. Obviously, a 27-inch monitor requires a higher resolution image, currently all devices / screen resolutions receive the same images that are approximately 1900 pixels wide and about 300 kb in weight, they do not look as good as on a 27-inch screen, but I do not want to make them larger, since there are 20 of them and the mobile user can download them forever.

Is there a way similar to media queries where I could serve as an image based on screen resolution and perfect bandwidth of the user device?

+4
source share
2 answers

For your use case, you can use srcsetwith a width descriptor and attribute sizes.

The attribute srcsetdefines a list of image candidates, and you describe the width of each image in a pixel:

srcset="image-640.jpg 640w, image-980.jpg 980w, image-1240.jpg 1240w, image-1900.jpg 1900w, image-2400.jpg 2400w"

The attribute sizesdescribes how large you want to display this image. Here is an example:

sizes="(min-width: 2400px) 2400px, 100vw"

This means that if you want to display it at 2400pixel in a browser window of 2400 or more, otherwise you want to display it at full width of the viewport.

:

<img 
    srcset="image-640.jpg 640w, image-980.jpg 980w, image-1240.jpg 1240w, image-1900.jpg 1900w, image-2400.jpg 2400w" 
    sizes="(min-width: 2400px) 2400px, 100vw />

, , , . , ( , - ), . source, .

<picture>
   <source media="(min-width: 1024px)" srcset="desktop.png">
   <source media="(min-width: 480px)" srcset="tablet.png">
   <source srcset="mobile.png">
   <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="A photo of London by night">
</picture>

srcset sizes Chrome, Firefox Safari 9 ( 8). Safari 8 IE, polyfill (https://github.com/scottjehl/picturefill https://github.com/aFarkas/respimage).

+6

<picture>. , -:

<picture>
   <source media="(min-width: 480px)" srcset="tablet.png">
   <source media="(min-width: 1024px)" srcset="desktop.png">
   <img src="tablet.png" alt="A photo of London by night">
</picture>

, polyfill, . <img>.

srcset. picturefill.

+1

More articles:


All Articles