Image Optimization For Shopify: Best Practices for SEO

[vc_row][vc_column][vc_column_text]If you run a Shopify store you know that images are a huge priority.  You have to have them to show off the products and of course, you need them to break up all the text so your website looks more appealing.  What is image optimization anyway and why is image optimization for Shopify important?[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”What Is Image Optimization?”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Image optimization is about reducing the file size of your images as much as possible without sacrificing quality so that your page load times remain low. It’s also about image SEO. That is, getting your product images and decorative images to rank on Google and other image search engines.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Image Optimization For Shopify” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_column_text]

1. Name your images plainly. Be descriptive
2. Alt tags need to be optimized and relevant.
3. Image dimensions should be consistent and not oversized.
4. Reduce the file size of your images.
5. Choose the right file type.
6. Optimize your thumbnails.
7. The other or “decorative images.”

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Name your images plainly. Be descriptive” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes” el_id=”One”][vc_column_text]When you add in your product images it is so easy to just leave the default ‘SPK-2015a’ or however, your camera decides to title them as it saves.

When it comes to search engine optimization or SEO as it’s called, it’s highly important to use relevant keywords to help your webpage rank on search engines. Creating descriptive, keyword-rich file names is vital for image optimization. Search engines not only crawl the text on your webpage, they also crawl your images. More importantly the 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 white hooded sweatshirt.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, clothing shoppers may search terms like:

• • hooded sweatshirts
  • sweatshirts
  • White Hoodies

Look at your website analytics to see what keyword patterns your customers follow. 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, just be sure to use relevant, helpful keywords when naming your images (i.e. try to be descriptive).[/vc_column_text][vc_column_text css=”.vc_custom_1617770479835{margin-top: 25px !important;margin-bottom: 25px !important;background-color: #1e73be !important;}”]Check out my Speed Me Up Package for Shopify.  I can pull any Shopify website into the 90’s in just a couple of days.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Alt Tags Need To Be Optimized And Relevant” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes” el_id=”Two”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]What is an Alt attribute anyways? Can’t we just leave that blank? Alt attributes are the text that will be shown in case the image cannot be rendered for some reason. They’re also used for web accessibility and search engines use them for categorization. If you hover over the image, you will see the alt attribute text (depending on your browser settings).

The alt attribute also adds a lot of 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 the search engines. As of 2021, using alt attributes is probably one of the best ways for your e-commerce products to show up in Google image and web search.

Let’s take a look at the source code of an alt attribute.

<img src=”https://example.com/images/white-hoodie.jpg” alt=”white Hooded sweatshirt” width=”240″ height=”300″>

The number one priority when it comes to image optimization for Shopify is to fill out each alt attribute for each product image on your site.

Here are some simple rules for alt attributes:

• • Describe your images in plain language, just like you did for your image file names.
  • If you sell products that have model numbers or serial numbers, use them in your alt attributes.
  • Don’t stuff your alt attributes full of keywords (e.g. alt=”white hooded sweatshirt major discount on sale”).
  • Don’t use alt attributes for decorative images. Search engines may penalize you for over-optimization.

I cannot stress enough the importance of this.  This is the number one way to get traction in the search engines.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Image dimensions should be consistent and not oversized.” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes” el_id=”Three”][vc_column_text]It’s common practice to have many product images in various angles. Going back to the white hooded sweatshirt example, you wouldn’t want to show just one shot of the hoodie, especially if you’re trying to sell it. It would be in your best interest to show shots of:

• The back.
• The hood.
• The arms.

The smartest way to capitalize on these extra photos is to fill out your alt attributes. And the way you would do that is by creating alt attributes for each product shot. The trick is since you have multiple images for the same product you can get unique in naming them. For Instance:

• White Hoodie Front thread view.jpg -> using the alt attribute of: alt=”White Hoodie front thread count”
• White Hoodie sleeve cuffs.jpg -> using the alt attribute of: alt=”White Hooded Sweatshirt sleeve cuffs”

The key here is to add descriptions to your base alt attribute so that potential searchers land on your website. If you do the extra work, Google will reward you with searchers.

A word of caution on providing larger images

The most common thing I run across when adding product images from clients is the image size.  Bigger is not always better.

Whatever you do, don’t place the largest image on your webpage and simply shrink the dimensions via the source code. This will increase your page load time because of the larger file size associated with the image.

For best SEO practices, it is smarter to make it a smaller image and provide the option to view a larger image in a pop-up or on a separate webpage. Shopify is good in this way because it tells you what the recommended image size is for each section.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Reduce the file size of your images.” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes” el_id=”Four”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Did you know:

• Nearly 50{31b1f608e14552a4c8e4ca888d8bdca51f78d1fa84f7891c967157bdcab614d3} of consumers won’t even wait 3 seconds for an ecommerce site to load.
• …and, globally, the average page load time is actually increasing.
• Amazon found that if their pages were to slow down by just one second, they would lose $1.6 billion a year.
• Google uses page load time as a ranking factor in their algorithm.

Think about it: a 1-second delay in your website’s load time decreases your conversion rates by 7{31b1f608e14552a4c8e4ca888d8bdca51f78d1fa84f7891c967157bdcab614d3}. Your website’s speed is directly connected to your conversions and revenue. So, if your site loads in greater than a couple of seconds because your images just don’t seem to render. Well, you can kiss that prospective customer goodbye!

So, what can you do?

When a customer arrives on your site, it can take a while to load everything, depending on how large your files are. The larger the file sizes, the longer it takes a webpage to load. Let me repeat that because it’s so important.  The larger the file sizes, the longer it takes a webpage to load.  “My site loads in 5 seconds why so long?”  Upon inspection, the page size is over 27,000kb.

If you can decrease the size of the image files on your webpage and increase page load speed, less people who visit your site will click away.

It is recommended to use JPG, or PNG.  GIF and SVG are also acceptable but Shopify does not allow SVG without some custom coding.

How large should image files be?

For product images, a good rule of thumb is to try to keep your image file size below 70 kb. That can be difficult at times, especially for larger images.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Choose The Right File Type” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes” el_id=”Five”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]There are four file types that are used to post images to the web: JPEG, GIF, SVG and PNG.

