website SEOWebsite Traffic
Start selling with Shopify today
Start your free trial with Shopify today—then use these resources to guide you through every step of the process.
How does Shopify work
The latest image optimization techniques to reduce page speed and drive more organic SEO traffic to your online store.
Start your online business today.
For free.
In a world where customers expect instant gratification, an ecommerce website that loads quickly is of the utmost importance. Responsive images can help with load times and conversions.
While image quality is important for ensuring high conversion rates, image optimization is key for user experience and SEO for your online store. Learning how to optimize images can yield big rewards, from enhancing your brand to attracting shoppers perusing Google images.
Image optimization means ensuring your images look flawless on desktop and mobile and don’t hinder web performance. It involves modifying the image format, dimension, and resolution for a device while maintaining quality.
Three main elements play a role here:
Images are important for a good online shopping experience. Customers won’t buy your products if they cannot see them. Data from the HTTP Archive reveals that, on average, unoptimized images make up a little less than 38% of a total webpage’s weight on mobile.
Image optimization helps lower your webpage’s weight and is a core tenet of good ecommerce web design, which results in the following benefits:
Image optimization for web and mobile exists to balance speed and quality. Serving images that look good are important in ecommerce. They create a better browsing experience for shoppers.
Google has suggested that site speed is one of the signals used by its algorithm to rank pages. A slow page means search engines crawl fewer pages with their crawl budget, which can negatively affect your indexing.
Optimized images help both readers and search engines understand your website better and get your content seen online. Recent data shows that images are returned for 36.7% of search queries on Google.
Image optimization can help rank your images in Google’s image search, which can bring more traffic to your website and build your brand.
It’s really easy to upload images to your website and keep the default file names your camera assigns. But when it comes to image SEO, it’s important to use relevant keywords to help your web page rank on search engines.
Creating descriptive, keyword-rich file names is crucial for image optimization. Search engines crawl not only the text on your webpage but also your image file names.
Take this image, for example:
You could use the generic name your camera assigned to the image (e.g., DCMIMAGE10.jpg). However, it would be much better to name the file 2012-Ford-Mustang-LX-Red.jpg.
Think about how your customers search for products on your website. What naming patterns do they use when they search? In the example above, car shoppers may search terms like:
Look at your website analytics to see what keywords your customers use to find you. Determine the most common naming patterns they use and apply that formula to your image file naming process.
If you’re not going to get that data-driven, be sure to use relevant, helpful keywords when naming your images (i.e., try to be descriptive).
Check out this Q&A from Moz to understand the importance of strategically naming the image files on your site. It can definitely improve your on-page SEO. It can also help your pages and images rank higher on search engine results pages (SERPs).
Alt attributes are the text alternative to images when a browser can’t properly render them. They’re also used for web accessibility. Even when the image is rendered, if you hover over it, you will see the alt attribute text (depending on your browser settings).
The alt attribute also adds SEO value to your website. Adding appropriate alt attributes that include relevant keywords to the images on your website can help you rank better in search engines. It’s possible alt attributes are the best way for your ecommerce products to show up in Google image and web search.
Let’s take a look at the source code of an alt attribute.
The number one priority when it comes to image optimization is to fill out the alt attribute for each product image on your site.
Here are some simple rules for alt attributes:
Finally, do a sanity check from time to time. View the source of your web pages and check to see if your alt attributes are there and still relevant. You’ll be surprised by what you miss when you’re moving at the speed of entrepreneurship.
It’s common practice to show multiple angles of your product. Going back to the Ford Mustang example, you wouldn’t want to show just one shot of the car, especially if you’re trying to sell it. It would be in your best interest to show shots of:
The best way to capitalize on these extra photos is to fill out your alt attributes. And the way you would do that is by creating unique alt attributes for each product shot:
The key here is to add descriptions to your base alt attribute so potential searchers land on your website.
You want to handle images on your website to ensure they look good on all devices, especially on mobile and high-resolution screens.
To accommodate higher-density displays, which pack more pixels into the same physical space as traditional ones, you need at least a 2x image to make images look crisp and not grainy. In context, if your website has an image slot that’s 200 pixels x 200 pixels, you’d need an image that’s 400 pixels x 400 pixels to maintain sharpness on a high-resolution display. Nearly all mobile phones now have screen resolutions of 2x or higher.
The easiest way to achieve this is by using a content delivery network, or CDN. A CDN offloads the work of resizing images and serving the best image format for a user’s device. It also improves the loading speed of the image file itself, as they have server locations closer to the end user.
Note 💡 If you’re a Shopify merchant, your Shopify theme uses our image CDN. Curious how it works? Upload your own image and try Shopify’s CDN. If you’re a theme developer, learn how to write responsive image code in Liquid.
Image format is one of the most important things to get right on your website. Some file formats are higher-quality than others. Some take up more space than others, which impacts your site load time.
To start, there are two main types of image formats: raster and vector.
Vector images are built upon mathematical formulas. Whenever you need graphics that can scale to different sizes without sacrificing quality, use vector graphics. The most common vector image is the Scalable Vector Graphics (SVG) file. It is an ideal choice for logos, icons, and other simple graphics where you need clarity and sharpness, no matter the scaling.
Raster images are made up of pixels that can form highly detailed images, like photographs. The more pixels an image contains, the larger and higher resolution it will be.
Through time, newer and more improved codecs have been written for raster images. For example, GIF was an early version of an image codec for the web, but the quality was poor because the compression technique averaged nearby pixels. Newer techniques seek to code and compress in ways that are harder for the human eye to detect.
This means that we can serve higher quality images with smaller file sizes when we use newer image formats. The following formats are the most commonly used on the web today:
Not all browsers support all versions. This is where an image CDN can come in handy again, as it can automatically select the best format for a particular browser and convert your original image. If you don’t use a CDN with this capability, then you will need to use the <picture> tag in your HTML.
Note 💡 Shopify’s CDN automatically detects which file formats are supported by a browser and sends the best option. For example, it can convert images to WebP or AVIF, where supported, and send PNG or JPEG images as a fallback for older browsers.
If your site uses Javascript galleries, image pop-ups, or other “flashy” ways to improve the overall shopping experience, image sitemaps will help get your images noticed by Google.
Web crawlers can’t crawl images not called out specifically in the webpage source code. So, in order to let crawlers know about unidentified images, you must list their location in an image sitemap.
You can insert the following line in your robots.txt file, showing the path to your sitemap:
Sitemap: http://example.com/sitemap_location.xml
Or you can submit the sitemap to Google using Search Console. Google has many guidelines for image publishing, which may help your website rank higher on SERPs. In addition, you can use Google sitemaps to give Google more information about the images on your website, which can help Google find more of your images than it would on its own.
As a Shopify merchant, you’ll get an automatically generated sitemap that includes your product images. This means that images on your product pages, and any other important images used in your blog or collections, are made discoverable to search engines through your sitemap. This improves the chances your images will appear in search results and drive more traffic to your website.
Shopify updates the sitemap automatically whenever new pages or products are added, or existing ones are removed. So you never have to manually create or update your sitemap.
Specialized image CDNs provide image transformation features so that you only have to upload one high-quality image, and they will resize, reformat, and cache them based on each request.
With Shopify’s image CDN, file size is automatically optimized when you upload your image. The change in file quality isn’t noticeable to the human eye but will improve page load time. The CDN also automatically detects which file formats are supported on the client side and offers dynamic editing, which allows you to crop and transform your image without losing the original file.
Shopify merchants get access to a professional services team to help improve your website speed, as well as conversion rate and search engine optimization.
The entire point of optimizing images is to help increase your bottom line. We’ve talked about reducing file sizes and getting the search engines to index your images, but what about testing images to see what converts more customers?
Now that you know some image optimization best practices, let’s look at some image optimization tools and plug-ins you can use for your website.
Note that if you’re on Shopify or use a specialized image CDN, you do not need to use these tools. The one exception is SVGOMG—most image CDNs do not offer optimizations for SVGs.
Squoosh is an easy-to-use web-based app for image compression. Simply drag and drop your image into the tool and pick from optimized image formats like JPEG XL, WEBP, PNG, and more.
TinyPNG is another popular image optimization tool on the web. It uses smart lossy compression techniques to reduce image file size for your web page (WEBP), JPEG, and PNG files.
You can shrink images for your apps or store, plus shrink animated images. It focuses not only image compression, but also offers API integration and developer tools to integrate TinyPNG into custom software solutions.
TinyPNG’s API resizes images for thumbnails automatically, removing any unnecessary parts and adding more background. If you run your website on WordPress, it’s available as a plug-in.
SVGOMG is another simple image optimization tool. It gives several options to clean and minify your SVG files. Simply upload or copy the source of your SVG to start. You can play with the various controls and create an identical image, but with less weight than the original.
Optimizing your images is essential to running a successful online business. It not only enhances the look of your products, but also helps to create a smooth shopping experience and get you found online.
An ecommerce platform like Shopify automatically delivers your images in the best format possible to viewers, so you can increase sales and grow your business online.
The best way to optimize an image without losing quality is to serve the right image size using the right image format for a given situation. You can use manual tools like the ones listed in this article to generate your files along with writing the correct HTML for the browser to serve them. Or, use a specialized image CDN like on Shopify to automatically convert and deliver top-quality images on any device.
Squoosh and TinyPNG are some of the best image optimizer tools available. They are both web-based tools that offer a range of format options, like JPG and PNG images. If you have a more complex SVG, use SVGOMG to make it smaller.
You do not need to optimize images before you upload them on Shopify. If you do, sometimes this can result in a poor quality image that leads to lower conversions and more returns. Shopify’s CDN automatically compresses images at a quality setting that is better for ecommerce. Your theme code should be written using the Liquid image_url and image_tag to automatically take advantage of many responsive image features.
The newsletter for entrepreneurs
Join millions of self-starters in getting business resources, tips, and inspiring stories in your inbox.
Unsubscribe anytime. By entering your email, you agree to receive marketing emails from Shopify. By proceeding, you agree to the Terms and Conditions and Privacy Policy.
popular posts
popular posts
2023-11-08
2023-09-01
2023-12-05
2023-11-09
2023-09-20
2023-11-23
2023-12-02
2023-11-06
Unsubscribe anytime. By entering your email, you agree to receive marketing emails from Shopify. By proceeding, you agree to the Terms and Conditions and Privacy Policy.
Learn on the go. Try Shopify for free, and explore all the tools you need to start, run, and grow your business.
Try Shopify for free, no credit card required.