It is really important to add regular, fresh content to your website. This can be in the form of new client reviews or testimonials, blogs, new products or services, city / geo pages, meet the team pages, and so on. Google and the other search engines – and people – really like images and videos!
Wherever possible, it is better to use “real” images rather than stock images – as these are more authentic and interesting. So, it’s a really good idea to try to remember to take photos of all jobs you do. Before and after photos can work particularly well. Sometimes, you may need to use stock images – in a future article, we will give you a list of the stock image websites (free and paid) we particularly like.
When you use images on your website, it is very important to ensure they are properly optimised – before uploading them onto the website.
What is image optimisation?
Image optimisation is about reducing the file size of your images as much as possible, without sacrificing quality, so your page load times remain low. It’s also about image SEO. That is, getting your product images and decorative images to rank on Google and other image search engines.
In this article, we will cover image size and type and image naming. Our next article will cover image optimisation on your website itself.
What image type should I use?
There are two main image formats that we work with.
The first is a .png and allows for transparency and doesn’t compress. This would be for smaller images in which quality is of the utmost importance and would primarily be used for logos or icons.
The second and most commonly used images we use are .jpgs. These files allow for a greater level of control when it comes to compression. Any pictures or graphics should be jpgs, especially if they are large.
Checking what file type you are using is the first thing that should be done. To clarify
- Pngs: small icons or graphics and logos
- Jpgs: anything else
Taking this one step further would be the use of .webp images. These file types are smaller and more efficient than even .jpgs and if your web server is capable then it would always be advisable to use these. Your web developer can advise on this.
Sizing images
When referring to the size of an image it means two things, its physical size in pixels and its file size.
It’s important to distinguish between them. Far too often there is confusion between the two, so when asking if the image is correctly sized, we need to be clear about what is meant.
When talking about the size on the hard disk we would say “filesize” and when we are referring to the size on the screen and its pixel dimensions we would say “size”.
Image size
We must ensure the image fits the spot it’s going to live in. We can’t just upload a full HD image for a section that only displays on a partial section of the screen. We need to make a note of the space the image will be added to and get the width and height that is needed for the image to be uploaded. We then resize the image to match those dimensions. To prevent issues with content shifting while the page is loading, we would also want to specify those dimensions within the image tag itself.
The same should be done for mobile optimised sections as well and always make sure different images that are properly sized are used for mobile.
Image filesize
Pngs won’t be compressed, so their filesize will always be larger than other files, but it’s the best file type that deals with transparencies. Just keep these images small to keep their filesize down and don’t overuse them.
As for jpgs, you want to ensure they are compressed suitably. The next step outlines file compression in more detail.
Compressing images
Uncompressed images are often the largest files in a work environment. They have a massive range and can support super-high resolutions and are often the format of choice for professional photographers, so it’s important to make sure they are sized and compressed correctly.
When setting the size of your image you can export your file to be compressed automatically with tools like Photoshop or Fireworks, if you have these. Other sites that are nice and easy to use include:
If you need to convert files to a different type, you can use sites like:
Make sure the image is as small as possible without compromising too much on quality. For background images and images with overlays, you can get away with a greater level of compression. A webpage with its combined assets should be no greater than 2MB (on the larger end), so keep that in mind when compressing your images. A usually safe range falls between the 70% and 80% mark for jpegs but always check before use.
When your page is done, you can use https://tools.pingdom.com to do a quick size check. It will report the page size and you can see in greater detail each of the assets on the page and their sizes etc. If you have compressed your image/s, you should be fine.
Naming your images
When we take photos and upload them onto our computer, they are very often named “IMG12345.jpg” or similar! This doesn’t mean anything to Google or people.
It is very important to give the image a meaningful, user-friendly filename before you upload it to your website. If your article is about a bathroom installation in Plymouth, you could call the image bathroom-installation-plymouth.jpg. Use hyphens to separate the words and don’t use any special characters.
In summary
- Remember to take as many images as you can of your work! They don’t need to be of a professional quality for blogs.
- Always use images to add interest – try to use real images rather than stock images whenever possible.
- Give your images a user-friendly filename – before uploading them to your website.
- Size your images to fit the space they will be used in on your website.
- Compress your images as far as possible using one of the websites listed above so they don’t slow your website down too much.