10 Killer Strategies for Optimizing Images on Independent Websites 

If you are running an online store—particularly a standalone e-commerce site—then effectively utilizing limited resources such as CPU, memory, and bandwidth to provide visitors with the fastest possible loading speeds is a critical consideration you simply cannot overlook. In this process, image optimization plays a vital role; images consume a significant portion of a website’s total resources, yet they also serve as a key visual driver for conversions. Whether the goal is to attract consumers via search results or to reduce website loading times, image optimization is an indispensable component of building a successful e-commerce site.

What Is Image Optimization?

Image optimization involves reducing the file size of images as much as possible without sacrificing quality, thereby keeping page loading times to a minimum. In practical terms, this means ensuring that your product images and decorative graphics achieve higher rankings on Google and other image search engines.

Are the following questions driving you crazy?

• Why do my product photos never appear when I perform a 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 format over another?

Let’s start by presenting 10 essential, killer strategies:

1. Name your images using simple, clear, and descriptive language.
2. Carefully optimize your alt attributes.
3. Sensibly select image dimensions and product angles.
4. Reduce image file sizes.
5. Choose the correct file type.
6. Optimize thumbnails.
7. Use image sitemaps.
8. Be cautious when adding decorative elements to images.
9. Exercise care when using a Content Delivery Network (CDN).
10. Test your images.

1. Name your images using simple, clear, and descriptive language.

The thrill of clicking the shutter—accompanied by the default filename automatically assigned by your camera—is where the joy of photography truly begins.

But wait: when it comes to image SEO, remember that it is crucial to use relevant keywords to help your web pages rank higher in search engines. Creating descriptive, keyword-rich filenames is vital for image optimization. Search engines don’t just crawl the text on your web pages; they also crawl your image filenames.

Let’s take the following image as an example.

Typically, you can use the generic filename assigned to the image by the camera (e.g., DCIM8313.jpg). However, it is best to name the file something specific that clearly describes the image’s content—such as “2018-VOLVO-S60-RED.jpg.”

Try to put yourself in your customers’ shoes and consider how they would search for the products they want on your website. What specific terms or phrases would they use when searching? In the example above, a car shopper might search for terms such as:

• 2018 Volvo S60
• Red Volvo S60
• Volvo Red S60

Therefore, the filenames of the images mentioned above can incorporate multiple search terms, facilitating their indexing by search engines and their discoverability by customers. Please review and analyze your website’s data reports and search keyword trend reports to understand the keyword patterns your customers follow. Identify the most common naming conventions they use, and apply that formula to your image filenames.

If you prefer not to sift through voluminous data for inspiration, you should still make it a priority to use relevant and useful keywords—specifically, descriptive keywords—when naming your images, rather than employing irrelevant or trend-chasing terms.

Check out this Q&A from Moz to learn about the importance of strategically naming image files on your website. It can certainly boost the quality of your on-page SEO and help your web pages and images achieve higher rankings in Search Engine Results Pages (SERPs).

2. Carefully optimize your alt attributes.

When a browser is unable to properly render an image, the alt attribute serves as a text alternative for that image. These attributes also play a crucial role in web accessibility. Even when an image displays correctly, hovering your mouse cursor over it will reveal the alt attribute text (depending on your browser settings).

The alt attribute can also add SEO value to your website. Adding appropriate alt attributes—containing relevant keywords—to the images on your site can help you achieve better rankings in search engines. In fact, utilizing alt attributes may be the most effective way to ensure your products appear in both Google Images and standard web search results.

Let’s take a look at this code snippet:

<img src=“2018-VOLVO-S60-RED-Volvo-Red.jpg” alt=“2018 Volvo Red S60.jpg”>

If you assign an alt attribute to an image, search engines can detect the keywords contained within the code shown above.

Regarding the alt attribute, here are a few basic principles:

• Describe your images in simple language, just as you would for their filenames.
• If the products you sell have specific model numbers or unique attributes, include them in the alt attribute.
• Do not stuff your alt attributes with keywords (e.g., alt="2018 Latest Model VOLVO Imported Cars Now on Sale at the Best Price").
• Do not use alt attributes for purely decorative images; search engines may penalize you for over-optimization.

Finally, it is wise to conduct a periodic review of your filenames and alt attributes. Inspect the webpage’s source code to verify that your alt attributes have been filled out correctly. Do not let a busy schedule cause you to overlook these seemingly trivial—yet crucial—details.

3. Sensibly select image dimensions and product angles.

