5 Image Optimisation Tips
When clients raise concerns over slow page load speeds, or notifications that they are reaching the storage limit or bandwidth usage for their hosting plan, one of the first things that comes to mind is images. Properly optimised images are vital for any website; unfortunately it’s not a one size fits all solution as image optimisation is as much an art as it is a science.
While optimisation primarily refers to file size and quality there is also optimisation in terms of SEO. These 5 tips are sure to help you get your head around this important aspect of website management:
1. Reduce the file size of your images
Aim to keep images around 70kb – 100kb. This can be difficult if you have images with a lot of detail or want a dimensionally large image for design purposes. Two actions can be taken to reduce the file size.
- Reduce the actual image dimensions. Images straight off the camera can be a few thousand pixels wide; reducing this to under a 1000 will significantly reduce the file size.
- Reduce the image quality to a point where the file size is small but the image still looks good. This can be done using a “save for web” function in image editing software such as Photoshop.
If you don’t have Photoshop or similar you can use a free online tool such as PicMonkey or Pixlr to edit photos. If you only want to compress (remove any irrelevant or redundant data) the image try something like compressor.io/compress.
Example (using the image above)
|Action||Dimension in pixels||File size|
|Original image size||5709 x 3806||6.44MB|
|Compress original with Compressor||5709 x 3806||4.07MB|
|Reduce dimensions by 50%||2855 x 1903||3.51MB|
|Reduce dimensions by 50% + reduce the quality to 80%||2855 x 1903||1.13MB|
|Reduce dimensions by 65%||1000 x 667||0.45MB (or 454kb)|
|Reduce dimension by 65% + reduce quality to 80%||1000 x 667||0.17MB (or 174kb)|
|Reduce dimensions + reduce quality to 75%||800 x 533||0.09MB (or 97kb)|
2. Use the right file type
There are three common image file types: JPEG (.jpg), GIF (.gif) and PNG (.png).
- JPEGs are typically used for product and landing page images and can be compressed considerably which allows for a small file size but good picture quality.
- GIFs are suited to basic images with little detail and few colours, e.g. icons or logos.
- PNGs are similar to GIFs but support more colours and can be a much larger file size; PNGs are often used for banners.
3. Use an extension to compress image size
If you have a large catalogue, are time poor or have minimal control over your images, consider automating image file optimisation. You could install a plugin or extension to do this and there are a number of commercial options available:
4. Name your files intelligently
It can be easy to keep the default file name assigned by the camera, but renaming your images will have SEO benefits. Google will have a hard time working out what the image is when it’s named DMC12345.jpg, but if it’s named bigbrand-purple-coffee-mug.jpg, Google will have a better idea of what the image and associated content is about.
Proper image names will also help you in organising and managing your catalogue.
Rename images using the product name and/or keywords but be careful to not keywords stuff. A convention you may want to use is brandname-product-name-sku.jpg.
5. Populate alt tags
Alt tags, like file names, help with SEO so it’s highly recommended that you populate this field. Use words that clearly describe the image; use keywords and model numbers. Keep in mind that the alt tag will often display if the image hasn’t loaded for some reason so it should make sense to a person reading it. Some platforms, such as WordPress, have an alt tag field when adding images to the gallery. Magento has a field named “label”.
For other platforms, you may need to consult the documentation or manually edit the html. The alt tag looks like this: alt=”Big Brand coffee mug in purple“.