Picture sizes for your website or blog

Get the size right to avoid slow load times and annoyed visitors

Websites get broken most easily by uploading pics that are the wrong size

WordPress is a dream, you can create and produce a website for a client and hand it over for them to run themselves. All the wonderful features in the CMS allow total control for the client. Well, kind of.

High res, low res, dots per inch and aspect ratio

Changing or adding a picture in WordPress is as simple as dropping the pic into the image library and telling it where you want it on the page. If you have your picture the right size for the web before you load it up that is. A picture can be anything from a tiny pixellated thumbnail image to one that is 100mb in size and is capable of being printed as a billboard poster. Now we haven’t seen anyone upload one that size (the limit in wordpress is about 64mb anyway), but we have seen images of 7 to 10mb uploaded and placed where the image should only be around 500kb.

It still looks OK, but visitors to your website have to download that amount of data each time, if you load several images at that size and you visitor is on a slow connection or mobile data than it can be really slow. Chances are they’ll go elsewhere and not come back.

To explain this picture size thing we have to get a little bit technical…

Confusingly there are three aspects to size when we talk of digital images, the width and height in pixels, resolution expressed in dots per inch, and then there is the size of the file expressed in kilobytes or megabytes.

Resolution

The higher the resolution then the more definition there is in the picture – equate this with HD TV sets and how much clearer the picture is with more definition and detail.

The correct resolution of an image for the web is 72dpi, a picture at that resolution at it’s actual size or reduced will look nice and sharp. Enlarge it however and you will start to see the individual pixels that make the picture up. This is what we mean when we say an image is ‘pixellated’.

If an image is destined to be printed in a brochure or book for example it would need to  be 300dpi at least, which leads to a bigger file size. So remember that pictures to be used on a website must always be 72dpi.

 

Width and Height

Then there is the width and height in pixels. For this you need to think of the maximum size the image will be on any page. the eye above is 1600 pixels wide as that is about as wide as it will get on a desktop computer. reducing the browser window or view it on a phone and WordPress reduces it to fit for you.

File Size

This is a product of the image width and height and the resolution.

How do you change the size then?

This is where it gets tricky, if you use Photoshop it’s a breeze. However it is an expensive option if all you are doing is changing the size of the odd pic for your site.

Windows users can do it in Microsoft Paint, this guide shows you how.

Mac users can crop, resize and do basic image editing in Preview, this guide explains how to do it.

 

OR you can just get your designer to do it for you.