-2

I want to upload images in mulitple sizes.

For example If I am viewing the site in mobile (320px) the image with the width of 320px be shown . If I am viewing the site in Desktop the resolution of the image should be 1024 px

Note: I dont want to set the width using css I actually want to use different images based on the screen resolution so I can get maximum score in page speed insights

o basically what I need to have following functionality

If the screensize is 1024 we need to load image 1 with width 1024 If the screensize is 760 we need to load image 2 with width 760 If the screensize is 320 we need to load image 3 with width 320 and vice versa

Pratik bhatt
  • 488
  • 8
  • 23
  • Look at srcset , it will do what you need.https://stackoverflow.com/questions/19634463/what-is-an-srcset-attribute-in-img-tag-and-how-to-use-it?r=SearchResults – G-Cyrillus May 08 '21 at 10:33
  • You can specify multiple sizes as @G-Cyrillus has suggested, but bear in mind that you'll never be able to specify enough images to satisfy all potential viewport dimensions so you'll also want to do something like specify cover or contain on the img or background. – A Haworth May 08 '21 at 10:38
  • Is it possible I can get only 1 image in source. Using above will show 3 different images. – Pratik bhatt May 08 '21 at 12:37

2 Answers2

1

You can use the tag to define several sources based on media queries in your HTML. This will load up different image file based on the screen size without the need for CSS at all.

For example:

<picture>
  <source media="(min-width:1024px)" srcset="./image1024.jpg">
  <source media="(min-width:760px)" srcset="./image760.jpg">
  <img src="./image320.jpg">
</picture>

The last tag is behaving like the default image will be shown if no media queries were good.

Link to definition and usage of on W3Schools

Zion Ay
  • 191
  • 4
-1

You Can Set

#image-tag:background-size: 100%;

so that image width is equal to screen width.

Sagar Daud
  • 16