If you run an online store, image optimization is an art that you want to master. Image-optimization is an important part of creating a successful e-commerce website by attracting buyers who portray Google images to reduce site load time.
What is Image Optimization?
The image optimization is about reducing the file size of the images as quickly as possible without sacrificing the quality so that your page load time is low. This image is also about SEO. That is, getting your product images and decorative images to rank on Google and other image search engines.
Have your questions ever scratched your head?
• Why is it that my product photo never appears when I search Google Image Search?
• Do I need to add alt attributes to my images?
• What is the difference between JPEG, GIF and PNG? When should I use one another?
Today you will get an answer at the end because we are diving deeper into these questions.
Here’s how to customize images for the web
1. Name your images in descriptive and plain language
It’s really easy to fly through hundreds of product shots and it’s easy to keep the default file names that are assigned to your camera.
When it comes to image SEO, it is important to use relevant keywords to help your webpage rank on search engines. It is important to create descriptive, keyword rich file names for image optimization. Search engines not only crawl text on your webpage, they also crawl your image file names.
You can use the normal camera assigned to the image (ex. DCMIMAGE10.jpg). However, it would be better to name the file-2012-Ford-Mustang-LX-Red.jpg file.
Think about how your customers search for products on your website. What naming patterns do they use when they search? In the above example, car buyers can search for:
• 2012 Red Ford Mustang LX
• Ford Mustang LX Red 2012
• Red Ford Mustang LX 2012
To see what keyword patterns your customers follow, see your website analysis. Determine the most common naming patterns they use and implement that formula in your image file naming process.
If you are not going to be data-driven, just be sure to use contextual, helpful keywords while naming your images (i.e. try to be descriptive).
2. Customize your alt attributes carefully
Alt attributes are text options for images when a browser can not present them correctly. They are also used for web access. Even when the image is presented, if you overwrite it, you will see alt attribute text (depending on your browser settings).
Alt attribute also combines SEO value on your website. Adding appropriate alt features that include relevant keywords for your website, can help you rank better in search engines. In fact, using alt attribute is probably the best way to show your e-commerce products in Google Image and Web Search.
Let’s look at the source code of an alt attribute.
When it comes to image optimization, number one priority is to fill every alt attribute for each product image on your site.
Here are some simple rules for the alt attributes:
• Describe your images in plain language, as you did for your image file names.
• If you sell products that have model numbers or serial numbers, then use them in your alt attributes.
• Do not fill out your alt attributes filled with keywords (e.g., Alt = “Ford Mustang Muscle Car Buys the Best Price on Sale”).
• Do not use alt attributes for decorative images. Search engines can penalize you for optimization.
Finally, always check a sanitary periodically. Check out the source of your web pages and check to see if your alt features have been filled properly. When you are moving on the pace of entrepreneurship, you will wonder what you remember.
3. Choose your image dimension and product angle intelligently
This is a general practice to show many angles of your product. By going back to the Ford Mustang example, you do not want to show just one shot of the car, especially if you are trying to sell it. This will be your best interest to show the shots:
• Back, especially the air spoiler
• Engine … after all this is a Mustang.
The best way to capitalize on these extra photos is to fill your alt attributes. And by the way, you do this, by creating unique alt attributes for each product shot.
• 2012-Ford-Mustang-LX-Red-leather-interior-trim.jpg -> use alt attribute: alt = “2012 Ford Mustang LX Red Leather Interior Trim”
• 2012-Ford-Mustang-LX-red-rearview-air-spoiler.jpg -> use alt attribute: alt = “2012 Ford Mustang LX Red Rear View Air Spoiler”
The key here is to add details to your base alt attribute so that potential searchers can get to your website. If you do extra work, Google will reward you with the searchers.
Use caution when providing large images
Now you will want to provide great ideas for your visitors, who can create a great user experience, but be careful.
Whatever you do, keep the biggest image on your webpage and reduce the dimensions through the source code. This will increase your page load time due to the larger file size associated with the image.
Instead, make it a small image and provide the option of viewing a large image in a pop-up or on a separate webpage.
4. Reduce the file size of your images
• Nearly 50% of consumer e-commerce sites will not wait for 3 seconds to load.
• … And, at the global level, the average page load time is actually rising.
• Amazon found that if their pages slowed down for just a second, they would lose $ 1.6 billion annually.
• Google uses page load times as a ranking factor in their algorithms.
So, if you have images that “doll” the screen gradually and take more than 15 seconds to load? Well, you can kiss that potential customer goodbye!
So what can you do?
When a customer comes to your site, depending on how large your files are, everything may take some time to load. The larger the file size, the longer the webpage loaded. (Note: If you are a Shopify merchant, then we automatically compress the images, so this should not be a problem for you.)
If you can reduce the size of image files on your webpage and speed up page load, then fewer visitors to your site will click.
One way that you can reduce the image file size is by using the “Save to Web” command in Adobe Photoshop. When using this command, you want to adjust the image to the lowest file size while monitoring for image quality.
• Quality: Find it in the top, right-hand corner (i.e. 70).
• File format: Find it in the top, right-hand corner (i.e. JPEG).
• Optimization: Find this checkbox in the top, right-hand corner (i.e. optimized)
• Color: Find this checkbox in the top right corner (i.e. convert to SRBG).
• Downsizing and sharpening: Find it in the bottom-right corner of the corner (ie W: and H :).
• Expected file size: Find it in the bottom left-hand corner (i.e. 136.7).
You can also choose to use “as export”.
How to customize images without photoshop
If you do not have Adobe Photoshop, there are many online tools you can use to edit the image. Adobe also has a free image editing app for smartphones and tablets, Photoshop Express. This tool does not have the capability of all the capabilities of Adobe Photoshop’s desktop version, but it contains all the basics of image editing and has no hands and feet in it.
Other effective online image editing tools are:
• PicMonkey has been described by experts as “fabulous photo editing tools”.
• PIXLR is super user-friendly and comes with 100% free app for your smartphone so that you can go ahead and edit.
• Canvas is another quite advanced online image editor.
In the end, there is always a GIMP. GIMP is an open-source, free image editing software application that can be run on Windows, Mac or Linux. This Photoshop can do everything, but a little clunker is formed. But for a free image editing application, you can not beat it.
How big should image files be?
For e-commerce images, a good rule of thumb is to try to keep its image file size below 70 images. This can sometimes be difficult, especially for large images.
5. Choose the Right File Type
There are three common file types used to post images on the web: JPEG, GIF, and PNG.
Let’s look at the three file types and how they affect the same image:
JPEG (or .jpg) images are somewhat old file types. JPEG has become the real fact of the Internet. JPEG images can be significantly compressed, resulting in images containing quality with smaller image sizes. In the above image, JPEG format allows decent quality at the lower file size.
GIF images are of lesser quality than JPEG images and are used for more simple images such as icon and decorative images. GIF also supports animation, because I’m sure you know.
Regarding image optimization, GIFs are very good for those simple, simple images on web pages (which contain only a few colors). But for complex images and photos, GIFs are not always attractive. This is especially true for large images.
We may be away from using GIF in the above MacBook image because the picture is small enough that a GIF works well.
PNG images are becoming more popular as to a substitute for GIF. PNGs support many more colors than GIF and they do not fall down over time as they are rescued like JPEG. Even though the use of the PNG file type is often started, file sizes can be much larger than JPEG images.
Note that the PNG-24 image is three times the size of the file compared to PNG-8. That’s why you have to be very careful with PNG.
Here is an extreme example, where the image file size is constant at 24 KB for all three file types:
As you can see, JPEG is a clear winner here. GIF and PNG should fall in quality to stay in a low file size.
Here are some tips to remember when choosing a file type:
• In most cases in e-commerce, JPEG will be your best bet. They provide the best quality for the smallest file size.
• Never use GIF for large product images. The size of the file will be very large and there is no good way to reduce it. Use GIF only for thumbnails and decorative images.
• PNG can be a good option for both JPEG and GIFs. If you are only able to get product photos in PNG format, then try to use PNG-8 on PNG-8. PNG excel in the form of simple decorative images due to its extremely small file size.
The most image editing software can save images in any file format discussed above.
6. Customize Your Thumbnails
Many e-commerce sites will use thumbnail images, especially on category pages. They display products quickly without taking too much real estate.
Thumbnails are great, but be careful; They can be a silent killer. the victim? Your page load speed Thumbnails are usually presented at important points during the shopping process. If they are stopping your category pages from loading quickly, you could lose potential customers. (Note: Buyers do not have to worry about thumbnail optimization to shop because we take care of it for you.)
So what can you do?
• Make your thumbnail file size as small as possible. Here, the quality of the file size may be worth the slide. Remember, the cumulative effect of your thumbnail will have a significant impact on your page load time.
• Prioritize your alt attribute text so that you do not duplicate the text that is used for larger versions of the same image. In fact, separate your alt text from wild form. The last thing you want is indexing thumbnails instead of the big image. A case can be made to completely leave the alt text.
7. Use Image Sitemaps
Web crawlers can not crawl images that are not specifically said in the webpage source code. Therefore, for the crawler to know about unknown images, you must list your location in an image sitemap.
You can enter the following line in your robots.txt file, which is showing the path to your Sitemap:
Or you can submit a sitemap to Google using Search Console.
Google has several guidelines for image publication, which can help your website rank more on the SERP. In addition, you can use Google Sitemaps to give more information about images on your website, which can help Google find more of your images more than you can.
Using Sitemaps does not guarantee that your images will be indexed by Google, but this is definitely a positive step towards image SEO. There are several suggestions for correctly formatting your Sitemap in Google Webmaster Tools.
It’s important for you to add a specific tag for all your images. You can also create a separate sitemap for listing images specifically. When using specific tags, it is important to add all the necessary information for any Sitemap you have available.
8. Beware of decorative images
Websites often classify decorative images, such as background images, buttons, and borders. Anything related to non-product can be considered the decorative image.
Although decorative images can add a lot of beauty appeal to the webpage, they can result in a large composite file size and slow load time. Therefore, you would want to consider looking at your decorative images so that they do not spoil your website’s ability to convert visitors into customers.
You want to see the file sizes of all decorative images on your site and want to use a template which reduces the file size.
Here are a few tips to reduce the file size of your decorative images:
• For those images that create limitations or simple patterns, they make PNG-8 or GIF. You can create beautiful looking images which are only a few hundred bytes in size.
• If possible, use CSS to create colorful areas instead of using images. Use CSS styling as much as possible to change any decorative images.
• Get a closer look at that big wallpaper-style background image. They can be big files. Removing as much as possible without wasting image quality
A background that you can use to eat in your background image size is to cut the background image and make it a flat color or even transparent. This file size can be greatly reduced.
9. Use caution when using the Content Delivery Network (CDN)
Buyers do not really have to worry about shopping because we are a hosted solution, but others should pay attention. Content Delivery Network (CDN) is a well-known place for hosting images and other media files. They can increase your page load speed and help resolve bandwidth issues.
When it comes to backlinks, there is a flaw. As you know, backlinks are important for SEO and the more backlinks you have, the better your site is in the search engine.
By placing your images on a CDN, you are probably removing the image from your domain and can keep it on the CDN domain. So when someone links to your image, they are actually connecting to the CDN domain.
Therefore, the best practices are:
• Just because “trendy” does not make sense, that does not mean that you should follow it like sheep. Determine whether this is really the best step for your business.
• If your website is doing a lot of business every month, then a CDN is the best idea because it can help resolve the bandwidth issues.
• If your site receives thousands of visitors in just one day, then it is likely that your current hosting status will be able to handle the load.
There are ways around the SEO related to CDN issues, but be sure to help professionalize yourself in strategizing your move already.
10. Test your images
The whole point of optimizing your images is to help increase your bottom line. We talked about reducing file size and indexing your images to search engines, but what about testing images to see what changes to more customers?
• Test the number of product images per page: Since the load time is a problem for some non-hosted e-commerce sites, you will find that reducing the number of images on a page will increase the rates and rates through sales. It is also possible that providing a lot of images per page will improve the user experience and get more sales. The only way to find it is to test it.
• Test what your customers like: You can see an increase in customer loyalty by providing ideas to watch your customers. One great way to find out is to see the best of their customers while looking at their product shots. It is a great habit to survey and talk with your customers to come normally. However, verify by trial.
• Test how many product listings should you have on category pages: 10, 20, 100 products? To work best for your customers, test the number of products listed on category pages.
Keeping Beautiful Photos Functional
Now questions about your e-commerce images won’t leave you tossing and turning for hours.