Shopify Image Optimization & Compression Guide
Shopify image optimization and compression are two of the most important aspects of image file management. By optimizing and compressing your images, you can save space and bandwidth, improve performance, and make your website more responsive.
Large images on your Shopify store can cause slow page loading times, frustrating visitors, and leading to higher bounce rates. They can also take up valuable storage space, costing you money.
This article will explore why image optimization and compression are important, how to optimize and compress your images on Shopify manually and automatically, and the best practices for image file management.
Understanding Image Optimization & Compression
Image optimization is the process of reducing the file size of an image without affecting its quality.
Compression, on the other hand, is a form of data reduction where blocks of identical data are replaced with a reference to that block. This reduces the amount of space required to store the file and can also reduce the amount of bandwidth needed to download it.
There are two main types of image compression: lossless and lossy. Lossless compression reduces file size without any loss in quality, while lossy compression sacrifices some quality in order to achieve a greater degree of compression.
Both image optimization and compression are important for reducing the size of your image files, but they serve different purposes.
Image optimization is typically used to reduce file size so images can be loaded faster, while compression is used to reduce file size for storage or transmission.
When combined, image optimization and compression can help you achieve the smallest file size possible without sacrificing quality.
Why Optimize & Compress Images on Shopify?
There are several benefits to optimizing and compressing your images on Shopify:
1. Improve Page Loading Speed
The loading speed of your pages is one of the most important factors in determining your website’s success. It impacts your search engine ranking, conversion rate, and overall user experience. According to Google, the ideal page loading time is two seconds or less.
Every second after that leads to a decrease in traffic and conversions. In fact, a one-second delay in page loading time can result in a 7% drop in conversions.
2. Save Storage Space & Money
Images can take up a lot of storage space, especially if you have a large product catalog. By optimizing and compressing your images, you can save space on your server and reduce your hosting and overall Shopify SEO costs.
3. Reduce Bandwidth Usage
The larger the file size of an image, the longer it will take to download. This can result in higher bandwidth usage and slow page loading times, especially for visitors on mobile devices.
By using the right Shopify blog featured image size and format, you can minimize bandwidth usage and improve page loading times.
4. Improve SEO Ranking
Google’s algorithm takes page loading speed into account when ranking websites. So, by optimizing your images and reducing their file size, you can improve your search engine ranking and drive more traffic to your Shopify store.
5. Enhance User Experience
Slow-loading pages frustrate visitors and lead to higher bounce rates. Optimizing your images can improve your website's user experience and keep visitors engaged with your content. Adding image alt text Shopify SEO to each image further boosts the accessibility by ensuring those using screen readers can still understand your content. This can also help improve your search engine ranking.
How to Optimize & Compress Images on Shopify
Now that you know the benefits of image optimization and compression, let’s look at our comprehensive process:
Compress
Shopify automatically serves WebP images to browsers that support the format. WebP lossless images are 26% smaller in size than their PNG counterparts, while lossy WebP images are 25-34% smaller than JPEG images at an equivalent SSIM quality index.
While this is a great start, you can further reduce the file size of your images by compressing them. Aiming for a maximum file size of 78KB is a good rule of thumb. However, always consider the image's quality and whether further compression will impact its quality.
There are two ways you can compress images:
1. Automatic - Use an Image Compression Tool
There are many free online image compression tools available. These tools allow you to upload an image and compress it without losing quality. We use CrushPics. Apart from its lossless compression feature, it also has a bulk optimizer to help you compress multiple images at once. This allows us to keep the bulk of an image's quality while drastically reducing its file size.
We then upload compressed images to imagecompressor.com. This tool further reduces the file size of images without impacting quality.
2. Manual - Use Photoshop or Similar Program
Manually compressing images in Photoshop or any other program is a bit more involved, but it gives more control over the process. You have the option to compress images for the web or devices, as well as choose the level of compression.
The goal when using these programs is to alter the available data in the image file to reduce its size without impacting quality. This can be done by adjusting the bit depth, color profile, and resolution. You can change the pixels per inch (ppi) or the image size to reduce the number of pixels in an image, which will also reduce its file size.
Remember, you want to keep the quality as high as possible while reducing the file size. Experiment with different settings until you find the perfect balance.
When manually compressing images, we always save a copy of the original file first. This way, we can go back and make changes if the image quality is impacted too much.
Make a List of Keyword Variations
After we have a compressed image, we make a list of keyword variations that accurately describe the image. This helps us determine the best file name for the image and find the right keywords to use in our alt text.
Keyword variations are the different terms people may use to search for an image. For example, if your store sells shoes, your main keyword may be “best running shoes.” But someone searching for “shoes for running” or “running footwear” is looking for the same thing.
Therefore creating a list of keyword variations helps ensure we don't miss any potential search terms and that our images are properly optimized for search engines.
Change Filename to One of Keyword Variations
A filename is the name of an image file. It's the text that appears after the last slash in the URL. For example, in this image URL https://www.yourshop.com/images/shoes.jpg, “shoes.jpg” is the filename.
When it comes to optimization, filenames are important because they give search engines context about an image. Therefore, it's important to choose a filename that accurately describes the image and includes one of your target keywords.
For example, if you have an image of a pair of black running shoes, a good filename would be “black-running-shoes.jpg.” This tells search engines exactly what the image is and includes a relevant keyword.
If you have an image with a generic filename like “IMG_1234.jpg,” we change it to something more descriptive. Not only will this help search engines better understand your images, but it can also help improve your click-through rate (CTR) from image search results.
A CTR is the percentage of people who click on your result out of the total number of people who see it. So if 100 people see your image in search results and 10 people click on it, your CTR would be 10%.
In general, the higher your CTR, the better. And using descriptive filenames is one way to improve your CTR from image search results. Our ultimate goal is to get as many people as possible to click through to our website from image search results.
Add Filename (Keyword Variation) as an Alt Tag as Well
An alt tag is a piece of HTML code that describes an image. The code looks like this:
<img src="shoes.jpg" alt="black running shoes">
In this example, “black running shoes” is the alt tag.
Alt tags are important for two reasons. First, they help search engines understand what an image is about. Second, they provide context for people who can't see the image. This includes people with visual impairments and those who browse the web with images turned off (to save data).
When writing alt tags, we include the keyword variation we're targeting for the image. This is a good opportunity to use keyword variation that may be too long or awkward to use as a filename.
For example, if we're targeting the keyword “best running shoes for women,” we may use a filename like “women-running-shoes.jpg.” But for the alt tag, we can write “best running shoes for women.”
This helps us include all the relevant keywords without impacting the user experience. After all, filenames are part of the URL, so they need to be short and concise. Alt tags, on the other hand, are only visible to search engines and users who can't see the image. Therefore, we can take advantage of the extra space to include more keyword variations.
Best Practices for Shopify Image Optimization & Compression
Use a Descriptive Caption
A caption is a piece of text that appears below an image. It's a good opportunity to provide even more context about an image and include additional keywords.
When writing captions, we focus on accurately describing the image and using relevant keywords. However, we also ensure the caption is readable and doesn't sound like keyword stuffing.
For example, if we have an image of a customer wearing one of your black sneakers, a good caption might be “A customer wearing our black sneakers.” This accurately describes the image and includes the keyword “black sneakers.”
Use the Right File Type
The right file type can make a big difference in image quality and file size. JPEG and PNG are the three most common image file types for Shopify stores. Here's a quick overview of each file type:
JPEG: A JPEG (Joint Photographic Experts Group) image can have up to 16 million colors and is best suited for images with lots of colors (e.g., photos). JPEGs are also lossy, which means they lose some quality each time they're compressed. However, the loss is usually imperceptible to the human eye.
PNG: A PNG (portable network graphics) image is a lossless compression image format, meaning that there is no loss of quality when the image is compressed. PNG images are often used for web graphics because they can be displayed with transparency (clear backgrounds).
Shopify recommends the use of JPEG for product images, blog posts, and pages. For images with transparency, such as logos, borders, and trims, they recommend PNG. We ensure PNG images are in your site's CSS, not in HTML, to make the page load as quickly as possible.
Use Original Images
We don't believe in using stock images. Instead, we recommend using original images whenever possible. This helps your store look unique and professional.
Before using any images, we consider these factors:
- Purpose: Is it a decorative image, or is it meant to sell a product? Will visitors zoom the image for details or just glance at it?
- Relevance: Is the image relevant to the product or page? What message does it convey?
- Placement: Where will the image be placed on the page? Will it be used as a hero image or background image? Will it be the only image on the page?
Depending on the answers to these questions, we may request specific images from you or your team. For example, if an image is meant to sell a product, we may request close-up photos of the product from different angles.
Lazy Load Images
One of the best Shopify plus SEO practices for image optimization is lazy loading. Lazy loading is when images are only loaded as they're needed. For example, if a visitor scrolls down to the bottom of a page, images below the fold (i.e., those that are not visible on the screen) will be loaded.
This is different from pre-loading all the images on a page, which can slow down the page load time. By only loading images as they're needed, we can improve the page load time and reduce bandwidth usage.
We use a wide range of methods to lazy load images. The method we choose depends on the type of image and where it's placed on the page. Every store has unique needs, so we tailor our approach to meet them.
Use Shopify Image Optimization Apps
Shopify has a wide range of apps that can help you optimize your images. These apps can help you resize, compress, and lazy load your images.
While many great apps are available, we recommend using only one or two to avoid slowing down your site. We can help you choose the right apps for your store and ensure they're properly configured.
Looking to scale your organic traffic?
While image optimization is important, it's just one part of a comprehensive SEO strategy. To rank higher in search and get more traffic to your store, you need to focus on many factors, including website speed, link building, on-page optimization, and other technical SEO factors.
At GoldenWeb, we perform a thorough SEO audit on your store and identify over 285 SEO and CRO growth opportunities. These opportunities are based on data from your store and your competitors. We then prioritize them and provide you with a step-by-step plan to implement them.
Our approach is based on data and has been proven to work time and time again. To help you understand what we do, we provide a free mini-audit. This audit includes a high-level overview of your store's SEO health and some recommendations for improvement. Book yours today to get started!
RomaDesignerJewelry.com
"GoldenWeb’s work has been amazing for us.
We already had a decent base with content and structure, but their work has positioned us to continue to make gains in very competitive areas."
ShopSolarKits.com
"Benjamin and his team have been great to work with, have proven themselves with a ton of results.
Benjamin goes out of his way to provide value in all areas of the business as he's an operator himself."
Copyright 2024 GoldenWeb LLC. All rights reserved.
Read some of our most popular blog posts...