Using the Right Photo Sizes

Photos are great and can really enhance your content. Adding images to your content can be pretty straight forward, but making sure the photo your are using is the right "size" is important.

Photo Sizes — Pixel Dimentions

When we talk about the size of a photo we need to consider multiple things. The first is the actual dimensions of the photo. Generally is is best practise to upload an image at the same size you want the image displayed on the screen. For example, if you’s like to have a small (say 200 pixels by 200 pixels) square photo floating on the right side of your copy, the best practise would be to crop your photo to 200x200 and then upload that photo to be used.

Doing it the wrong way

I know we are supposed to be teaching you the right way (or best practice), but I thought it would be helpful to review the (typical) wrong way that is often used…

What people will often do is take a full sized image (maybe right from their camera or phone) and upload that photo to the website. They then add that photo to their content and shrink it using the height and width numeric values or the tools in the WYSIWYG editor.

What happens here is that the person viewing your website is viewing a version of your image that is just resized by the browser software on the fly. This is often a blurry, lower quality version of the beautiful photo you uploaded.

The second thing that is happening is that the person is downloading the full-sized image even though it is being displayed small. I know — that sounds like what I just said, but there is another facet here we need to think about — file size.

Photo Sizes — File Size

Getting the right dimensions of your photo is important, but also making sure that the file that your visitor will need to download is not too large is also very important.

Let’s consider the example above…If you were to upload a photo directly from your iPhone, the file size would be about 5 megabytes (that’s about 5000 kilobytes). If you were to resize that image to reasonable dimensions (say 400x300 pixels) the file size should be around 50 kilobytes. I’m not a mathalete, but that is way smaller (196.0396% smaller) that the original.

Why this matters

Having an appropriately sized file is a key factor in the performance of your web page. Downloading a 5 megabyte photo could take 45 seconds to a minute — possibly even longer on a phone. People are not patient when it comes to waiting for a web page to download — they just leave!

Some examples of reasonably sized photos

For reference, the above combined image is 700x840 pixels and ~77 kilobytes (kb)