Image Sizing

Getting images the right size for your blog and why it matters

Arthur’s Guide to

Too big?

Typical of a dog to steal the show…

Too small

Or Just Right

Size matters! Why?• It is important to get images the correct size

on your website/blog. Why?– Over-large images will take an age to load– Slow loading-pages are a rapid turn-away for

visitors and not appreciated by search engines either!

– The ‘wrong’ image size can mess up galleries and sliders on your blog

– They also block up your site hosting with unnecessary large files

But I can drag my image smaller

If you click on an image on your blog page or post you will often see a frame appear round the image. By dragging with the cursor on this frame you can make the image larger or smaller.Don’t.

- It is not a sure-fire way of resizing the image- The large image will still need to load in the browser

before it ‘resizes’ itself so you are still wasting loading time and server space!

But WordPress offers size options?

Yes, when you load your image in WordPress it will ask you want size you want to display the image on the page/post.

That’s fine. The thing to remember is:

Only make your images the maximum size you are likely to need them on the site

(Hint: and that’s probably smaller than you think!)

So how do I know what size?• If you use the Firefox browser there is an

Add-on called Grab. – In Firefox go to Tools / Add-ons– Search for Grab– This is a screen capture tool but you can also use it

to estimate the size your image needs to be.

Grab Add-on shows you the size of the box you pull out with the mouse on screen.

More sizing tools

• If you are using the Chrome browser try the add-ons: ruul. Screen Ruler or Page Ruler

• If you are using Internet Explorer search in help for a ruler – in certain versions of IE there is a ruler built in.

• If none of these work, test an image or download one from your site that is the right size and then keep a note of the ideal size range for your site.

Sample image sizesHere is a section from my website. The image on the left is 600 pixels wide by 370 pixels high. The cat picture on the right is 310 pixels wide by 200 pixels high. (See the original page here: http://rosemariegant.com/keep-your-clients-save-contact-forms/)

Two types of size

When we talk about the size of an image, there is the physical size of it (dimensions) and the file size. You need to think about both.

35kb / 4MB345 pixels wide

by 234 pixels high

Small picture/big file size??

You may find that you make a picture quite small and yet the file size is still big. Why is this?

It’s to do with DPI – dots per inch – an old fashioned term more associated with printing. But basically it is the resolution of an image.

Resolution

• You need good resolution for printing – say at least 250 dpi and probably 300 dpi minimum.

• You need lower resolution if you are just viewing the image on screen, e.g. on a website, e.g. 72 dpi – 150 dpi.

Where do I change this on my image?

You might see resolution on your image editor or you might not. You certainly will in Photoshop for example.

But you might just have “save for web” or you might be able to choose the quality for a jpg image. That is all to do with the resolution of the image.

Some numbersLet’s look at one of the images from my website that we looked at earlier.Original image dimensions: 3264 x 1836 pixelsOriginal image file size:2.1MBImage dimensions on website: 310 x 200 pixelsFile size on website: 23kb

So the original image is much bigger not only in dimensions but in file size, because it is a file that could be printed.So hopefully you can see from that how quickly you could s…l…o…w… down your website loading!

To sum up• Check what size (dimensions) you need your image

before your load it to your blog or website

• Aim for a small file size with the best quality picture

• If you are buying or downloading files from an online stock photo shop check the dpi – you will need 300 dpi if you want to print the image but only 72 dpi if it’s just going on the web

• Don’t resize over-large images on your website – take them off and resize them in an image editor

More content like this?

Head over to http://www.rosemariegant.com

For lots more tips and hints on Wordpress, email newsletters and social media.

Thanks for reading!