JPEG (or .jpg) images are the most common and oldest type. JPEG images can be compressed considerably, which results in quality images with small file sizes. It’s not uncommon to use this file type with low image quality and still look good.  Most JPEG images can be as low as 30 or 35 image quality and still look fantastic on the web while keeping size small.

GIF (.gif) images are of lower quality than JPEG images and are used for animation.  Logos used to be popular in this format.  It is good to note here that GIF images are not as popular anymore as they are usually larger sized and bulky.

Regarding image optimization for Shopify, GIFs are great for those plain, simple images on a webpage (which include just a few colors). But for complex images and photos, GIFs are not always as attractive. This is especially true for large images.

PNG images are becoming more popular as an alternative to GIFs. PNGs support many more colors than GIFs and they don’t degrade over time with re-saves, like JPEGs do. Even though the PNG file type is starting to be used more often, the file sizes can still be much larger than JPEG images.

Here’s an example, where the image file size has been held constant at 24 kb for all three file types to show image quality:

As you can see, JPEG is the clear winner here. GIFs and PNGs must degrade in quality in order to remain at the same low file size.

Here are some tips to remember when choosing file types:

• In most cases in e-commerce, JPEGs will be your best bet. They provide the best quality for the smallest file size.
• Never use GIFs for large product images. The file size will be very large and there is no good way to reduce it. Use GIFs for thumbnails and decorative images only.
• PNGs can be a good alternative to both JPEGs and GIFS. If you are only able to get product photos in PNG format, try using PNG-8 over PNG-24. PNGs excel as simple decorative images because of their extremely small file size.

SVG is the newest format.  It is basically taking the image and rendering it in small sections almost through css.  The images are extremely small, can resize easily without any degradation.  You will need special software to make the SVG format and a developer to add them to your site as the format is not accepted in Shopify yet.

As SVG becomes more popular I expect to see it added as a file type to upload down the road.  I personally like using SVG for icons.  Doing away with the need for a ton of smaller images that take precious loading time.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Optimize your thumbnails.” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes” el_id=”Six”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Almost all Shopify sites will use thumbnail images, especially on product pages. They quickly showcase all the different angles of a product without taking up a lot of space.

Thumbnails are great, but be careful; they can be killing your site speed and SEO.  Thumbnails are usually presented at various points during a person’s shopping experience. If they are preventing your product pages from loading quickly, you are probably losing potential customers.

So, what can you do?

• Make your thumbnail file sizes as small as possible. It may be worth letting quality slide in favor of a lower file size here. Remember, the cumulative impact of your thumbnails will have a huge impact on your page load time.
• Vary your alt attribute text as to not duplicate text that you would use for the bigger versions of the same image. As a matter of fact, make your alt text wildly different. The last thing you want is the thumbnail being indexed instead of the larger image. It’s these little things for image optimization for Shopify that will help you stand above the rest.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”The other or decorative images.” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes” el_id=”Seven”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Websites often have an assortment of decorative images, such as background images, buttons and borders. Anything non-product related can likely be considered a decorative image.

Although decorative images can add a lot of aesthetic appeal to a webpage, they can result in a large combined file size and slow load times. Therefore, you might want to consider taking a closer look at your decorative images so they won’t impair your website’s ability to convert visitors into customers.

You want to check the file sizes of all the decorative images on your site and use a template that minimizes file sizes.

Here are some tips for reducing the file sizes of your decorative images:

• For images that make up borders or simple patterns, make them PNG-8 or SVGs. You can create good looking images that are only a few hundred bytes in size.
• If possible, use CSS to create colored areas instead of using images. Use CSS styling as much as possible to replace any decorative images.
• Take a close look at that large wallpaper-style background image. Those can be huge files. Shrink them down as much as possible without ruining the image quality.

One trick you can use to eat away at your background image size is to cut out the middle of the background image and make it a flat color or even transparent. This can decrease the file size substantially.

Another great way is to limit these images.  Put a few spaced out on the page to make it look aesthetically appealing, properly sized in JPEG format.  remember the key is to keep the file size small.  So these images should also be less than 70kb in size.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Keeping beautiful photos functional

Now questions about your Shopify images won’t leave you tossing and turning for hours.

You know some image SEO strategies to get your product photos into Google image search results. You know how to fully leverage alt attributes. You know the difference between file types and when to choose each option.

Still, image optimization for Shopify is complex and we’ve just scratched the surface, so feel free to leave any questions you might have in the comments below.[/vc_column_text][/vc_column][/vc_row]