UI Development

Responsive Images

Images have fixed dimensions, we can’t stretch them more than their actual dimensions. This is because they will get pixelated or may look blurred on some or the other devices. So, to deal with responsive images, we have to take into consideration the image’s dimensions, the device’s dimensions as well as the device’s screen resolution.

Screen resolution does have an impact on how the images are displaying in the browser. Retina screens have twice as many pixels per inch than standard resolution screens. For example, if an image of 400 x 300 pixels needs to be rendered correctly on a page of a retina device, then the actual image file should be of 800 x 600 pixels. But, in standard or small devices, we don’t need to send those extra pixels for those images, as it will result in bad user experience.

SVG Images

  • SVG images are vector based and can solve the above problems to a good extent. Let us assume an image of 400 x 300 pixels & add it in the code base.
  • The above image will display firmly on both standard & retina screens, as the browser will automatically scale up the image for retina screens. To display this image neatly on mobile & tablet layouts, we need to add the below style to the image so that it takes the width of the container & adjusts the height automatically.

    However, the image will look very large in the desktop, which can be fixed by giving max-height to the image.

PNG, JPG Images

  • PNG & JPG images cause more screen resolution issues as they are defined as pixel by pixel, not as vectors.
  • In this case, we need to upload the high-resolution image file of 800 x 600 pixels(2x version), so that the retina screens can display the image crisply. If we use a low-resolution image file of 400 x 300 pixels, it will look fine on standard screens but blurry/fuzzy on retina screens.
  • We need to make a few changes in our HTML & CSS as follows. So, here the image is wrapped in one more container so that its height doesn’t get set to the height of the .images container.

  • We are sending the same high-resolution image(PNG/JPG) to the non-retina screens as well even if they don’t need that much extra data. So, we need to optimize images using the below methods.

SRCSET

  • The srcset attribute in HTML contains a list of images along with the properties to tell the browser which one it should use for a particular device.
  • The 1x will tell the browser to render example-small.png(400 x 300 pixels)on standard resolution screens & 2x will tell the browser to render example-big.png(800 x 600 pixels) on retina screens. Old browsers will fallback to src attribute.
  • We can achieve the same thing through CSS using image-set function which is as follows:
  • This method will help us in preventing sending unnecessary data to non-retina screens.
  • However, this method will not be good for retina mobile devices when we are using larger images. In that case, retina mobile device will download a high-resolution image even if when low resolution/standard screen resolution image would be fine enough for it. This can be fixed using the next method sizes.

SIZES

  • The sizes attribute contains a list of media queries along with the rendered width of an image when a particular media query is in effect.
  • Suppose we want to display a big image in our hero banner component having a width of 900 pixels. So, for standard screens, image width should be 900px & for retina screens, it should be 1800px. Since smartphones are usually having less than 400 pixels width, so the corresponding retina image only needs to be 800px wide. So, in smartphones having retina screens, we can send a low-resolution image(standard screen image) instead of a high-resolution image.
  • Code snippet for the above case will be:

    Here we are using the width of the image instead of 1x & 2x in srcset attribute. 1000w tells the browser that the image banner-small.jpg is 1000 pixels wide & 2000w tells that the image banner-big.jpg is 2000 pixels wide. The sizes tells the browser to load 900px wide image if the screen width is 900px, otherwise, the image’s width will be 100% of the viewport width.
  • So, that means the retina devices can use banner-small.jpg as long as their screen is less than 500 pixels wide, otherwise, they can go with banner-big.jpg for more than 500 pixels wide screens.

<PICTURE>

  • <picture> tag sends different images to the users based on their device. It is having <source> tags inside that conditionally loads images based on media queries.
  • A small code snippet of the same is as follows:
  • The same thing through CSS can be done as below:

SUMMARY

We can summarize this blog as follows:

  • For small images like images which are less than 700 pixels wide, we can use the srcset method.
  • For bigger images, we can use the srcset + sizes method.
  • And, if we want manual control over the images (like loading different images for different devices), we can use the <picture> method.

About The Author