Feb 8th — 2017

3 reasons to Design with image ratios

Why though

Gone are the days when we simply slap our images onto web pages like so:

<!-- Don't do this -->
<img src="images/avo.png" alt="avocado" />

Why is this wrong?

When deciding on what image size you should use for your intricate product tiles you should instead think about what ratio your image should have.

Seriously why though

Reason 1 — To avoid re-inventing the wheel it's a good idea to constrain the images you are working with to a ratio, which can be reused to keep the design more consistent.

Reason 2 — Certain photographs are made to be constrained within a certain ratio. So by using ratios we are ensuring the image is being presented in the best way possible.

Reason 3 — From a developer point of view a big reasons to keep image ratios in mind is the fact that you can eliminate page jumps all together whilst the images are loading. This is because the image is placed inside a fixed-height div. Many call this Lazy Loading, I just call it correct usage of image ratios.

With that said, an implementation of an image could look similar to this:

<!-- Do, do this -->
<div class="image r:4x3">
  <img src="images/avo.png" alt="avocado" />
</div>

Notice the CSS includes object-fit:cover to help us ensure the image is always smugly positioned inside the div. The reason is because we're working with a lot of decimals, and sometimes the pixel values get rounded so we're just making sure the images always fit.

.r\:1x3   { padding-top: 300%; }
.r\:1x2   { padding-top: 200%; }
.r\:2x3   { padding-top: 150%; }
.r\:3x4   { padding-top: 133.333%; }
.r\:1x1   { padding-top: 100%; }
.r\:4x3   { padding-top: 75%; }
.r\:2x1   { padding-top: 50%; }
.r\:3x1   { padding-top: 33.333%; }

.image {
  overflow: hidden;
  position: relative;
  img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

padding-top sets the height of the image container, which keeps the aspect ratio intact. The .r: class represent the aspect ratio the image will be when placed inside the div.

There isn't any magic involved so the images that you use in your project will need to be exported in the correct aspect ratio.

Download Sketch ratio files

icon Created using Figma

Show comments

comments powered by Disqus