How to Optimise Images for the Web

Introduction

How to optimise images for the web is a practical, step by step guide to fine-tuning your blog posts to keep your readers, and Google happy.

Optimised images on your website are a great way to keep people interested, engaged and coming back for more. But images that are either too big or too small will have the opposite effect. In this article I will be focusing on optimising images for blog posts.

Whenever I handover a website to a customer I also give some advice about how to optimise images for the web. Now I will be giving the advice and sending them the link to this post 🙂

Image size comes in two flavours

So there are two types of image size:

1. The dimensions, usually measured in pixels
2. The file size measured in kilobytes (KB) or megabytes (MB) or dare I say, even  gigabytes (GB).

An image used on your blog post needs to be optimised for both of these criteria.

Why you need to optimise images?

There are 3 main reasons why you need to optimise images for your website or blog:

1. A large image will make your web pages load slowly and annoy people
2. Slow loading websites will be frowned upon by Google god and that will affect your website ranking
3. Images that are too small will be blurry on some screen sizes

When you take a photo with a camera or with a smartphone, the images will usually be large – in both senses – the dimensions and the file size. Just a couple of years ago images taken on smartphones would have been ok to use as is for the web. But as phones have become more sophisticated the images they produce are bigger – which is good. But you need to optimise them for your website or blog.

There is another reason you may need to optimise your images – if you upload 300 dpi large images then these images can be taken off your website and printed by what shall I call them? – thieves – who try and pass the work off as their own. So if you are an artist, craft person or photographer you need to take extra care to follow the guidelines in this article.

Landscape images are better than portrait images

On WordPress posts you should upload a “featured image”. Depending on which theme you use, this image would probably be automatically added at the top of your post. So you will want to fill the screen with the image whether viewed on large or small screens.  A portrait image isn’t going to do this in most occasions.

Also, if you are sharing posts from your website to Facebook, Twitter and the other social media platforms it’s better to use landscape images. Square images will work on the social media platforms too but if you are trying to tick all the boxes then it’s safer to use a landscape picture for the featured image. I will suggest a size later in this article.

What resolution should you use?

This is easy – 72 dpi. A “proper” camera will produce 300 dpi (dots per inch) files, which is what you need for printing purposes. On most cameras you can change the default dpi to 72 if you don’t intend on printing anything. But please remember that you can change a 300 dpi file to 72 dpi but trying the other way will probably produce a file that’s not good enough for printing to professional standards. So to be safe, take the photos at 300 dpi and convert to 72 dpi.

What size image should you use for your featured image?

So to recap, the featured image is usually displayed across the top of your blog post.

Pixels

There are various complicated mathematical formulas used to calculate the pixel size to use for featured images on a blog post that will also display well on social media. I am using 1023px (pixels) wide by 607px high. You do have the option of creating separate images for Facebook and Twitter if you are using the Yoast SEO plugin. If you just want to create a single image make it 1023px (pixels) wide by 607px high and keep any important text away from the edges.

If you are just uploading photos where is doesn’t matter what part of it people see then you can get away with a compressed landscape image that doesn’t precisely meet my 1023px by 607px measurements.

Edit: Feb 2019 – I now use 1200 pixels wide by 607 high for the featured image.

I do have a disclaimer here to add to the pixel size – try the size mentioned above, check it on your website/blog and check it on the social media platforms you are sharing your posts to. If the image is looking ok then you are fine. If not, then the particular theme you are using may have a specific size it recommends that you use – check their documentation and see what they say.

File size

The image file size you should be aiming for is…..as small as possible. I will list a couple of free tools in a moment that will help you with this. But I start getting concerned when the image is 250kb and above.

Now WordPress will do some resizing for you. And so will the internet browsers when people view your website. However, I always advice uploading an image that is as close to optimal as possible. You do need to bear in mind too that you will be unnecessarily using up the space given to you by your web hosting company.

The first thing to do that affects file size is to change it from 300dpi to 72dpi if needed.

What size image should you use for other images in your post?

I don’t need to be too prescriptive here – but again remember to compress the image. I aim for about 200 to 350 pixels wide and something similar in height.

How to optimise images for the web

If you have something like PhotoShop you can use that to optimise your images. If PhotoShop isn’t available then you can use these free tools:

Image dimensions

There is a free tool called Pixlr where you can edit or crop your images to the desired size.

Compress your image for the web

My go-to tool for this in TinyPNG. Don’t worry you can also upload jpgs. There is another site imaginatively called Compress JPEG.

An all in one tool to optimise your images

There is a free tool called Fix Picture that will change your dpi from 300 to 72 dpi and compress the image too. You can use Fix Picture to resize the pixel dimensions too but you are limited to using their presets sizes – they might work for you if you are using images without text overlays. You do have the option of setting the custom width and Fix Picture changes the height of the image proportionally.

So, do you know how to optimise images for the web now? I hope so.

Images used as part of the web design

I thought it appropriate to mention here that images used as part of the website design need to be larger than images used for the featured image on blog posts. This is to accommodate larger screens. So for example, I would used a header image of around 2000 pixels wide on most websites – I am sure this will get larger as time goes by.

How to send your optimised images to your web designer

You will find that some email providers, like Gmail perhaps, will have a limit on the size of the files you can attach to send in an email. The annoying thing about this is that you won’t know that the email and it’s attachments haven’t reached the recipient until you get a harassed call asking again for the files. I recommend another free tool called WeTransfer. You can send files up to the combined size of 2 GB. So if you are sending images to use as your featured image or as part of the design We Transfer does a great job – you even get an email to let you know that the person has downloaded the files.

Conclusion

I hope that you have found this article “How to Optimise Images for the Web” helpful. Once you have resized and compressed your images a few times it will become second nature to you. Contact me for help if you need it. 

I will be creating a video to show you how to use some of these tools – I will add the link here – come back soon for that if you think watching a walk through will help. Or just go to YouTube and search for “How to Optimise Images for the Web”.

If you think that any of your friends would find this article “How to Optimise Images for the Web” useful please save the link and email it to them when you have a moment.