Images are one of the most important components of every online store and website., and they constitute in most of cases more than 50% of a website file size, especially for e-commerce stores.

image optimization is then important to give more speed to your Shopify store, but how to do it professionally?

Before enumerating some Technics to compress and resize images for better speed optimization, let’s list first the 4 reasons why images are slowing down Shopify loading time.


4 Important Reasons Why Images Are Slowing Your Online Store Down:

  1. Heavy images: image in PNG or BMP are take much more space than JPG, GIF or JPEG, and therefore it takes a long time to load up. If you’ve got too many of large size images on your Shopify store, you’re just adding more load time for every picture.
  2. Images missing caching information: image caching makes a real difference for your users. browser will have to load images each time your visitors land on your website
  3. Image Scaled using CSS: if you have an image that has an orignal size of 500 x 500 pixels, but you have scaled it down to 50 x 50 pixels using HTML, LIQUID or CSS, your browser must load ten times more than necessary.
  4. Text graphics: This is another potential issue missed by many online store owners. instead of using a simple font overlay an image, some Shopify store owners use photo editing tools to write their text directly on an image and save it as an image itself

Solution

Shopify allows you to add several image formats:

  • JPEG, JPG or Progressive JPEG
  • PNG
  • GIF

While doing images compression, you have to keep literally the quality of the images. Some apps on Shopify can do the job to save at least 50% of the original image size. Just after replacing all the images with the optimized ones, the page load time automatically improve.

If your theme is resizing images automatically using CSS, for example : a blog post featured image is set to be 900x500px, try to upload an image which has already this size, this way you’ll gain more time in terms of speed.

In order to avoid text graphics, generally in homepage sliders, try to code a snippet to make a text over a slider image, this way you’ll not only give much more speed to your website, but also add some important keywords for SEO as the text over the slider images isn’t an image itself and can be read by search engines.

Related Posts

  • Google announced in July 2018 a new ranking algorithm designed for mobile search. Google called it the “Speed Update,” so the online stores that delivers the slowest experience to users will be drastically impacted by this update. Beyond speed optimization is now one of the most important factors in SEO,…
    Tags: shopify, speed, website, images, time, load, store, image
  • Your product page is one of the most important page after Homepage, you should have a stunning design for better user experience, but also a structured data for Robots (search engines), so how to build a product page to increase its visibility in Google, Bing, Yahoo... ? After having made…
    Tags: shopify, time, store, seo, speed
  • When using speed tools like Gtmetrix, you certainly came across "The following images served from shopify.com should be combined into as few images as possible using CSS sprites." In this article we'll show the advantage of using CSS sprites and how to fix this speed problem. What is the advantage…
    Tags: speed, images, image, website, shopify, size, time