Science confirms that 65% of the world’s population are visual learners. Images add a component written copy doesn’t possess: speed. With eCommerce marketing, the old axiom, “A picture is worth words,” rings true.
Strong images elicit emotional responses. Put differently; they are memorable, boost engagement rates and generate sales because they speak deeply to consumers’ needs and innermost desires.
People want to share images and see more of them. In fact, web content with images receives up to 40% more shares than web content without. In a society that esteems Image, online businesses have to prioritize and strategize image selection on their websites and marketing materials.
We can attribute this to smartphone ubiquity and social media apps where selfies have spurred Gen Z, and to some degree millennials, to be more concerned with appearance than any previous generation.
Yet, uploading images to the web isn’t as simple as you might think. Like all online business and marketing-related endeavors, images need to be optimized.
In this blog, we’ll explain why this matters, as well as provide some image optimization best practices.
Image optimization is the process of creating and uploading high-quality images in the ideal format, size, and resolution on your website to boost user engagement and ensure your web pages load fast. This includes accurately labeling your product images, so Google bots can read and rank your pages correctly.
To paraphrase marketing guru Neil Patel, images take up more bytes than any other website element, especially on eCommerce sites. Therefore, image file size and complexity can make or break your website’s performance.
For less technical and more obvious reasons, image quality is vital to attracting consumers and compelling them to make a purchase. Blurry, small, or pixelated images are unprofessional and immediately dissuade customers.
On the contrary, optimized images are easier to crawl and index. The faster your eCommerce website is, the more likely it is to rank higher in search engine results. Optimizing images without sacrificing quality uses less of your website’s bandwidth and disk space.
This makes your web pages lighter and your server’s communication with users’ browsers quicker. Ultimately, your website content will load faster, and fast websites lead to better satisfaction and improved user experience.
The ideal loading speed for eCommerce web pages is under two seconds. According to marketing data, if consumers wait more than three seconds, there is a 40% chance they’ll move on to competitors.
If you’re still skeptical, know that Amazon found that every 100 milliseconds of improved page load time came with a 1% increase in revenue. Additionally, a slow loading time will result in a lower rank on Google search results pages (SERPs).
A good eCommerce image sells products. It presents them in such a way that consumers feel compelled to buy them. Depending on your business, your images need not be a glossy two-page spread like you find in Vogue.
They must just showcase critical decision-making product features.
Think about it like this: online shoppers don’t invariably have the luxury of going to stores to inspect products in person. However, an eCommerce image is expected to fulfill the same function as though they are looking at it in real life.
DSLR cameras and most image editing software have made this possible. But, it’s not just about what the image looks like; it’s also about it how it performs technically online, i.e., image optimization.
To produce high-quality images, you need to take various factors into consideration. Remember, just because an image is high-quality (in terms of pixel data) does not mean it’s optimized.
eCommerce optimization is really about achieving a balance between producing attractive images that appeal to consumers and optimizing them technically to meet search engine needs.
In general, image optimization best practices entail:
Your images should be as large as necessary to fill the space required. For example, slideshow images are usually wider than blog images and thumbnails.
Before we get into it, let’s explain the difference between image resolution and size:
The difference is image size determines how large your image will be viewed on desktop screens and mobile devices, whereas resolution reflects printer quality.
Generally, eCommerce websites use three types of images; slideshow, blogs, and thumbnails (the sizes below refer to pixels.):
A thumbnail is a small thumb image used as a placeholder for full-sized multimedia content. They’re 100×200 or 200×200 in size and are often found in the product category or product search result listings on a website.
Thumbnails need only be large enough to convey a product’s basic features; shape, color, and design. Usually, when shoppers click on thumbnails, they’re redirected to a dedicated product page with full-size images.
These images show various perspectives of products such as the front, side, underneath, etc. They’re typically 640×640 or 800×800. It’s important to showcase your product as it appears in real life, so as not to mislead customers.
Hence, use Adobe Photoshop to enhance your product images, but don’t make them look fake!
Detailed close-ups are super important for products with special patterns or clothing made with specific fabric, textures, and colors. The minimum size for large detail images that accommodate zooming is 800×800 and 1000×1000.
These types of images set realistic expectations as to the level of quality a customer can expect.
Resizing refers to making an image bigger or smaller without cropping it. It alters an image’s dimensions, which affects the file size and image quality. For example, if you try scaling a small image larger than its original dimension, it may appear pixelated.
On the other hand, image compression means reducing the file size (keeping the image looking the same) and maintaining its resolution so that it improves page load time and user experience.
Images have two sizes; the image size, i.e., the space they occupy on the screen (measured in pixels) and the file size, which is the memory an image takes up (measured in bytes).
Online shoppers will almost always move their mouse over a product image to get a more detailed view of it. This is especially true for clothing and shoe retailers.
Creating high-quality images is crucial, so users can zoom in and clearly view details. You’ll have to check the specifications of the platform that hosts your eCommerce store to determine exact image file sizes.
Then, when it comes to compression, there are two types:
Whether you use lossy vs lossless depends on what works best for your website and its visitors. For most eCommerce stores, lossy compression is acceptable; however, if you run a photography website, for instance, lossless compression will serve you better.
If you’re unsure, you can always web-check with your eCommerce website developer.
The three most common image formats on the web are: JPEG, GIF, and PNG.
Some eCommerce image optimization tips:
Stock photos seem like an easy and inexpensive way to fill your website with attractive visuals, but using images that aren’t your own can look very unconvincing. Most appear cheap and uninspiring.
We’ve all seen those images of “colleagues” crowded around a desk, pointing at something on a laptop screen with overbearing enthusiasm. It is tiresome, predictable, and disingenuous. Images provide informational, aesthetic and self-enhancement value, increasing the appeal of your online store, but only when done well.
Always publish unique, personalized photos whenever you can. If you’re building a new site, request your web development company stays clear of stock images.
Different products require specific product photography to showcase their attributes in the best light. As such, online store images come in a variety of styles that serve diverse purposes:
These feature one product per image. They’re mostly used in product catalogs, banner images, and throughout product pages to showcase individual products independently of a full collection.
Nike’s trainer product images are a prime example.
Group shots are best for product kits and collections, like a skincare line, for instance. These eCommerce images provide customers with a complete view of your products. They also possess more editorial flair and are ideal for social media posts and advertisements.
Take a look at the Skincare line Lelive.
Lifestyle photography is a genre of image-making that captures people using products in everyday scenarios. The primary goal is to make the products more relatable because they’re shown in “daily” life.
These shots can help tell the story behind your product. eCommerce brands like Urban Outfitters use lifestyle shots to complement their product pages.
Original lifestyle images are suited to social media, email marketing, and ads because they make products seem more personal.
Self-explanatory, these shots are commonly used for jewelry and other items to help highlight specific product features. Tiffany & Co. aptly utilizes detailed shots to showcase the brilliance of its diamonds.
One of the issues with online shopping is being unable to gauge product size. While most online stores list size dimensions, even simple images can be deceiving.
Scale shots help customers get a better idea of a product’s size. When products are put in context, users can better visualize what the product will be like in their own lives. Therefore, they can immediately understand aspects without prior knowledge.
Successful online store Techno gym has images of models using their equipment indoors to give a better indication of product scale.
Descriptive, keyword-rich image file names are crucial for image SEO. Including your target keywords in your image names helps your web pages rank higher on SERPs.
Search engine doesn’t just crawl the copy on your website; they also crawl image file names. For instance, let’s say your product image is of a pair of red shoes. The camera may have assigned it the name DCMIIMAGE78.jpg.
This doesn’t tell search engines anything useful about the image. It would be much better to change the file name to red-heels-Gucci-2023.jpeg. Now search engines will understand what the image is about and can better match it with users’ search queries.
You can use Google Analytics to determine which naming patterns are the most common, and apply the same formula to your image file naming process. Keyword research will also help; just ensure your image names are relevant.
Be warned: naming an image of red shoes using high-volume keywords entirely irrelevant to your product to boost traffic can result in penalization from Google.
An XML image sitemap is a file that helps search engines correctly scan and index images on a site. It’s purposefully created to increase the chances of getting into Google Images search results.
Web crawlers can’t crawl images not named specifically in a webpage’s source code. So to alert crawlers to unidentified images, web developers list their locations in image sitemaps.
Most websites don’t need XML sitemaps as the images within website content will already be present in its website XML map. In this case, an image XML map would be redundant.
When creating a website XML sitemap, be sure to add relevant details like the type of image, subject matter, caption, title, geographic location, and licensing.
Using sitemaps doesn’t guarantee your images will get indexed by Google, but it’s a step in the right direction, especially if you have a comprehensive SEO strategy.
For in-depth eCommerce image optimization, you can take a look at Google’s guidelines for image publishing, while Google Webmaster Tools has great suggestions for formatting sitemaps correctly.
Alt text is the written copy that appears in place of an image on a web page if the image fails to load on a user’s screen. It helps search engines to better crawl and rank your website.
When it comes to eCommerce image optimization, you should always fill out the alt attribute for each product image on your website.
Some alt text tips:
Good alt tags give search engines more, and better information, so your eCommerce website will rank higher!
While certainly not the most creative, using a white background creates consistency across the web and is pretty much standard procedure for the following reasons:
You can use image-editing software like Adobe Photoshop to manually replace the background of your product images with a white background. Here’s a YouTube tutorial that shows you how.
Thumbnails are important for search, related video traffic, and YouTube channel optimizations. Online stores use them instead of larger images to make web pages load faster, especially on mobile.
Below are some useful thumbnail tips:
According to Google, structured data is:
“A standardized format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on.”
Structured data provides search engines with additional information about images, and makes them more likely to appear in the Images section of search results. In the case of SEO, it tags images with specific groups of text that help search engines understand the images’ contexts and return accurate results to searchers.
Structured data may include image titles, captions, product descriptions, price, availability, brand, and other information. You read more about structured data best practices on Google Search Central.
Caching image content extends beyond image optimization and should be part of your overall web development and eCommerce strategy. In the context of images, although it applies to all web content, it’s the process of storing copies of your images on additional local or globally distributed servers and in your users’ browsers.
Thus, these images are served directly from additional servers, rather than from your website servers.
Without caching, whenever a visitor arrives at a website page and clicks on the same image as someone else, they slow the server down because they’re making the same request as hundreds of other people who want to see the same product.
Caching solves this problem by storing a copy of the assembled web page and components (multimedia and images) in different locations, so the browser doesn’t have to go back to the server each time a new visitor views the same image files.
In fact, caching can load your web pages up to 10 to 100 times faster!!
While more time-consuming to implement, one of the key benefits of adaptive website design is it has multiple fixed layouts designed for specific screen sizes. Therefore, rather than just displaying a large image on a device, it optimizes images based on the resolution and size of the user’s screen.
The main difference between an adaptive design and a responsive design is a responsive design changes its layout based on a device’s screen size, whereas an adaptive design requires the creation of a different website layout for each device.
If an adaptive design is too expensive, then use JavaScript (a web programming language) in your responsive website design to detect your users’ screen sizes.
This ensures mobile-optimized images are being displayed when needed, rather than simply displaying large images at a smaller size.
The great thing about JavaScript is image optimization is done in real-time as users explore your online store.
Also called on-demand loading, lazy loading is an optimization technique used for online content whereby pages load gradually, as users progress through a site.
So, instead of loading an entire web page and rending it in one go, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user.
This enables more fluent browsing and shorter page load pages. It also improves user experience.
Website builders like Shopify, Wix, Magento, and others automatically compress images; however, they don’t always provide the finesse needed. Occasionally, the compression can be too aggressive, resulting in low image quality.
The best option would be to resize and optimize images using their original high-resolution and then upload them to your website, or you can use image content delivery networks (CDNs).
CDNs are the best tools for image optimization because they specialize in the transformation, optimization, and delivery of images to devices around the world.
Web servers are usually located in one destination; however, CDNs consist of globally distributed servers that store a website’s content and deliver it to users. So, if users in LA want to access your website, but you’re located in Chicago, they can get it from a nearby CDN server.
Image CDNS optimizes images in real-time, making them more suitable for delivery. This provides a faster load time, and better user experience, which translates to better SEO.
A well-chosen selection of website lifestyle and product images leaves a lasting impression on your visitors. It asserts your competitive edge and convinces website customers your products are worth buying.
To recap: Image optimization is an important part of SEO that provides search engines with important contextual information, and speeds up page loading time, which increases user engagement and search engine rankings.
Therefore, if you want to give your eCommerce store the best chance of online success, you need to create high-quality, optimized images. Our brief primer on image optimization techniques should help you get started.
Alternatively, if you need assistance in capturing and improving your eCommerce website pages, then you’ve come to the right place. Comrade Digital Marketing Agency can help you create an online presence that produces tangible results and boosts repeat sales.
Do you want a marketing plan that fits your individual needs? Let us craft a strategy that drives results to your company based on your objectives.
Please fill out the form to the right, and we will contact you within one business day for a free initial consultation.
Unlock a full potential of your website. See which gaps in your marketing don’t allow your organization to scale. Get a complimentary, no obligation marketing performance review.