How to improve your website - 1 Optimising your images
Our first article on how to improve your website is regarding optimising your images.
Size Matters
As with all things (so they say), “size matters” and the size of the images you use on your website (both file size and dimensions) is no exception.
To get the most benefit from optimising your images it’s important to follow some guidelines otherwise they can severely impact the quality of your website. The main goal of this guide is to try and make your images file sizes as small as possible, we will also go over a few good SEO tips as well. Following these guidelines will enhance the quality of your website and it’s SEO ratings dramatically.
Here is how to get the most from your images in order of importance.
Image Format
Using the correct format of file is important because different file formats save at different file sizes. The two most common formats used are png or jpeg/jpg and comparing them, jpeg/jpg saves smaller than a png. Here is an example, they are both the same image just different formats:
As you can see, the png image is much larger which will take longer for a website visitor to download. In general, the only time you will need to use a png format is if you need your image to have a transparent background.
To change the format of an image you can use programs like Microsoft Paint or a website such as http://png2jpg.com/
Image Resolution
Using the correct size of images for where you want to display it is another important point to consider for two key reasons:
- Using the correct size image will reduce the size of the image significantly, for example: Using a 1920×1080 pixel image for an area the size of 600×600. The 1920×1080 image will have a far greater file size.
- Using the wrong size image will mean the user’s browser will need to scale it to the correct size dynamically, this takes some time to do depending on the power of the user’s device. This issue affects the mobile/tablet users the most.
One of the easiest methods to change the resolution of an image is Microsoft Paint or you can use a website such as http://www.picresize.com/
Compressing Your Images
Once you have your image the correct size and format the next thing you need to do with optimising your images is to compress it. Here are some tools for compressing both jpeg and png.
http://optimizilla.com/
Compressing your image directly reduces the file size and in most cases, with the standard settings, you will not notice a difference in the quality of the image. It’s important to get the images as small as possible and all the above websites will allow you to compress the image further. When you click on one, it will allow you to change the compression percentage for even further savings.
It’s a good rule of thumb to compress all your images no matter how small they are in the first place. Smaller is always better and less for your user to download.
Wow! Look at the size of that thing!
A few weeks ago we came across a website (not a website that we have any involvement with) where the home page of the website was 264 MEGABYTES in size. It has so many images on the page and none of them were optimised.
When you think of someone using their mobile data plan trying to view this page, that’s a large chunk of their plan gone. If that person only has 500MB of monthly download, that’s half their allowance with one page!
SEO
Now you have your images as small as possible, the next area to look at would be getting some SEO benefit from them. When Google looks at your website, all Google will see regarding your images is the filename. If your image filename is something like this:
00001475.jpeg
it will mean nothing to Google and give you no SEO benefit. Naming all images with something appropriate will mean they will show in Google’s image results and boost the website’s SEO ranking.
Another important SEO tip is to add an alt tag (also known as the alternative tag) to your image. If your image doesn’t display, this text will be displayed in its place. Search engines look for this and it makes it clearer what the image is about. To add an alt tag in WordPress, view the image in the media library and add it in the appropriate box before adding it to a page.
Need to know more?
We can help make this easier by helping you with optimising your images for your website. If you’re a customer with one of our new All-In-One packages there are additional features we can add to your website to help you with optimising your images or we can add new content to your website for you. If we can help you with your website then please contact us via our website, email or give us a call.
OUR PORTFOLIO
