Images on the Web: Part 1 — Responsive Images... (Opens in new window)

Why is this tiny image taking so long to load?

Another image related problem happens when we want to use only one image with a specific size for a responsive component. Imagine you have a component that uses cards to display properties.

The number of cards change based on different breakpoints set up to adapt the component to multiple screen sizes:

As you can see, this component is responsive. It has different layouts and adapts to screen size for a better user experience. We'll need to implement this component to take into account images of different sizes.

Sometimes components are designed for several screen sizes, but the implementation only uses one image size, maybe two based on whether the device is a mobile phone.

If we only provide images based on the device type, we will not give the user a good experience:

• We might end up downloading huge images to be displayed in small cards, we are forcing the user to wait until the images are fetched.
• Fetching small images that get rendered pixelated because the browser has to stretch them to cover a bigger area.

Imagine we use the next image to cover the 3 designs described above:

Let's see the impact of using only that image for all mobile, tablet and desktop.

Mobile

For mobile sized screens we need to stretch the original image. We are saving some bandwidth, but the cost is that we will display a pixelated image.

Tablet

The image will need to stretch or expand depending on how we want the image to fit. In any case, it will look pixelated or blurry.

Desktop

The image will resize massively in this scenario. The image won't get pixelated, but instead of this 9.9KB image we could have used another one with the right 112x58px size (about 2.6KB). That is an 84% improvement on the size of the requested image.

You can see the benefit of using the right size when it comes to images, especially when they are used in components like carousels or grids.

The solution is to consider and provide images based on the biggest image needed per breakpoint. That will require some calculations taking margins and paddings into consideration. We'll review this in a following blog post.

Tip: When working with responsive components, ensure that images have been set up to fit the designed user experience. Otherwise, images will be pixelated or loading times will increase.

Public link

Please use the above public link if you want to share this noodl on another website.