When it comes to uploading images to your website or e-commerce store there are some important things to consider and make sure you do. This is called Image Optimization.
Image Optimization is about Image SEO and ensuring your image is recognized and ranked by Google and other search engines. It also includes making sure images have quick site load time, by reducing the file size as much as possible without sacrificing image quality.
Image Optimization is about Image SEO and ensuring your image is recognized and ranked by Google and other search engines. It also includes making sure images have quick site load time, by reducing the file size as much as possible without sacrificing image quality.
5 Steps to Optimize your Images:
- Name your images descriptively and in plain language.
We know it way easier to simply upload your product images using the default file names assigned by your camera but it is VERY important to rename these images using simple words to describe what they’re showing. When it comes to image SEO, it’s important to use the relevant keywords to help your web page rank on search engines. Creating descriptive, keyword-rich file names is crucial for image optimization. Search engines not only crawl the text on your webpage, they also crawl the image file names. - Optimize your alt attributes carefully.
Alt Attributes are the text alternative to images when a browser can’t properly render them. You see this when you hover over images and see the alt attribute text (depending on your web browser settings) The alt attribute also adds SEO value to your website. Therefore adding the appropriate alt attributes adds SEO value to your website. By doing this it can help you rank better in search results making it a great way for your products/website images to show up in Google images and web search. So make it a priority to add your alt attribute to every image/product image on your site. The key is to add descriptions to your base alt attribute so that potential searches land on your website. If you do the extra work, Google will reward with searches!
Here are some rules for alt attributes:
– Describe your images in plain English, just like you did for the image file names.
– If you sell products that have serial numbers or model numbers, use them as your alt attributes.
– Don’t stuff your alt attribute full of keywords
– Don’t use alt attributes for decorative images. Search engines may penalize you for over optimization. - Choose your image dimensions and product angles wisely.
It’s good practice to include more than one image of a product you are selling. Having multiple images allows your customer to have an even better impression of what they are purchasing. To ensure great visual exposure of the products, take several shots from different angles, sides, above, below, and interior. Make sure to fill out your alt attributes and do that by creating unique alt attributes for each product shot. - Reduce the file size of your images.
Uploading large, beautiful full-page images on your website sounds like a nice idea but word of caution this can increase loading time enormously. What not to do, don’t place the largest image on your webpage and simply shrink the dimension via source code. This will increase your page load time because of the larger size associated with the image. Instead, make a smaller image and provide the option to view a larger image in a pop-up or on a separate webpage.Things to consider:
– Nearly 50% of consumers won’t even wait 3 seconds for an eCommerce site to load.
– Google uses page load time as a ranking factor in the algorithm.
What to do:
Decrease the size of the image files on your webpage and increase page load speed, fewer people who visit your site will click away. One way to 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.
How to optimize images without Photoshop. There are numerous online tools you can use for image editing. One that we like is PIXLR. It’s super user-friendly and comes with a 100% free app for your smartphone, so you can edit on the go.
– A good rule of thumb for ecom product shots is to keep your image file size below 70kb.
- Choose the right file type.
There are 3 common file types that are used to post images to the web: JPEG, GIF, PNG
JPEG or jpg images are the de facto standard image of the Internet. JPEG images can be compressed considerably, which results in quality images with small file sizes. In the image above, the JPEG format allows decent quality at a low file size.
GIF (.gif) images are lower quality than JPEG images and are used for more simplistic images, such as icons and decorative images. GIFs also support animation, as I’m sure you know 🙂
When it comes to image optimization, GIFs are great for simple, plain images on a webpage that include very few colours. GIFs are not great for complex, large images with many colours.
PNG images are becoming more popular as an alternative to GIFs. PNGs support many more colors than GIFs and they don’t degrade over time with re-saves like JPEGs do. Even though the PNG file type is starting to be used more often, the file sizes can still be much larger than JPEG images. Check out this example below and you will see the difference between all three file types where the file size is the same, 24 kb.JPEG is the clear winner here. GIFs and PNGs degrade in quality in order to remain at the same low file size.
Here are some tips to remember when choosing file types:
- In most cases in e-commerce, JPEGs will be your best bet. They provide the best quality for the smallest file size.
- Never use GIFs for large product images. The file size will be very large and there is no good way to reduce it. Use GIFs for thumbnails and decorative images only.
- PNGs can be a good alternative to both JPEGs and GIFS. If you are only able to get product photos in PNG format, try using PNG-8 over PNG-24. PNGs excel as simple decorative images because of their extremely small file size.