The standard practice is to showcase your product from multiple angles. Returning to the Volvo example, you wouldn’t want to display just one side of the car—especially if your goal is to sell it. Including the following types of photos can help you garner more attention:

• Exquisite Interior Details
• Gleaming Wheels
• Dynamic Driving Performance
• Heartwarming Scenes of Family Outings
• Scenery of Galloping Across the Wilderness

Utilizing these additional photos not only enhances their appeal to visitors but also helps attract the favor of search engines. The method for doing so is to create a unique “alt” attribute for each image.

• 2018-VOLVO-S60-RED-Volvo-Red-Interior.jpg — A suitable `alt` attribute option is: `alt=”2018 Volvo S60 Red Interior Image”`
• 2018-VOLVO-S60-RED-Volvo-Red-Tires-Wheels.jpg — A suitable `alt` attribute would be: `alt=”2018 Volvo S60 (Red) Tires and Wheels Image”`

The key here is to add descriptions to your basic alt attributes so that potential searchers land on your website to view them. If you put in this extra effort, search engines will reward you with corresponding traffic and rankings.

4. Reduce image file sizes.

Please refer to the following facts:

• Nearly 50% of consumers won’t even wait three seconds for an e-commerce website to load.
• Moreover, globally, the average page load time is actually increasing.
• Amazon discovered that if their web pages take just one second longer to load, they would lose $1.6 billion annually.
• Google uses page load time as a ranking factor in their algorithm.

If your images are slowly “trickling” onto the screen—taking more than 15 seconds to load—well, you can kiss that potential customer goodbye!

So, what’s your strategy?

When customers land on your website, it may take some time for all the content to load, depending specifically on the size of your files. Naturally, the larger the file size, the longer it takes for the webpage to load.

If you can reduce the file size of the images on your site and accelerate page load speeds, you will lower your visitor bounce rate—meaning you are more effective at retaining visitors.

One method for reducing image file sizes is to use the “Save for Web” command in Adobe Photoshop. By utilizing this command, you can optimize an image to the smallest possible file size while still preserving its quality.

For instance, take the exact same image: if you select the “Best” quality setting, the file size clocks in at a hefty 77KB.

In contrast, selecting “medium” quality images results in a file size of only 27KB.

In Photoshop’s “Save for Web” command, there are several adjustable properties:

• Quality: Locate this setting in the top-right corner (i.e., 30). Typically, a value of 30 or higher will not result in any noticeable loss of image quality.
• File Format: Locate this setting in the top-right corner (i.e., JPEG).
• Optimization: Check this box in the top-right corner (i.e., “Optimize”).
• Color: Check this box in the top-right corner (i.e., “Convert to sRGB”).
• Resizing and Sharpening: Locate these settings in the bottom-right corner (i.e., W: and H:). Be sure to adjust the dimensions to an appropriate size based on the specific requirements of the webpage.
• Estimated File Size: Locate this value in the bottom-left corner.

What to do if you don’t have Photoshop?

If you do not have the desktop version of Adobe Photoshop, there are still many online tools available for image editing. Adobe even offers a free image-editing application—Adobe Photoshop Express—which runs on smartphones (iOS/Android) and tablets. While this tool does not possess all the features found in the desktop version of Adobe Photoshop, it covers the fundamentals of image editing without incurring significant costs.

Of course, there are also other excellent online editors to choose from:

• COMPRESS JPEG: Quickly compress JPG and JPEG files—completely free, no registration required, and instant results.
• PicMonkey: Described by some experts as an “amazingly great photo editing tool,” it offers robust functionality and is suitable for users who require features beyond basic image compression. The base fee is $7.99 per month.
• PIXLR: Features a very user-friendly interface and supports mobile apps, so you can edit while on the go.
• Canva: Another online editor with a relatively balanced feature set.

Finally, GIMP is worth mentioning. GIMP is a free, open-source image editing application that runs on Windows, Mac, or Linux. It can do everything Photoshop can do, though it often feels a bit clunky. However, as a free image editing application, that is a compelling enough reason to use it.

How large should images be?

For images used on e-commerce websites, a good rule of thumb is to try to keep the file size under 70 KB. This can sometimes be challenging, especially for larger images; however, it is well worth the effort to optimize them as much as possible.

5. Choose the correct file type.

Currently, there are four commonly used image file formats: JPEG (with the extension .jpg or .jpeg), GIF, PNG, and WEBP.

