HTML & CSS

Image aspect ratio and why it is important

by Erik Briones | 1 December, 2017

When designing your website and when discussing the types of photos your website should accommodate the most common question that pops out is “what image aspect ratio are we using?” I personally have heard it countless times. Especially when the site I am designing have User Generated Content (UCG) or are News websites.

What is an image aspect ratio?

It is the proportional relationship between the width and the height of the image. You will see it displayed as two numbers separated by a colon. For example: 16:9 or 4:3.

Remember that 16:9, and 4:3 is not the width/height of your image. They are just the mathematical ratio of the width/height.


Imagine these boxes are your images. You will notice that they have different widths and heights but they all share the same aspect ratio which is 4:3.


How do we know they have the same aspect ratio?

You can inspect it visually, and you will notice that the boxes are similar “in shape” but they are just increasing in width and height.

But the best way to know is to use math. Nothing complex just a simple calculation of the width and the height.

To get the ratio you only need to divide one number with the other. In our example it would be 100 divided by 75 or 200 divided by 150, or 400 divided by 300.

You will get the answer: 1.333333 , the same number if you divide 4 by 3 (4/3, or 4:3).

So in your website, even if you have varying sizes of images, if you divide the width by its height and you get the same number (like 1.3333) you know that your images share the same aspect ratio.


Tip: When designing in Photoshop or Illustrator, make sure to use “Shift” to maintain the aspect ratio of your image/object. You will notice that as you drag it to resize both the width and height will increase proportionally.

Do we need to have the same image aspect ratio on the website?

My quick answer to this is NO. You do not need to have your images of the same aspect ratio.

It is helpful to use one to create a feeling of consistency on your website. It can help you stay in the vertical rhythm or at least try to be reasonably in line with it.

Having more than one image aspect ratio also creates a feeling of emphasis on a particular image or section. Breaking the monotony of the structure creates a desired imbalance.

Responsive web design
When it comes to responsive design you will have little control as to how your image will behave in the user’s device. Also that the user’s device screen can be wide as in a monitor or a laptop, or tall like a mobile phone or tablet in portrait.

So a wide panoramic image that looks really good on your desktop might look thin and long on a mobile device. There is a way to “curate” the image, but I will reserve it for another topic.

Source of your image
If you are designing a marketing website, or a personal site. You have full control of the images that you put in. So you can always crop and edit the photo and maintain a standard aspect ratio.

If you rely on UCG, imagine a social network site, or classified site where you ask a User to upload an image. Their source could come from a mobile phone, camera or from a photo they edited desktop/laptop. You do not expect to always get the same image aspect ratio from all users. You can try to restrict them as they upload, or automatically crop their images. But the former is annoying in terms of user experience and the latter may lead to unwanted cropping.

So what image aspect ratio should I follow?

Keep in mind the purpose of your website, the context, the feeling it should convey, and the source of your image. That is my personal advice.

But when in doubt, stick to the standard of 16:9, or 4:3. There are others out there, but i prefer to just use these two.

In conclusion

Next time you visit your favourite news website, or portal, try to visually inspect the images. Imagine you are stretching the images proportionally, can you guess if they share the same aspect ratio?

Also notice if there “breaks” in the ratio. Not only the ones that are “tall” or bigger in height, but take a look at the shapes. Are they squarish or rectangular or wide?

You will begin to get the feeling when all images are sharing the same ratio and when one pops out or breaks.


My thoughts from this post are hugely based on my experience as a designer. However I needed the inspiration from these links below to be able to explain it as simple as I can.

Reference:

Understanding Images and Aspect Ratios on the Responsive Web

What Is Image Aspect Ratio And Why It Matters… A Lot!

Importance of image size and aspect ratio in web design


I am currently reading...

Sprint: How to solve big problems and test new ideas in just five days

Jake Knapp with John Zertasky & Braden Kowitz from Google Ventures