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 ImageTruncated ImageOverflowing ImagePixelated ImageSlow 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. Distorted Image 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! Solution 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 Image Overflowing Image 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…
Like to keep reading?
This article first appeared on frontglue.com. If you'd like to keep reading, follow the white rabbit.