Best way to source your images in web

When it comes to img tags in building web apps and more definatively a responsive web app. We need to focus on the fact that screen sizes will be different for each device and we do not need to give a 1920×1080 sized image for a 360px wide smart phone.

We need to tell the browser that please download a smaller available image.

The solution is simple we tell our browser

Heyy!!

If the device is xx long then give the xx.img file best for matching the size, which is going to be sharp and also not too big on the bandwidth costing delay.

<img
  src="images/photo-800.jpg"
  srcset="
    images/photo-400.jpg 400w,
    images/photo-800.jpg 800w,
    images/photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A mountain landscape"
/>

srcset

The srcset tag is like a menu of available images that we have, we will tell the browser that from these set of available images I want to apply the image that best suits.

sizes

thats where the sizes tag come along it tells us that hello we have an image and you will set the image which

But how do we figure out which is the best image to use

The srcset is the tag that is used to like a menu from which browser can decide which available images are there for use to choose for.

800w ?? what does that mean

The 800w is the intrensic width of the image

• photo-400.jpg is 400px wide

• photo-800.jpg is 800px wide

• photo-1600.jpg is 1600px wide

How it works?

When you visit a page something happens…. The HTML of looks for the size or dimensions of the laptop/tablet/mobile/smartwatch… device

It registers that from the given instructions I need to find the best resolutoin image that will also not be heavy on the bandwidth and processing.

It looks at the menu of available images (srcset), then it looks for the sizes that what are the instructions given by the programmer to download which particular image

Viewport width = 1200px

Then:

• The image will display at 50% of viewport width → 600px.

• Browser multiplies by DPR: 600 × 2 = 1200px effective pixels needed.

• Browser picks the smallest file ≥ 1200px → photo-1600.jpg.