• JPEG (.jpeg or .jpg): Although somewhat of an older file type, JPEG has become the de facto standard image format on the internet. JPEG images allow for high compression ratios, making it possible to present high-quality images with smaller file sizes. As illustrated in the image above, the JPEG format enables the achievement of decent quality at a relatively low file size.
• GIF (.gif): Offering lower image quality than JPEGs, GIFs are typically used for simpler graphics, such as icons and decorative images. GIFs also support animation—a feature you are likely already familiar with. In terms of image optimization, GIFs are well-suited for simple web graphics (specifically those containing only a limited number of colors). However, for complex images and photographs, GIFs are not always the most appealing choice; this is particularly true for large-scale images.
• PNG (.png): As an alternative to GIF, the PNG format is gaining increasing popularity. PNGs support a wider color palette than GIFs and, unlike JPEGs, do not suffer from quality degradation over time. Although the PNG format is being adopted with increasing frequency, the resulting file sizes can often be significantly larger than those of JPEG images. Note: The file size of a PNG-24 image can be up to three times larger than that of a PNG-8 image. This is why you must exercise caution when deciding to use the PNG format.
• WEBP (.webp): The WEBP format is a true “all-rounder” among modern image formats. Developed by Google, it is designed to deliver high-quality images at significantly smaller file sizes. Its lossy compression yields files that are 25–34% smaller than equivalent-quality JPEGs, while its lossless compression results in files that are 26% smaller than PNGs. It also supports transparency (via an Alpha channel)—much like PNGs—but goes a step further by supporting 8-bit transparency channels, enabling smooth, gradient-based transparency effects that far surpass the 1-bit transparency limitations of GIFs (which allow only for fully transparent or fully opaque states). Furthermore, WEBP can be used to create animated images, serving as a direct replacement for GIFs. Animated WEBP files support lossy compression, lossless compression, and transparency, and are typically much smaller in size than their GIF counterparts. WEBP is the preferred format for modern web image optimization; provided that appropriate compatibility fallback solutions are in place, it should be used to replace JPEGs, PNGs, and GIFs whenever possible.

For a more intuitive comparison, we can refer to the table below:

Feature	WEBP	JPEG	PNG	GIF
Lossy Compression	✅ (Excellent)	✅ (Standard)	❌	❌
Lossless Compression	✅ (Excellent)	❌	✅ (Standard)	✅ (Basic)
Transparency	✅ (8-bit Alpha Channel)	❌	✅ (8-bit Alpha Channel)	✅ (1-bit; Non-smooth)
Animation	✅ (Supports Lossy/Lossless)	❌	❌ (Non-standard APNG exists)	✅ (Standard)
File Size	Typically Smallest	Smaller	Typically Largest	Larger

Below is an extreme example in which the file size of the images for all three file types remains constant at 24 KB:

As you can see, JPEG is the clear winner. GIF and PNG had to sacrifice quality to maintain the same low file size.

Here are some tips to keep in mind when choosing a file type:

• In most cases—particularly on e-commerce websites—WebP and JPEG will be your best choices. They offer optimal quality while maintaining relatively minimal file sizes.
• Never use GIF for large-scale images. The resulting files will become extremely large, and currently, there is no effective method to reduce their size. Please reserve GIFs solely for thumbnails and decorative images.
• PNG can serve as an alternative to both JPEG and GIF. If you are only able to obtain product photos in PNG format, try using PNG-8 rather than PNG-24. PNG-8 is well-suited for simple decorative images, especially when the background features a transparent pattern.

Most image editing software can save images in any of the image formats discussed above.

6. Optimize thumbnails.

Many e-commerce websites utilize thumbnail images, particularly on their catalog pages. They allow for the quick display of products without consuming excessive resources.

Thumbnails are a great concept, but one must exercise caution, as they can act as a “silent killer”—with page load speed being the victim. Thumbnails typically appear at critical junctures in the shopping journey; if they prevent category pages from loading quickly, impatient potential customers may simply turn away.

So, what can be done?

• Keep thumbnail file sizes as small as possible. This is likely the best approach for balancing image quality with file size. Bear in mind that thumbnails frequently appear across various pages; the cumulative effect of these thumbnails can have a significant impact on page load times.
• Modify the alt attribute text so that it differs from the text used for the full-sized version of the same image.

7. Use image sitemaps.

If your website utilizes JavaScript libraries, image pop-ups, or other “fancy” techniques to enhance the overall shopping experience, an image sitemap will help ensure that your images are noticed by search engines such as Google.

Crawlers are unable to index images that are not explicitly referenced within a webpage’s source code. Therefore, to enable crawlers to identify these otherwise unrecognized images, you must list their locations within an image sitemap.

