category oscprofessionals - Blogs - How To Improve Shopify Speed: The Power of Shopify Image Optimization

How To Improve Shopify Speed: The Power of Shopify Image Optimization

By Bhavesha | July 29, 2022 | 9 min read

Your Shopify store’s visual appeal is crucial, but hefty images can drag down your website speed. Thankfully, image optimization offers a powerful solution, balancing stunning visuals with lightning-fast loading times. Discover how to optimize your Shopify images for Google Speed Insights (GSI) and reap the benefits of improved user experience, search engine ranking, and server efficiency.

What is Shopify Image Optimization?

Simply put, it’s about shrinking your image file sizes without sacrificing quality. Through compression and resizing techniques, you provide smooth website navigation and a delightful shopping experience, without compromising visual impact.

Read this Blog and Find:- Guide on Image Optimization

Benefits of Optimizing Your Images

  • To improve website speed
  • Improve site user experience
  • Save server memory & reduce the load on the server
  • Reduce the file size
  • Maintain the quality of the image
  • Faster Loading

The Following Tips Will help you Optimize Your Images

Compress Image Tool of the Trade

This is the process of reducing the large size of an image. generally used to improve the page load speed of a web page.

There Are Two Types Of Image Compression: Lossless and Lossy
  1. The lossless compression method compresses an image by keeping the same image quality before the compression.
  2. The lossy compression method removes some parts of the image to reduce its weight further.
Compress Image Tool of the Trade
  1. How to compress the image file size
    A simple online tool offering both lossless and lossy compression is perfect for quick optimizations. See the magic firsthand: 43.7 KB before, 36.9 KB after!
  2. Photopea.com
    For more control and advanced editing, Photopea offers flexible compression options alongside other image manipulation features.

The Following Tips Will help you Optimize Your Images

Compress Image Tool of the Trade

This is the process of reducing the large size of an image. generally used to improve the page load speed of a web page.

There Are Two Types Of Image Compression: Lossless and Lossy
  1. The lossless compression method compresses an image by keeping the same image quality before the compression.
  2. The lossy compression method removes some parts of the image to reduce its weight further.
Compress Image Tool of the Trade
  1. How to compress the image file size
    A simple online tool offering both lossless and lossy compression is perfect for quick optimizations. See the magic firsthand: 43.7 KB before, 36.9 KB after!
  2. Photopea.com
    For more control and advanced editing, Photopea offers flexible compression options alongside other image manipulation features.

Example

Before: Size 43.7KB .jpg image

image1
image3

After Size 36.9KB .jpg image

image1
image2

Remember: compressing your images is just the first step. For a truly optimized Shopify store, consider:

  • Choosing the right image format: opt for JPEG for photos, PNG for graphics with transparency.
  • Resizing images to fit their display dimensions: No need for giant images displayed small!
  • Utilizing lazy loading: Only load images as users scroll, boosting initial page speed.

By taking these steps, you’ll supercharge your Shopify store’s performance, keeping customers engaged and conversions flowing. Imagine happy customers and improved search engine rankings – all thanks to the power of optimized images!

Demystifying Image Formats and Sizes: Shopify Supports Image Format

The Balancing Act: Choosing the Right Image Format for Your Shopify Store

In image format PNG is higher quality whereas JPEG is smaller. if any image in your HTML on Shopify should be a JPEG when possible (this will include product images).images that live in your CSS code should be PNG.

i. PNG

PNG images produce better quality images but come with larger file sizes. and use for:
  • Logos
  • Icons
  • Border

ii JPEG or JPG

You may lose image quality, but you can adjust the quality level to find a good output. and use for:
  • Products
  • Banners or slideshows
  • Pages and blog posts

iii. WebP

Choose lossless or lossy compression using this, the only image format supported Browser:
  • Shopify automatically serves images in WebP format on supported browsers.

Proper Size Images: Responsive Images

  • Identification for Responsive image

Tools like GT matrix, lighthouse, Page speed insights

