How to optimize Shopify images for performance
Image optimization is a crucial part of any Shopify store’s success plan. Images use more bytes than text, so Shopify image optimization is a key component to web performance and SEO (search engine optimization)planning.
To help you determine the best ways to optimize your Shopify images, we’ll discuss why it’s so important for ecommerce. Later, we’ll discuss Shopify optimization techniques to help you win more customers.
Why should you optimize images on your Shopify site
Shopify image optimization—a definition
Image optimization means taking an image and reducing it to the smallest size possible while still retaining resolution and overall image quality. When an image has been optimized correctly, it remains sharp and visually appealing even though unnecessary parts have been compressed to make it smaller in dimension and file size.
To achieve this, photographers or designers use photo editing programs/apps with features like file compression.
Optimized Shopify images can help you get less bounce, more bucks
Image optimization helps SEO by speeding upload times, making it easier for would-be customers to find products on your website, and providing a better overall web experience. The best way to know if your website needs optimization is by reviewing your website performance metrics on a regular basis.
How to tell if your Shopify could benefit from image optimizing
If website visitors are leaving after a few seconds or a single page view, it may be because your pages are loading slowly, a sure sign that you need to optimize your Shopify images. According to one2019 agency survey, website conversions drop almost 4.5% with each additional second of load time. The longer it takes for your images and text to appear, the more likely potential shoppers are to leave your Shopify website. The goal of most websites is to load within a couple of seconds though this rate may vary depending on what kind of product you offer and website size.
Some web metrics you’re probably already familiar with include:
● Bounce rate - Google defines bounce rate as the percentage of people who leave your Shopify website after viewing just one page.
● Load time - the amount of time it takes for your page to completely load
● LCP or largest contentful paint - similar to load time, LCP measures the amount of time it takes for the largest block of image or text on your site to become visible.
Shopify, along with major search engine providers, and some third-party services will provide metrics and data to determine load times,bounce rate, and more.
Learning about Shopify image requirements like file formats, file size
Image formats used by Shopify
Shopify accepts several image file types or formats. But though you’re allowed to use a number of image file formats, some may take up more room on your ecommerce site causing it to load slowly or lag.
You’re probably familiar with the two most common file formats, JPEG (also known as JPG) and PNG. Shopify accepts these formats and others:
● JPEG or JPG (JPEG/JPG are smaller than PNG)
● Progressive JPEG (newer format, more web friendly than regular JPEG)
● PNG
● GIF
Shopify also supports WebP on some browsers. The format was released in 2018 by Google and is considered more web friendly.
File compression and optimizing Shopify images
If you’ve had an older smartphone or a small data plan, you’ve probably come across the problem of having photos and videos load slowly, if at all.
You can use file compression to makes image file sizes smaller,speeding up website load times.
5 ways to optimize Shopify images for better web performance
Shopify image optimization should be a part of your SEO planning from the very start. Here are a few basic tips.
1. Make good choices for product images
Choose good images for product photos – when possible, include multiple angles, like closeup or detail shots; the better the image quality, the moreinfo the customer has for their purchase decision process.
2. Use correct image sizes and formats
●You may need to change image format to optimize Shopify images.[1] .Just converting a Shopify image from a PNG to a JPEG/JPG will often result in an automatic decrease in image size. If you’re using a professional product photographer like Pophaus you can request the exact delivery formats and sizes you need.
● Shopify suggests using JPEG images.
● If you’re using GIFs switch to video instead; videos are smaller, faster
● Always use the smallest file size and image size possible
● File size refers to image MB or megabytes – Shopify allows up to 20MB file size
● Image size refers to dimensions (Shopify suggests 2048x2048px,and no less than 800x800px for the best quality/results)
3. Always test and measure performance after uploading new product images
● Regularly review LCP, bounce, load time, other metrics to see if Shopify page speeds increase/decrease and for other SEO planning.
● Mobile shopping is increasing on Shopify, other websites so check how your site looks on mobile as well as desktop screens.
● You can check page speeds and other results using various desktop tools and apps, as well as Shopify add-ons
4. Use ALT text correctly for web accessibility
● Use specific and descriptive ALT text. This text helps with website accessibility; it’s the content text-to-speech readers useto read aloud to web users.
● ALT text is also shown when an image doesn’t load or loads slowly, souse pertinent keywords to help your visitors.
● Search engines may also extract keywords from ALT text, so choose carefully.
5. Create descriptive image file names, other text
● Different than ALT text, your image file name isn’t seen by website visitors, however search engines use words in file names as clues to determine where web pages show in searches.
● Include useful text like product names, colors, pricing, and short USPs(unique selling propositions) near product images using captions or text boxes—the quicker customers find the info they’re looking for, the more likely they are to purchase.
●Avoid embedding keywords and other text in images. Search engines can’t read embedded text—use captions or text boxes instead.
Stunning Shopify product images is a snap with Pophaus
Get eye-catching product photography that willhelp your Shopify website convert. Contact Pophaus for striking product photography images you can use for Shopify and other ecommerce websites.
