A picture is worth a thousand words, but how do you make sure that these are positive words when it comes to images on your website? Sometimes you find an image that you think would be perfect for your site: it matches your branding, it follows the theme of your existing images and it’s just downright stunning to behold. Then you add it to the site and it appears that something has gone horribly wrong. The image is stretched or otherwise distorted, or it’s so zoomed in that you can only see one tiny aspect of the picture.

So what happened? There are a number of issues that can occur when adding images to your site. Below is a cheat sheet that describes common sources of image errors and how to correct them.

Size

An image that is too small for the space will be stretched to fit, making it appear distorted. On the other hand, if you try to use an image that is too large, you will only be able to see a small, close-up portion of the larger image. Make sure that your image is sized correctly for its corresponding space. If you’re not sure of the proper dimensions ask your web developer.

Orientation

If the space on your page is landscape (wider than it is tall), use a landscape image. If it’s portrait (taller than it is wide), use a portrait image. Trying to use these interchangeably is like trying to put a round peg in a square hole – you can make it fit, but it won’t look right.

Shape

Not only do you have to consider the orientation of your space, you also have to take the shape of the space into account. If your space is 750 pixels (wide) x 200 pixels (tall) and you are using an image that is 750 pixels X 400 pixels, half of the photo will be cropped out. This is fine if you can still capture the focal point of the image, but for some images this just won’t do. Remember to keep the shape of your space in mind when choosing an image.