Image Optimisation & Page Speed (article)

Susana Moleón
Susana Moleón
  • Updated

What can you and your Marketing team do to boost your page speed? 
Keep your pages light - the fewer images/plugins/videos/resources you have on your pages, the faster they will load. 

Another important ingredient to a fast & well-indexed website is making sure that the images you upload are named & sized correctly

Image optimisation is highly important on the web. The smaller your images, the faster your pages will load, the more customers you will keep on your website. If they're on mobile, you'll also use up a lot less of their data allowance, especially important when travelling abroad.

Conversely, the bigger the image file size, the slower your pages will load, the more customers you will aggravate and lose. 

Four parameters to look at: 

File Dimensions: 1,500px by 1,000px make sure your images aren't bigger than this.

File Resolution: 72 ppi / dpi (is appropriate for web) 300 ppi is used for printed material (ppi = pixels per inch, aka dpi = dots per inch) 

File Type: JPG (.jpg) - use this for photos (most common file type), PNG (.png) - use this for transparent backgrounds, GIF (.gif) - use this for logos

File Size: A good rule of thumb is to keep your images under 500 KB (0.5 MB). Anything more than this is probably too big.

 

E.g.

Image that is way too big for online use, it should absolutely be resized. 18.1 MB = 18,100 KB:

1.png

2.png

How to resize images

One way you can reduce image file size is by using the "Save for Web" command in Adobe Photoshop. When using this command, you want to adjust the image to the lowest file size possible while keeping an eye out for image quality.

First make sure the resolution is 72 ppi.

Image > Image Size > Resolution. Adjust this to 72 ppi if not already. 

3.png

Then move onto "save for web" command in Photoshop. File > Export > Save for Web

4.png

  • Quality: Find this in the top, right-hand corner (i.e. 70).
  • File format: Find this in the top, right-hand corner (i.e. JPEG).
  • Optimization: Find this checkbox in the top, right-hand corner (i.e. Optimized).
  • Color: Find this checkbox in the top, right-hand corner (i.e. Convert to sRBG).
  • Downsizing and sharpening: Find this in the bottom, right-hand corner (i.e. W: and H:).
  • Expected file size: Find this in the bottom, left-hand corner (i.e. 136.7K).

You can see in this example, we've reduced the file size from 18.1 MB to 349 KB (a massive 98% reduction in file size!)

5.png

How to optimise images without Photoshop

If you don't have Adobe Photoshop, there are numerous online tools you can use for image editing. Adobe even has a free image editing application for smartphones and tablets, Photoshop Express. This tool doesn't have all of the capabilities of the desktop version of Adobe Photoshop, but it covers all the basics of image editing and doesn't cost an arm and a leg.

Other impressive online image editing tools are:

  • PicMonkey has been described by experts as a "staggeringly great photo editing tool".
  • PIXLR is super user-friendly and comes with a 100% free app for your smartphone, so you can edit on the go.
  • Canva is another fairly advanced online image editor.

Finally, there is always GIMP. GIMP is an open-source, free image editing software application that can be run on Windows, Mac or Linux. It can do a lot that Photoshop can do, but tends to be a bit clunkier. For a free image editing application, it's an excellent choice. 

 

Further Reading

 SEO https://support.tourcms.com/hc/en-us/articles/13260505558033-SEO

https://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips