ROAR Resources

Managing Image Sizes on Responsive Websites

Modern screen resolutions vary from CGA (320x200) to 4k (4096x2160). Your website could potentially be seen on any one of these devices. So how do you get your images to always look tip-top?

Not only does the screen size itself vary considerably but also the aspect ratio. (This is the proportion between width and height of your screen and is expressed as a ratio e.g. 16:9). Current common aspect ratios for displays are 5:4, 4:3, 16:10 and 16:9. These vary from 5:4 (square (older PC monitors) to 16:9 (rectangular modern LCD displays). (Here's where you can see how different aspect ratios vary - look at the way the diagonal lines spread from the top left to the bottom right.)

The way your website accommodates all these various display shapes and sizes is to make the design fluid. This is standard practice in the industry and is known as Responsive design. This means that the design changes it shape and size to suit the circumstances. (The alternative would be to have a specific design for every likely screen resolution a process which would take an inordinate length of time to code and add huge cost to development projects.

Everything on the screen can scale except pictures because they are fixed sizes. So, in order for them to look acceptable on as many devices as possible we ‘zoom’ in and out of the image to ensure it always fills the prescribed area. (Please note that not only does this apply to overall screensizes but the shapes of 'containers' in which images sit on a web page.)

Hero Images & Aspect Ratios          

Below is a photo which is 640x360 with an aspect ratio of 16:9. The standard for widescreen desktops.

Standard 16-9 Photo

If the photo is shown on a screen with the same aspect ratio then the image will simply resize to suit. For example, below the photo correctly fits the screen size.

16-9 Image in a 16-9 Container

If, however, it is viewed on a squarer device the website has to accommodate this by zooming in or out of the photo. Here it does not.

16-9 Picture in a 4-3 Container

If the website simply resized the photo (whilst retaining its aspect ratio) to fit the screen size, this is what would happen:

16-9 Image Zoomed Out to 4-3 Container

There is now left a black ‘unused’ area beneath the photo due to the resize. To correct for this responsive (mobile friendly designs) zoom into the photo and effectively ‘crop’ the edges. Like this:

16-9 Picture in a 4-3 Container

If we take the reverse (and often more typical scenario) of a square photo and a rectangular screen we get this effect. Notice that the image has been resized (made smaller) leaving black bars on either side of the screen.

4-3 Picture in 16-9 Container

To rectify this the responsive design again zooms in on the picture:

Zoomed 4-3 Picture in 16-9 Container

Note how now the image is only showing the top half as a result of the ‘zoom’. Since the software has no way of knowing what is important in the picture it simply zooms in from a fixed point on the image.

Summary

Responsive designs are a ‘best-fit’ solution to the real world problem of trying to make a website look good under all circumstances. And as a ‘best-fit solution it can never be a perfect fit – what looks right on one screen may look less good on others. Nonetheless the responsive solution provides the most aesthetically pleasing result hence the reason for its universal use.

Have fun.

 

 

digitalROAR LogodigitalROAR is a Web Design agency based in Staffordshire. We build websites that convert visitors into customers and enquiries through great design, rock-solid technology and innovative Digital Marketing. Let's make Contact.