How To Make Sure Your Ecommerce Website Images Are Perfectly Optimized
In the world of ecommerce, images can make or break your business. Potential customers cannot see your products like in a physical store, and images help to establish confidence and trust in your brand, through accurately communicating what they are actually buying.
Check out the best practices below which will help you make sure your website images are perfectly optimized.
An Overview Of File Types: PNG, JPEG, GIFs
First of all, it is a good idea to delve into the various file types and their traits. Each type has its own strengths and weaknesses, hinging around one main trade off: size versus quality.
A high-quality image will be displayed better, but if the file is too large, site speed and user experience could suffer.
Here is a breakdown of the file types:
- PNG - Portable Network Graphics. This type of file favors the quality of an image over any size considerations. It is based on a lossless algorithm, which means that the image does not lose any of its information when resized.
- JPEG/JPG - Joint Photographic Experts Group. This file type uses an algorithm that favours reducing the file size, by losing some of the image information. This algorithm is called a lossy compression algorithm.
- GIF - Graphic Interchange Format. A GIF is a compressed version of video. There are only 256 colors in this format, as opposed to a high-quality video which contains millions of colors.
|Main Benefits||Highest image quality||File can be resized while adjusting quality||Animation without the huge file size of a video|
|When Would You Use It?||In cases where quality is more important than size||In cases where size is more important than quality||When you wish to use animation|
|Examples||Photography websites, graphic designer portfolios||Product Pages, Website images||Animation|
For ecommerce websites, JPEG is the best choice. It provides the optimal balance between image quality and file size, while placing a priority on compression. Ecommerce sites need speed much more than they need high-quality images, as user experience trumps the visibility of an image’s finest details by far.
Image Size vs File Size
These commonly confused terms and wrong usage of them can be responsible for slow loading websites.
- Image Size - These are image dimensions, as they are viewed.
- File Size - The space needed to store an image on a server.
A large image does not necessarily take much space on a server, and this is why this distinction is so important.
The one factor that can slow down your ecommerce site is file size.
A rule of thumb is to stick to 1-2 MB, and to keep images as small as possible for a fast-performing website.
Here are some tools you can use to resize images:
Do Not Forget To Name Your Images And Use Alt Tags
Search engines cannot understand your images like humans do, and therefore they need a text description in order to understand what it is about. For this reason, naming each and every image on your website is crucial for SEO. Here are some top tips:
In addition to naming your images, you need to add alt tags. These are descriptions of your images which exist in your website’s code. The most important thing to remember is that when your images do not load, your visitors will see the alt text.
Here are some tips for image naming and alt texts:
Keep the description short and to the point
Use keywords wherever you can
You can use plugins such as Media File Renamer to name images and add alt texts in bulk
[H2] Use Sitemaps
A sitemap is used to tell Google about how your content is organized, and is vital for SEO. With this map, search engines will be able to crawl your website easily, and index the information in an optimal way.
Images should be included in your sitemap, with the following information:
This is how you get your images noticed by search engines. If you use WordPress, Yoast SEO can help to create your XML sitemap. All Saas solutions such as Shopify or BigCommerce create sitemaps automatically which include all your images.
Optimize Your Thumbnails
Thumbnails are a mini-version of an image, which gives users a preview of the full image. A classic way to use these is in ecommerce is for upsells. For example, in many websites, there is a section of thumbnails that offer additional or complementary products. When optimized, these thumbnails can catch the customers’ attention and push them to create another purchase.
Here are some top tips:
- Keep thumbnails small, less than 70 KB
- JPEG or GIF files are the best choice
- Make sure the placement and alignment are visually appealing
Use A CDN
Most hosting packages today offer access to a CDN, and all website builders provide extensions and add-ons offering this service through their respective app stores. CDN, which stands for Content Delivery Network, can cut down file size up to 80% by serving images from a server which is closest to the user, therefore cutting down load time. In addition, a CDN caches images and optimizes them, in order to deliver the image quickly the next time the device requests the information.
When it comes to image optimization, there are many elements to pay attention to. From choosing the right file types, to choosing the right hosting package and CDN - there is a full spectrum of considerations to take into account.
In 2020, there is no ecommerce site builder that does not optimize images for mobile, so be sure to always check that images are displayed correctly on mobile and tablet, as well as carrying out A/B testing to see how your images are actually performing in real time across all devices.
If you follow the tips above and monitor your image delivery and website performance, your ecommerce site’s images will be optimized at all times.