You can insert the following line into your robots.txt file to specify the path to your sitemap:

Sitemap: http://example.com/sitemap_location.xml

Alternatively, you can use Google Search Console to submit your sitemap to Google.

Google offers numerous guidelines regarding image publishing, which can help your website rank higher in SERPs. Additionally, you can use Google Sitemaps to provide Google with more information about the images on your site, helping Google discover more images than it might find on its own.

Submitting a sitemap does not guarantee that your images will be indexed by Google, but it is undoubtedly a positive step toward image SEO. Google Search Central (formerly known as “Webmaster Tools”) also offers numerous recommendations for correctly formatting sitemaps.

It is crucial to add specific tags to all your images. You can also create a separate sitemap specifically to list your images. When using these specific tags, it is important to include all the necessary information within any sitemaps you currently have or plan to create. When creating a sitemap that includes image information, please follow these guidelines recommended by Google.

8. Be cautious when adding decorative elements to images.

Websites typically feature a variety of decorative images—ranging from large background images to smaller elements such as buttons and borders. Anything not directly related to the product itself can generally be classified as a decorative image.

While decorative images can certainly enhance a webpage’s aesthetic appeal, they can also contribute to a larger cumulative file size and slower loading times. Consequently, you may need to carefully review your decorative images to ensure they do not hinder your website’s ability to convert visitors into customers.

The recommended approach is to audit the file sizes of all decorative images on your site and minimize them as much as possible. Here are several related suggestions:

• For images that serve as borders or simple patterns, create them as PNG-8 or GIF files. You can produce images that are visually appealing yet weigh in at only a few hundred bytes.
• Whenever possible, use CSS to create solid-color blocks rather than using images. Use CSS styles to replace any decorative images as much as you can.
• Carefully review any large, wallpaper-style background images. These can be massive files. Compress them as much as possible without compromising image quality.

Here is a handy little tip: whenever possible, use small, monochromatic or grayscale images for repeating background tiles instead of a single large background image; this can significantly reduce file size.

9. Exercise care when using a Content Delivery Network (CDN).

CDN stands for Content Delivery Network. It utilizes a network of distributed storage nodes to provide visitors in various geographic locations with a faster browsing experience. Currently, many e-commerce websites also employ this service.

As is the case with anything, there are both pros and cons; one drawback of using a CDN concerns the negative impact on backlinks. As you may know, backlinks are a critical factor in Search Engine Optimization (SEO); the more backlinks a website possesses, the better its ranking tends to be in search results.

However, by hosting your images on a CDN, you will likely remove those images from your own domain and place them on the CDN’s domain instead. Consequently, when someone links to your images, they are effectively linking to the CDN’s domain rather than yours, meaning the SEO authority and benefits generated by those links are not credited back to your own website.

Therefore, regarding the decision of whether or not to use a CDN, the following suggestions are offered for your consideration:

• Just because something is a “trend” doesn’t mean you should follow it. First, determine whether it is truly suitable for your business.
• If your website handles a significant volume of business every month, a CDN is likely a good idea, as it can help address bandwidth issues.
• If your website currently receives only a few thousand visits per day, it is highly probable that your current hosting setup can handle the load.

10. Test your images.

The entire point of image optimization is to help you generate more traffic and conversions. We have already discussed methods for reducing file size and enabling search engines to index your images, but how do you test the effectiveness of these methods?

• You can potentially boost customer loyalty by providing the specific product views that customers wish to see. An excellent way to address this is to conduct a brief survey while customers are browsing your product images. Generally speaking, conducting online surveys and engaging in direct conversations with customers are excellent practices; however, it is also essential to validate these insights through multi-faceted analysis.
• Experiment to determine the optimal number of images to display within each product category. Should you opt to display 10, 30, or 100 products per page, or would an “infinite scroll” layout be more appropriate? Determining the best approach requires testing both your website’s loading performance and your visitors’ preferences.

In the discussion above, we explored 10 tips for optimizing images on e-commerce websites; we hope this leaves you feeling empowered rather than overwhelmed.

You have now learned several image SEO strategies and understand how to make your product photos easily discoverable via Google Images. You also know how to make the most of “alt” attributes, and you have gained a better understanding of the differences between various file types—as well as when to select the appropriate format.

Of course, image optimization remains an inherently complex subject, and we have only just scratched the surface. Nevertheless, by diligently executing each of these steps, you are bound to reap lasting optimization benefits and rewards.