Every image, every background and every container in a website has a shape.Usually, this shape is a rectangle. But depending on the device that we are looking on, this rectangle will change its dimensions.
From mobile phones, to televisions, to computer screens, every medium has an almost distinct shape in itself. This could be a challenge for designers, web developers and customers who populate the content on their websites, especially when you have to crop and convert content and information to fit those different devices. Because of all these different shapes, understanding aspect ratios and focuses could help you easily to move images and designs from one medium to another.
Mainly, we use two different methods to cover the most common possibilities that could be presented on a page of a website:
This method consists on shrinking the image, restricting and fixing its proportion within the confines of a fluid grid. This means that our image will be scaled proportionally by width and height, filling all the maximum space of the device, without cropping.
The use of fluid images or adaptive images, is mainly when we want to display the whole image without losing any part of it, accepting that this area is going to be smaller in phones and tablets, see example -
This method will tell the browser that any images should only ever be as large as their pixel value, which will ensure that the image is never stretched or pixelated. However, if they’re nested inside a parent container that’s smaller than their pixel value, then the image should shrink. So for example, if an image with a width of 800px is placed inside a container that’s only 600px wide, the image will also shrink to be 600px wide. The height will be calculated automatically and will maintain the original aspect ratio.
Confusing, if you're a content author? Click the link at the bottom of this article to request a website review.
This method is mostly used for images that are supporting any other content on a website. That allows you to not only automatically resize your images when the viewport changes, but also crop the images with a specific important focal point in mind.
By default, when we develop a website, we usually specify the focal point of each image in the middle point (centre) of each image. But this could be changed, see example -
For example, in the previous website view of one of our customers, the width of the section is shrunk to fit the device, and we have set a specific height of the section for each device. But the image will be always covering the whole area. The focus point of the image is set in the centre of it.
If we change this focal point to be on the table of that image (75% of the width, 85% of the height), when it comes to a different proportion of area to cover, the image will be cropped automatically by the sides, showing that focal point at every size.
(Compare to the preview image, to see how is showing the image focal point on a mobile device. In that case much more of the table)
The resizing of the image will be related to the container that holds the image inside. That means that we could make this container smaller or larger depending on either the content (usually text) that it is supporting, or prevail the height and width that the image needs.
From a design perspective, how cool is that!? The smaller an image becomes, the easier it is for what was once a large, prominent focal point. With this solution, you can make sure that users on small devices still receive high impact images.
We all want our images to display at the best possible quality, with optimal file size, on different devices, but achieving that is easier said than done. There are many different techniques for making images responsive, but some of them have serious downsides, such as limited browser support.
With these two solutions, you’ll know everything you need to know to get updated with responsive images.
Is your website handling responsive images properly?