Remember the last time you tried to find that perfect basketball team photo where everyone is smiling and no one is blinking? Then struggled to fit it on the site without cutting off the tall players’ heads? There are so many things to worry about when choosing just the right picture for your website, why should aspect ratio be one of them? Or file size?

Aspect ratio isn’t as complicated as it sounds. According to Carrie Cousins, “an aspect ratio is the proportional relationship between the width and height of a rectangle.” If you take the dimensions of your image and simplify them to the smallest ratio (just like in elementary school math!), you’ll end up with the aspect ratio. An image that’s 1200 pixels wide and 900 pixels high, for example, has an aspect ratio of 4:3. For your website, the aspect ratio of an image is more important than the specific dimensions, because the responsive nature of your site means the image may display at any number of sizes.

When choosing an image for your website, it’s important to keep in mind the space on your site the image is supposed to fill. Most of the time, the image will need to be shown in "landscape" orientation, meaning wider than it is tall. This is because there’s more real estate on the screen for wide images than tall ones. “Computer screens (today) are wider than they are tall, by quite a margin. They are widescreen. This means that we have a more room width-wise when designing websites than we do height-wise, without introducing a scrolling element,” Bernskiold Media explains.

Not all of your images will be landscape, though. Directory profile images, for example, are likely to be "portrait" orientation, while thumbnails may be square. Knowing the aspect ratio of the image location before you select an image keeps you from trying to fit a square peg in a round hole — or a rectangular one. “Not every image is going to be the right shape for your requirements. Sometimes you’ll be able to change the aspect ratio to make the picture work for the size and shape you have chosen without compromising the subject – but sometimes that just won’t be possible,” says Jo Waltham. You may be forced to admit that the basketball players won’t fit in that one location, and you’ll have to find a different photo to showcase.

The best way to change the aspect ratio of an image is by cropping it. Resizing an image maintains the aspect ratio by change the width and height proportionally so the image does not appear distorted. Cropping, on the other hand, changes the shape of your image. You can use the Finalsite Image Editor to crop your images, and even select from common aspect ratios to adhere to: 16:9, 4:3, 1:1, or 2:3. Simply select one of these ratios in the bottom-right of the editor window when Crop is turned on.

When you crop an image, make sure that its subject is in the middle of the frame. The image may not always display on your site exactly where it is cropped, so this is important to make sure the focal point of the image is not cut off. When a site resizes responsively, it isn’t possible for an image to maintain the exact aspect ratio 100% of the time. The image will display proportionally to fill the box, as close as it can get to displaying the full image. This is a web-standard practice, a necessary part of making websites look good on an endless number of screen sizes.

Another benefit of cropping or resizing your images is that it helps keep the file size manageable. On the responsive web, the image may appear relatively small, but the full-size file still has to load whether you’re viewing it on your desktop or your smartphone. If you have a picture that’s thousands of pixels wide, but the largest it will ever be shown is a few hundred pixels, all those extra pixels are unnecessary bulk that may affect load times. Cutting down the size of the image is a good way to optimize it for the web. If you’re resizing that drastically, however, there is a tendency for the image to appear blurry at the smaller size, because of all the pixels that are lost. For best results, resize the image separately to something closer to the size it'll be displayed at on the site before uploading it to File Manager or Resources. The less responsive resizing that has to be done, the clearer the image will be in it's final appearance.

There’s a lot more to think about when it comes to images than just taking a photo and putting it on your web page. Considering aspect ratio, file size, and other optimization techniques are important, as well. However, there are a lot of things to let go of, as well. “Generally, we need to give up the control over exactly how the image is going to look. It is simply not feasible for all the screen sizes to create an exact, perfect environment for images,” writes Bernskiold Media. This doesn’t mean that our website images will look bad, just that they may not look identical to everyone.