If your website or blog contained no images, then it would be a very dull and uninspiring experience for the visitor. The problem is that adding images to your website or a blog post can really tank your SEO score with Google. This blog post will show you how to optimise images for your website.
If the image you add to your website has a large file size (not dimension size), it will take longer to display it to the visitor. And no one wants to wait more than a few seconds for a web page to load. Ideally, you want the images to load almost instantly, as the speed of your website is one of the important factors Google looks at to rank your website.
What is image optimisation and why is it important?
Facebook and Instagram spoil you with their ability to let you upload your pictures straight from your phone, and they appear to have no impact on the performance of your post.
Unfortunately, your website is not so accommodating.
If you download your phone’s pictures or even look at how much of your phone’s memory is being used by your photos, you will see that each image data size is massive. We are talking MB rather than a nice low KB.
The speed of any web page is driven by the size of the content the page has to show. So if you have a page with 3 1.5MB pictures on it, it will be much slower to load than a page with 3 100KB photos on it.
Does this matter?
Well, if your customers are looking at your website on their mobile device and are paying for the data, they won’t appreciate having to download 3x 1.5MB photos. In fact, they might go somewhere else because they can’t be bothered to wait. But they won’t bat an eyelid on 3x 100KB images.
Google also factors your site’s speed into its factors for ranking it in search results, so you really need the images to be as streamlined as possible.
Unfortunately, this means you have to optimise the images you put on your website so that they are the smallest size possible without losing too much quality.
Image optimisation means decreasing file size without losing quality.
You are trying to find the balance of the file size being as low in byte size as possible without the picture appearing grainy, blurry or losing colour.
The goal is to reduce the amount of data a user has to download so the content displays faster, which creates a better experience for your site visitors.
Having to do image optimisation makes creating a quick blog post a little bit more effort than just doing a Facebook post.
However, by creating a blog post, you get the added benefits of it always being available to anyone who visits your website, rather than it being lost in Facebook’s history or algorithm. AND you help boost your relevancy in Google.
How to optimise images for the web.
Once you get into a routine for optimising all your images, it will soon become second nature and won’t seem so onerous. This step-by-step guide will cover everything to optimise your images for your website for better site performance:
- Choose the best image file type for your image.
- Modify and export your image using the most appropriate settings.
- Use the best image dimensions for your website.
- Compress images to reduce file size.
- Make the file name keyword rich.
Note: if you have a photo editor tool, such as Photoshop, you can often combine steps 2, 3 and 4 by using the tools export settings. Although sometimes step 4 is still helpful to complete to make sure the file really is as small as possible.
The video below covers the steps I take to format photographic images for websites. If you prefer to read rather than watch, a summary of the details is below the video.
1. Choose the best image file type for your image.
When you’re done creating images (either saving from your camera or exporting from a tool like Photoshop), you’ll have the option to specify the file type. The most common file types for use on the web are JPEGs and PNGs. GIFs can also be used for animated images.
JPEG images work best for images with many colours, such as photographs. This is because they allow for a higher-quality image with a smaller file size. This file type will probably work for most pictures you want to use on your site.
If your images don’t have lots of colours (like flat illustrations or icons), or you want the image to have a transparent background, you must use PNG.
There are several others, such as JPEG XR and WebP, but all browsers do not universally support them.
2. Modify and export your image using the most appropriate settings.
Depending on how you create your images, you may be able to optimise your images when you create them.
If you use Photoshop, you can alter the ‘Export’ options to reduce the file size.
When using a JPEG image for your website, and you use Photoshop, consider exporting it as “Progressive.” This allows the browser to instantly load a simple version of the image before fully loading the full resolution onto the site. You will find the progressive setting when you export as “Save for Web.”
For PNG files, look for the option to save as PNG-24 (or 8, if there’s no quality loss). Again, you will find this option when you export as “Save for Web.”
I’m assuming that if you use Photoshop, you have a reasonable grip on your export and file size settings, so I won’t cover this in detail.
Other photo editors
If your starting point is a standard photo editor, the options available will vary based on the tool you use. I can’t cover all of the options for every tool here, but I can cover the basics of what you should be looking for.
The following steps are based on the tools on my Mac, but I am sure similar tools exist on Windows machines.
These steps are generally best done on a desktop rather than a mobile device.
- Find the pictures you want to use on your computer. I use my Mac’s ‘Photos’ app to make the first pass on the photos. This is because my Phone automatically imports the photos to this app. I’m sure Windows has its own similar product.
- Do whatever editing, cropping, light settings, etc. you want to do in your computer’s photo tool or apps that you might use.
- Export your photo to your computer’s file system using an appropriate quality and size. This means you are saving the edited photo to somewhere on your computer that you can retrieve it from later. You may need to test out what size image the tool creates. You want the size to be as small as possible without losing quality. Fig 1 shows the same picture being exported from ‘Photos’ using different quality export settings. The image IMG_5199 Max -Full Size is the size just downloaded as if it was from the phone, 5.4MB, whereas if I export it from the Photos tool with High Quality and Full size it is 1.7KB. This file size can be reduced even by reducing the quality further. For this particular image, when previewing the image on my computer I find the Low quality makes the colours a bit blocky, but the medium quality isn’t too bad. So I would be inclined to use the Medium quality version at 631KB. However, 631KB is probably still too large a file to upload to your website.
3. Use the best image dimensions for your website.
Making sure you have the correct image dimensions helps enormously when reducing the file size.
The export option I used above was creating the full-size image. This created an image of 3024×4032 pixels.
A website web page is usually a width of about 1000 pixels for a desktop. Obviously, the mobile version is significantly smaller than this! This means the image created from the export above is much too large (dimension wise) for a web page at 3024 pixels wide. You really don’t want an image greater than 1000 pixels and can often get away with an even smaller size if they are images to add to blog posts.
At this point, if you are using the Photos app, then you can experiment with the Size export option. The size means the dimensions of the file rather than the quality. However, I find that using the default Preview app allows me to control the dimensions much more accurately. By going to the Preview app -Tools→Adjust Size, I can adjust the size to the pixel.
Usually, I create images with a width of about 700 or smaller, unless they will be full-width hero images.
At this point, you can also alter the resolution. For digital and web images, you usually use a resolution of 72 pixels/inch. If the image is going to be printed, you need to make sure the resolution is much higher, at around 300, for the best print quality.
By adjusting the above file to 700 pixels wide, the file size was reduced to 58 KB. This is now an ideal size for uploading to your website.
4. Compress images to reduce file size.
If, after reducing the quality and the dimensions, you still have a file size greater than about 150KB, then you need to use additional tools to compress your image.
There are many online tools that you can use. I have frequently used www.tinyjpg.com with good results. These tools will shrink the size of your file without losing picture quality.
5. Make the file name keyword rich
Once you are happy you have the image you want, change the file’s name to something relevant, unique and ideally with a keyword in it.
You are finally ready to import your picture into WordPress.
Automate image optimisation with a WordPress plugin
At this point, you might be starting to think that image optimisation is a lot of work, and it can be!
I find that processing a group of images together makes the whole process more efficient.
There is also an easy way to streamline a few of these steps by installing an image optimisation plugin on your WordPress site. There are many of these plugins, including WP Smush, TinyPNG, or even your hosting platform may include some plugins to help with this.
However, plugins don’t remove the need for image optimisation best practices to ensure you are using appropriately sized and good quality images.
If you are unsure whether an image optimisation plugin exists on your website, contact your Web designer.