How to optimise images for your Online Store
Often considered to be one of the most overlooked areas for driving search traffic and sales conversions are your website images. Optimising your images assists in getting your ecommerce products to show up in Google image and web search.
“90% of information transmitted to the brain is visual, and visuals are processed 60,000 times faster in the brain than text.” Source 3M Corporation and Zabisco
Use your own images
When running an online store with many products, it’s tempting to cut corners and save some time by utilising online product photos or images from a supplier.
However, to ensure that you don’t run into any problems with regards to ownership of the images, you’ll either need to get written permission to use the images or better still use photos you’ve taken yourself.
Or you could use a professional photographer — be sure to get written confirmation that the image rights have been signed over to you.
Create variety of images of product
Online buyers aren’t able to pick up and look at your products. Create a variety of images showing your product in different colours, different dimensions and from different angles etc
Choose high quality images
Images evoke emotion. Select high quality images that best represent your brand and product to give a feeling of professionalism and trust.
Choosing a file format
There are three (3) main file formats used for saving images for the web. These are JPEG, PNG and SVG.
- JPEG (JPG) reduces the file size by up 15% more without losing quality.
- PNG files allow transparent backgrounds but have larger file sizes than JPEG. Mostly used for logos, but also handy if you want to overlay or group images.
- SVG (Scalable Vector Graphics) can be scaled to any dimension without affecting the page load speed and appearance of your images.
Most images saved for the web are in JPEG format.
Keep your image file sizes small
In 2010, Google started using page load time as a signal in their web search ranking algorithm.
Most people will wait about 3 seconds for a website to load on a desktop or laptop and about 5 seconds on mobile.
Keeping your image file sizes small will help reduce the amount of time your web page takes to load.
Amazon calculated that a page load slowdown of just one second could cost it $1.6 billion in sales each year. Source: Fast Company
Resize images BEFORE uploading to the web
The larger the file size of an image, the longer it will take to download and the slower your website will take to load.
Don’t upload large images to your website then resizing them using content manager programs, as the file will still be large and slow to load.
Resize your images by using Adobe Photoshop ‘Save for Web’ , PhotoFiltre or your Graphics program before uploading to your website. The graphics will be sharper and smaller in size and your website will be faster to load for visitors.
The ideal size for the main product image in FatGalah’s shopping cart program, is 800x800px with a file size of around 30–40KB. Our software will then create a Thumbnail 200x200px with a file size of around 9KB.
Use of Thumbnails
Thumbnails are reduced sized versions of images used to make it easier and faster to display a group of products without slowing down the website’s load speed. Provide the option for the visitor to view the larger image in a pop-up.
Monitor Page Load Speed
Even when you create small file size images, you’ll still need to keep an eye on your web page load speed as the overall number of thumbnails will effect how quickly your website loads. Remember, to keep under 3 seconds for desktop or laptop and under 5 seconds for mobile devices.
Test your website page speed using Google’s Page Speed Insights.
Create image file names that are SEO friendly
Search engines not only crawl text on your website they also search for keywords within your image file names. The filename can assist Google discover clues to the subject matter of the image.
Create descriptive, keyword-rich file names to optimise your images. For example, ooriginal-thongs-cloud-white.jpg rather than IMG0101.jpg
Create Alt Tags
‘Alt’ Tags are a text alternative for an image on your webpage that can be read by screen readers and the vision impaired as an alternative to the image itself.
- Describe your image using clear descriptive wording.
- If your product image has a product code or specific name, include that in your Alt tag.
- Don’t ‘keyword stuff’ your Alt tag eg alt=”best deals on thongs flip flops buy now online”. This may be perceived as spam and will create a negative experience for your visitor.
Matt Cutts (from Google) discusses the alt attribute
Protect your images
Unfortunately, images are sometimes copied and used outside of our websites without our permission and there’s not a lot we can do to stop this. But there are some things you can do to optimise and benefit from this.
- One way of protecting your images is to watermark or brand them with a logo or text.
- Add Social Share buttons to your pages so that people can share to Facebook, Twitter, Pinterest etc
Google provides some hints on how to best protect your images https://support.google.com/webmasters/answer/114016?hl=en
Add a Image Sitemap
Anything that helps Google discover information about your website is a good thing. Adding an Image Sitemap may increase the likelihood that your images will be found in Image Search results. Google Search Console has some helpful tips on how to implement this https://support.google.com/webmasters/answer/178636?hl=en
Optimising your images using the tips above will go a long way towards getting your ecommerce products to show up in Google image and web search.
For more great tips visit FatGalah.com/blog