Tips for Successful Content Management :: Part 2
Image Aspect Ratios
You’ll learn how to better manage your content’s technical side and deliver a polished end product to your audience and add new pages to a website in a way that blends nicely with older content.
If you’re already up to speed, it’s time to dive into aspect ratios!
What Happened to Your Images?
You’re editing your new web site and it’s time to upload some new image assets. When you check the preview, half of the subject’s head is cropped in your new hero banner. Your new product image is appearing too small, or perhaps it’s stretched or blurry.
What happened? Is the site broken? Unfortunately, in addition to the art and science of selecting great imagery, there’s additional knowledge and complexity involved in making those images look good on the web. There’s both a strategic side and a technical side of selecting imagery. In this post, we’ll explore the technical side.
What are Aspect Ratios?
Images have sizes, or dimensions, and while these are important, they’re not the whole story when it comes to image size. Images also have aspect ratios which describe the shape of the image, regardless of its actual size. There are two dimensions, width and height, and the aspect ratio describes the relationship between them: is the image wide, square, or tall? If it’s wide, how wide?
Two images can be different sizes but the same shape, like a 200x100 image and a 400x200 image. They can also be different shapes but the same size, like a 200x100 image and a 100x200 image. Aspect ratios are the proportion between the width and the height. The 200x100 and 400x200 have an aspect ratio of 2:1 which is wide, but the 100x200 has a ratio of 1:2 which is tall.
Mapping Images to Spaces in the Design
The space in a design also has an aspect ratio. Sometimes, like in rich text, this is flexible and will adapt to whatever image you assign to it. More often than not, this space is designed for a particular purpose when the space doesn’t fit the image, it has to decide how to handle the difference.
Flexible spaces grow or shrink with the dimensions of the image asset, but they can push the page as its first loading the images. We use flexible spaces in rich text because of the simplicity of rich text editors and the various shapes of images used in rich text.
- Containing grows or shrinks the image until it fits in the aspect ratio of the space. The more different they are, the more it shrinks the image. We use containing for structured image fields like product images because the layout around them needs to be predictable.
- Covering grows or shrinks the image until it completely covers the space. The more different they are, the more it grows the image. If the image’s smallest dimension is really low and the space’s largest is really high, this can blow the image up so much that it becomes blurry. We use covering for banner images and backgrounds so that awkward blank space doesn’t appear.
- Stretching ignores the aspect ratio of the image and uses the aspect ratio of the space. The greater the difference, the more distorted the image will appear. We hardly ever use stretching.
.png)
Left to right: Contain, cover, stretch. The red area is the space to which the image is mapped, which has a 2:1 aspect ratio and is wider than the image.
Hero Banners and Background Images
Some spaces have aspect ratios that can make finding appropriate photography difficult. In order to keep the image from becoming massive on larger monitors, we’ll often choose a more horizontal aspect ratio for some spaces. We can also change the aspect ratio of the space across viewport sizes, preventing those wide ratios from making the image tiny on mobile devices. We call this a dynamic aspect ratio.
Banners can have text or other elements that cover different parts of the image on different viewport sizes. If you’re having trouble with these conditions, one strategy that works well is selecting landscapes, textures or more abstract imagery.
Alternatively, we can build photography cropping templates which account for the aspect ratio or ratios you’ll need, the changing positions of responsive elements, and better illustrate where the safe zones are for subjects.
A template showing the safe zones for a banner whose intended image asset is 16:9. On desktop (red), the aspect ratio is 3:1 and the text is in the bottom-left corner. On mobile (blue), the aspect ratio is 1:1 and the text moves to the bottom center.
Structured Images
Most images in structured content use the containing method. If you find a structured image that’s too small compared to others in the same type of space, it might simply be that the aspect ratio of the asset is off, possibly with negative space filling the unused area. This can cause the asset as a whole to shrink to fit the space.
_1.png)
The same image cropped differently, both using the contain method to fit a space with a 1:1 aspect ratio. The image on the left is cropped to the same size as the space but the image on the right is much wider, causing t to shrink.
Need help?
Is it time to tame your imagery? thunder::tech can make your graphics more predictable with custom templates and guided image creation. If you have content that you need to display which absolutely doesn’t work, we can also make design edits to your site to accommodate unforeseen situations.
Trust us, this isn’t our first rodeo. We can tame even the wildest of unresponsive templates and ensure your imagery works in harmony with your content. Yeehaw!
HAVING TROUBLE WITH YOUR SITE? INTERESTED IN DEVELOPING A NEW TEMPLATE? GET IN TOUCH AND WE CAN HELP.
Previous: Part 1, Layouts and Rich Text
About the Author
Anthony is a Senior Manager on the Performance Marketing team. Ask him about paid search, programmatic advertising, even SEO if you'd like. When you're inevitably satisfied with his response, be ready to turn the conversation to classic movies and music from the 70s.
Contact us today! No pressure, but we are here to help
Reach out to learn more about how thunder::tech can help your business not only succeed, but accelerate.