A Guide To Responsive Display of Dynamic Images
If you look around the web, you will see a lot of examples of distorted, pixelated or truncated images. Even on prominent sites. This blog explains how you can avoid them and make your website look nice and crisp.
So let's say, you wanted to create a nice web page with an image.
But you end up with one of these problems:
- Distorted Image
- Truncated Image
- Overflowing Image
- Pixelated Image
- Slow loading Image
Let's go through each of these erroneous displays and see how you can fix that.
Typically, you would want to display an image with fixed dimensions, in a section of your web page. Neatly organized with all the other content. We will call the area in which you want to display your image as it's container box.
Now if your image aspect ratio (explained later) matches exactly with that of the box, everything will play nice. But it all goes awry, if it does not match.
Distortion occurs when the aspect ratio of the image does not match that of the box. Aspect ratio is the ratio of width to height of the image. For example, if you try to put a square image in a rectangular box, you are bound to see distortion. Ever heard of a square peg in a round hole!
The solution to avoid distortion is to let the image flow in one direction instead of forcing it to take the aspect ratio of the box. If you are not sure about the aspect ratio of your dynamic image, keep your box flexible to accommodate for different aspect ratios. There are two ways you can do this:
Keep one dimension fixed and let it overflow along the second
For example, you can apply proper styles to the box to have a fixed width, while allowing the height to auto adjust. The display height will then vary and be calculated on the fly from the fixed width of the image.
Keep one dimension fixed and let it truncate in the other direction
Let's say you want your box to be of a fixed width and height, but your source image aspect ratios can vary. Then you can also choose to truncate the image along the horizontal or vertical direction without letting it distort to fit the box. Any part of the image overflowing the box will be cut out in this case.
Truncated or Overflowing Image
If you have made a conscious choice as above to truncate the image, that's great. But you might get unexpected truncated or overflowing images for other reasons as well.
Truncated or overflowing images usually happen when there is a problem with the overall layout of your page. It can happen when your image box is fluid, but other sections have fixed positioning.
Let's use an example to illustrate that. Let's say your image is at the top of the page. After the image, you want to leave a gap of 20px and then display some text content.
You tested your layout with an image of 200px height. Taking that into account, you applied a fixed top position of your text content to be at 220px.
It all looked good, until in production where the images can change dynamically. If the box is styled fluid, it will try to take a dynamic height to display the image without altering its aspect ratio.
But since we have a fixed position for the text content at 220px from top, the image will either truncate abruptly above it, or it could overflow onto the text. Which of these two happens, will depend in the way the styles have been defined.
Abrupt truncation or overflow can be avoided if we keep the whole page layout to be fluid. For responsive pages, we should position all elements relative to adjoining content. And not relative to the page itself.
In the above example, instead of putting the text content 250px down from the top of the page, we can have a fluid layout so that the text displays below the image regardless of where the image ends. A margin of 20px in between can also ensure that we have the necessary intended gap between the two.
Pixelation occurs whenever we try to display a smaller image on a larger viewport. Let's say your original image is 50px wide. And you want to display it on your web page with a width of 400px.
The browser will need to stretch the 50px wide image to 400px, which will result in pixelation or a grainy image.
The solution to a pixelated or grainy image is pretty simple. We just have to make sure that our original image width is 400px or wider. In other words, we should always use a higher resolution image to avoid pixelation.
So why not always use very high resolution images? Because this will effect the performance of your web page. Higher resolution image would be of larger sizes, and it will take longer for your browser to download the image from the internet.
So don't use sizes larger than the intended display to avoid performance costs.
To avoid both pixelation and performance issues, always see if you can have the original image in the same resolution as the target display. Not any smaller. Or any larger.
Optimizing for multiple resolutions
It might be work to modify the original image to a different intended resolution. Also, for responsive layouts, for some images you may have multiple display at different resolutions. For e.g. a smaller size for mobile. And large size for desktop.
If you keep the image resolution to desktop, then that's a big overhead to load that large image on mobile. You are bound to see increased load time since mobile network speeds generally tend to be slower.
There are available solutions that you can take advantage of. For e.g. you can use an open source tool from cloudinary (https://www.responsivebreakpoints.com/) to create images at various sizes. The generator tool also creates an HTML5 image tag that you can copy-paste into your code. The srcset attribute of the img tag is set to list the image versions and width values according to the intelligently selected breakpoints.
Modern browsers that process the img tag will then know how to select the correct image version according to the available space of the image in your responsive web layout. A more thorough reading on the cloudinary solution for sourcing images at multiple resolutions can be found on this blog post here.