image4
For each image on the page, Lighthouse compares the size of the rendered image against the size of the actual image. The rendered size also accounts for the Device Pixel Ratio. If the rendered size is at least 4KiB smaller than the actual size, the image fails the audit.
Specify multiple image versions and the browser will choose the best one to use

For Example

Before
<img src="cat-large.jpg">
After
<img src="cat-large.jpg" srcset="flower-small.jpg 480w,flower-large.jpg 1080w"sizes="50vw">
The <img> tag’s src, srcset, and sizes attributes all interact to achieve this end result.
  • Shopify Image Proper Size Solution
  • Proper Size Images Format

a)

<img class="grid-product__image lazyload"
data-src="{{ img_url }}"
data-srcset="{{ img_url }}"
data-widths="[180, 360, 540,720]"
data-aspectratio="{{ preview_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ preview_image.alt | escape }}"
srcset="data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='{{ 
preview_image.width }}'%20height='{{ preview_image.height }}'></svg>"
height="{{preview_image.height}}"
width="{{preview_image.width}}">

b)

{% capture image_100x %}{{ media.preview_image | img_url: '100x' }}{% endcapture %}
{% capture image_200x %}{{ media.preview_image | img_url: '200x' }}{% endcapture %}
{% capture image_300x %}{{ media.preview_image | img_url: '300x' }}{% endcapture %}
{% capture image_400x %}{{ media.preview_image | img_url: '400x' }}{% endcapture %}
{% capture image_600x %}{{ media.preview_image | img_url: '600x' }}{% endcapture %}
<img class="lazyload"
src="data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='{{ preview_image.width }}'%20height='{{ preview_image.height }}'></svg>"
data-src="{{ image_100x  | img_url: '100x' }} 100w"
data-srcset="{{ image_100x }} 100w,
             {{ image_200x }} 200w,
             {{ image_300x }} 300w,
             {{ image_400x }} 400w"
width="{{preview_image.width}}"
height="{{preview_image.height}}"
alt="{{ preview_image.alt }}">
  • If Images are in Hard Coded

Before

<img src="https://cdn.shopify.com/s/files/1/0257/4663/6884/files/decs_1.png?v=1591449954”>

After

<img
class="lazyload"
src="data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'></svg>"
data-src="{{ 'decs_1.png' | asset_img_url: '120x' }} 90w, {{ 'decs_1.png' | asset_img_url: '150x' }} 120w"
data-sizes="auto"
alt="decs_1.png"
width="80px"
height="80px"

Benefits of Optimizing Your Shopify Images

  • Turbocharged loading times: Keep customers engaged with a speedy shopping journey.
  • Enhanced user experience: Eliminate frustrating wait times and ensure seamless browsing.
  • Reduced server strain: Conserve bandwidth and resources, optimizing server performance.
  • Smaller file sizes: Faster loading equals reduced data usage for customers.
  • Uncompromised image quality: Maintain visually appealing product presentations.

Conclusion

Shopify image optimization is not just about aesthetics; it’s about strategic performance enhancement. By implementing these techniques, you pave the way for a thriving online store, one where beautiful visuals meet lightning-fast speeds. Remember, every millisecond counts in the competitive world of e-commerce. Start optimizing your images today and unlock the full potential of your Shopify store!

Looking For Expert Shopify Speed Optimization Services And Other Services Get In Touch

Latest Posts

2 Comments

  1. my blog February 27, 2023 at 9:05 pm

    Greetings I am so glad I found your blog page, I really found youu
    by error, while I was searching oon Aol for something else, Anyhow I am here now and would just like to say cheers for a tremendous post and
    a all round exciting blog (I also love the theme/design),
    I don’t have time to read it all at the minute buut I have book-marked it and also
    added your RSS feeds, so when I have time I will be back
    to read a lot more, Please do keep up the excellent work.

  2. Lauren Rodriguez June 1, 2023 at 11:27 am

    I have read your blog on How do I improve image quality on Shopify. It was very interesting and helpful.

Leave A Comment