If you run an online store, image optimization is an art that you want to master. From attracting shoppers perusing Google images to reducing site load time – image optimization can be an important part of building a successful ecommerce website. As any store owner knows, photos are a crucial part of every product page. On their own, product photos can convince a shopper to take the next step in the buying process — offer beautifully shot, highly detailed photos of your products, and you’re that much closer to getting a click of that “add to cart” button.
Supplying your shoppers with all these photos can come at a price, however. With each large photo or media file you add to your product page, the load time increases. And your shoppers, no matter how interested they are, aren’t willing to wait around for more than a few seconds. The challenge for store owners is – finding a way to supply shoppers with the high-resolution photos they desire while keeping product pages loading quickly.
There are a few reasons why having fast-loading product photos is just as important as having attractive ones. The one that most store owners think of first involves search engines. It is true that faster sites will perform better in search rankings, all other things considered equal. But SEO isn’t the only reason why speed is so important. Google only made speed a ranking factor in the first place because of the user experience. Shoppers don’t want to wait. They don’t want to wait for shipments, they don’t want to wait for answers, and they certainly don’t want to wait for your store to load.
So if you offer a potential customer a slow, laggy product page – well, what does that say about the way the rest of their experience with you might go? Nobody likes to wait around. Especially not your potential customers. So while large image file sizes can cause slowly-loading pages that hamper your SEO rankings. These can also irritate your shoppers. And that’s why it’s so important to strike that balance. Ecommerce product photography must convey an item’s value and functionality while inspiring shoppers to buy. Whenever possible, product images should also be lean and fast loading. The challenge, then, is to produce large, attractive images at relatively small file sizes.
So it goes without saying that your images need to be hi-resolution and crisp. But, this comes at a price. Large, high definition images can have huge file sizes. Not only will this cause visitors to bounce, but in time, Google will notice as well, and this can affect your SEO. In ecommerce, it’s critical to find a good balance between image quality and image file size when you save an image for your site. Here are the 6 steps to optimize images on your ecommerce site:
Working With Image File Types
There are three main file types we’ll want to focus on for saving images optimized for the web: GIF, JPG and PNG. Each file type has its own strengths and weaknesses and it is very important to know and keep these in mind when saving an image.
JPGs, which are also known as JPEGs are the most popular file type for images on the web. These images are perfect for photographs, or complex images containing lots of colors, shadows, gradients, or complex patterns. JPGs handle these type of images well because they have a huge color pallet to work with. These images can also be saved in in high quality, low quality or anywhere in between.These are the most popular file format online and is commonly used for product images, photographs, and homepage hero banners/images.
PNGs are another popular file format online. While the image size is smaller, this won’t be a good option for complex images and photographs. PNG-24 provides a much higher quality image but comes at the cost of a larger file size. Most importantly, PNGs can handle transparency. This is one of the biggest differentiation points between PNGs and JPEG’s. This works well for logos because they always require transparency.
GIFs were more popular many years ago, but are still an option for small image sizes where only a few colors are needed. Much like PNG-8, GIF files are restricted to only 256 colors. Because of this, GIFs should never be used for product photos. GIFs can be used for logos but because of their limited colors, aren’t that popular for most use cases for ecommerce.
Saving Images Properly
The first concern you need to have when saving an image for use on your website is using the right dimensions. If you are editing images in Photoshop, you will need to view it at 100 percent to get a representation of how it will look on a computer monitor. You will be able to resize the image as needed to look presentable on your website.
Here’s how you can save your original product photos straight from your camera with web-ready compression. Try the “save for web” option. If you use any version of Adobe Photoshop, the “save for web” option is exactly what you need to compress your product photos for your store. In Photoshop CC 2015 the option can be found under File > Export > Save for Web; in previous versions the option is located in File > Save for Web.
From the new menu that appears you can adjust the resulting image size, compression, and format. You’ll also be given an approximate loading time and file size — everything you need to know if you’re on the mark with your compressed photos. Not everyone has access to Photoshop, but that shouldn’t hold you back. There are plenty of free online tools designed to compress your photos. Two of the best are the Kraken Image Optimizer and TinyPNG. Both tools shrink your images to a surprisingly small size while still preserving quality. Tiny image size, big image impact. Once the tools are finished with your uploaded images, you’ll be able to save them and add them to your store.
Reducing Image File Size
It’s possible to reduce the file size without significantly reducing the quality of your images. A quality of 60 works best because it drops the file size down to below a megabyte and there’s no noticeable difference in quality. Shoppers want product photos that are large, highly detailed, and able to be zoomed in on.
Thankfully, various applications and websites offer web-ready compression for your photos, allowing you to condense your files while preserving their quality. Many of these applications have become so efficient that an untrained eye is incapable of spotting the difference between compressed and uncompressed images. Even the highest resolution photos will still look great — and load quickly — when saved in a web-ready format.
Ideally, you want the file size to be as small as possible without compromising the look of the photo. The “Save for Web” function in Photoshop is a great way to reduce file size. Compressing the images for use on the internet is also important. There are a variety of programs, like ImageOptim that can help you reduce file sizes up to 10 percent with the use of their software. The smaller your image file sizes are, the faster they will load for customers who visit your e-commerce site.
Setting Alt Texts
Alt tags add some nice SEO value to your e-commerce site and will help you achieve better rankings in the search engines when used appropriately. Alt tags are technically a text alternative to images when a browser can’t properly render them. Much like an example like this:
<img src=“sherlock-tee-black.jpg” alt=“sherlock tee black”> Be careful though — don’t give your alt tags and images names that will a trigger a spam alert, either. For example, stay away from a naming convention like “sherlock-tee-black-on-sale-buy-now.jpg” and giving it the same matching alt tag. That’s a no-no. Don’t make your image names and alt tags desperate, make them good.
Many SEOs upload pictures with their original names, which should not be done. Naming your files is the first step in optimizing your images. It’s crucial in order to rank well. By being specific, you’ll help Google understand what’s on your site and in turn, you’ll rank better. Alt attributes, or tags – represent information about a picture displayed in the event that the image is not loaded successfully. Since the tag is used to describe the image, Google considers this an important ranking factor.
This is probably the most important metadata related to an image so it’s extremely important to do it right. It is recommended you use at least 125 characters for the alt tag. Remember this must be a description of the picture, so you should put extra effort in being specific and accurate. It is not necessary to use keywords in the alt tag, although you can. It’s more important for the words to illustrate the picture in order to improve the ranking. But as you create alt tags, you will most likely naturally include keywords.
These don’t necessarily add any SEO value to your images, but they can be useful for other reasons. The Description can be used to add a lot more extra detail, such as how the picture was taken, when it was taken and any other interesting elements. The Caption will show up underneath the image on the live article. It’s up to you whether you use one or not. It can be helpful to describe or comment on the image. There’s no direct relation between image captions and search engine rankings.
However, bounce rates are taken into account. Now, what does bounce rate has in relation to this, you ask? If someone searches for a term, clicks on your page, and bounces back to the search page quickly, search engines use that as a factor for rankings. Why would someone go back to the search results? Because the content they clicked on didn’t satisfy what they were looking for. And that’s where image captions come in. Next to your headline, image captions are important because they are one of the most well-read pieces of content on your entire site. So, if you fail to use them, you’re losing out on one more chance to lower your bounce rate.
Adding Thumbnails And Image Sitemap
Web crawlers can’t crawl images that are not called out in the webpage source code. So in order to let them know about these images, you must list their location in an image site map.
Google has many guidelines for image publishing to help your website rank high on the search engine. In addition, you can use the extension for images on Google Sitemaps to give Google more information about the images on your website, and doing this can help Google find more images than what would be conventionally found through their search engine. Although using Sitemaps doesn’t guarantee that your images will get indexed by Google, you can absolutely increase the optimization of your website, and especially the images by using Sitemaps.
Thumbnails are great to use in search results, both in Google and inside your own eCommerce store. Search result pages with thumbnail pictures tend to receive more clicks and traffic–simply because they stand out from other text-limited results. List your products in Google Merchant Center and write your alt-tags the right way. Then the search engine will use them when it shows results and if there’s a thumbnail, it will be displayed as a result among your text links. This way you might be able to rank twice for the first page.