“Why is my banner zoomed in?”
“Why is my head chopped off!?”
“Why are my images blurry?”
We get asked these questions all the time. So much, we realized we needed to give a detailed explanation of the importance of website image aspect ratios. We know it can be confusing, so with our explanations, analogies, and animations, our goal is to give you a better understanding of both web images and getting your site looking remarkable.
Let’s start with the basics.
Gain a Basic Understanding of Images
Images are oriented into one of two formats: portrait or landscape.
Imagine a photographer taking a picture of the sunrise with lakes and mountains spanning across the horizon. The photographer needs to capture the grand majesty of that mountain-scape. So the shot is taken as wide as possible to get those exaggerated perspectives. In other words, the photo will be wider than it is tall and works perfectly for a widescreen format.
The same can apply to digital video. If you saw Avatar during its theatrical release (or even on your widescreen tv), you may notice it’s shot in a widescreen format. In fact, Avatar is considered one of the best films shot in IMAX—using high-resolution cameras and very large screens. This helps create a more immersive experience for the viewer, which is pretty important when a film is predicated upon a larger than life fantasy world. In other words, orientation matters.
Modern Hollywood movies are universally displayed at a sixteen by nine (16:9) video aspect ratio. If you are interested in learning more about video aspect ratios and the early days of motion pictures, read this aspect ratio guide for filmmakers.
Alternatively, a portrait format creates an image that is taller than it is wide. Think of the way traditional portraits depict a person from head to shoulders and captures them looking directly at the artist.
Once you’ve determined the orientation, it’s time to think about the size.
Why Does Image Size Matter for the Web?
Image size determines how large the image displays on your site. Ask yourself: How important is this image? How much impact do I want this image to make? Naturally, the more important the image, the bigger it should be.
Optimize Images and Page Speed
You need to find the right balance between size and quality. Low-quality images look blurry, but large images slow down your website. There are times when using a larger format image is justified, like banner images. Slow load times are not only annoying, but also negatively affect SEO. Consider the following best practices to appropriately upload images.
What Size Image Should You Upload?
- Consider file size: File size can dramatically slow down your website. Find out how many bytes the file size contains. An image file size in MB (megabytes) is huge, while an image in KB (kilobytes) is much more web-friendly. If your file size is really large, compress your images with ImageOptim.
- Determine image size: Decide how much space should be taken up by the image. A thumbnail image displayed at 150px wide should not be uploaded at 1000px. For fullscreen images, like banners, a 2000px wide image is generally successful. If you plan to upload huge images (3000px or more), you may want to consider using a plugin like Imsanity to control extra-large images with a max size. Modern WordPress themes are typically designed to leverage multiple images sizes and register those image sizes in WordPress to allow uploaded images to have multiple automatically generated image sizes.
- Resolution for web images: The higher resolution, the larger file size it will be. Web images are measured in pixels and should use a standard screen resolution of 72 PPI (pixels per inch). Resolution is another word used to describe the measurement of pixels. Keep in mind that the resolution of the original image affects how it displays. If you have the option in your image editor (e.g. Photoshop), always “Save for web;” this gives your image a web-friendly resolution.
Choosing Inline vs. Background Images
If your image is significant, display it as an inline image, rather than a background image. An inline image is set within the body of a page, where you can manually adjust its size and alignment.
Background images are just that—backgrounds; they lay behind some text to break up white space and give your site some texture, but they’re not meant to be the focus. We recommend using simple images for background images so any overlaying text is easy to read. If you must have a subject or faces in your website background image, make sure the focal point is near the center to prevent heads from getting “chopped off” or having text overlay a face.
We Love These Image Sizes for the Web
You need to research how your WordPress theme uses images. Mai Theme defines a handful of custom image sizes so you don’t have to worry.
All of these Mai Theme registered image sizes have predefined sizes and fixed aspect ratios. Using any of these sizes will show a cropped portion of the full image at the set width/height.
- Width 1600px / height 533px = aspect ratio 3:1. This size is perfect for displaying a fullscreen hero image at the top of your site. Mai Theme utilizes this size for Small and Medium height banners.
- Width 1600px / height 900px = aspect ratio 16:9. This size works best as a fullscreen image. It’s still considered landscape format, but uses the majority of a standard laptop screen. Mai Theme utilizes this size for Large and Extra Large height sections.
- Width 800px / height: 600px = aspect ratio 4:3. In photography, this the most common aspect ratio. This size uses a little less than two-thirds of your screen.
- Width 550px / height 413px = aspect ratio 4:3. This ratio is really close to what most cameras shoot images at and takes up about half your screen. This size is perfect for two-column blog archives.
- Width 350px / height 263px = aspect ratio 4:3. Most stock images utilize this ratio. It’s about one-third of your screen, so it’s great for a three-column archive.
- Width 260px / height 195px = aspect ratio 4:3. This ratio takes up about one-fourth your screen—perfect for four-columns.
Explore Image Shape (AKA Aspect Ratio)
All images have a proportional relationship between width and height (x:y), this determines the shape—also known as the aspect ratio. The most common aspect ratio of digital cameras and mobile devices is 4:3—which qualifies as a landscape format and is generally deemed as more successful than portrait format on websites.
The standard definition of aspect ratio is the ratio of the width to the height of an image.
All three of these images below vary in size, but have the same aspect ratio of 3:2. Simply put, for every 3 parts of the width, there are an equal 2 parts that make up the height.
To make an image wider or taller, use crop tools or media editors to entirely change its shape. By changing it’s shape, you change the aspect ratio. To get a good understanding of what ratios you’re working with, plug your image dimensions in an aspect ratio calculator.
The Dollar Bill Analogy
A traditional US dollar bill has an aspect ratio of approximately 7:3. The image below is displayed at 700px wide by 300px tall, unaltered in any shape or form.
For sake of argument, go ahead and take out a dollar. You cannot stretch or modify the bill’s shape—only the size may be perceived as bigger or smaller depending on how close it is to your eyes.\r\n