5 Image Optimisation Tips
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“.