How To Improve Shopify Speed : Image Optimization

1. Do you want to run your page faster?

Shopify is the e-commerce platform where everything works smoothly in the beginning.Is your page loading slow or pages taking too much time to load after adding many products and doing tasks in your store. Are you facing this issue?
Don’t worry !
Here, we will tell you about the loading page faster is a why important factor :-

1.1 Google like faster pages:

There is no secret that slow loading pages mean you’re missing hundreds of your sales and many conversion ratios.
To know more about the statistics of loading pages go on link given below – https://www.ezoic.com/page-speed-statistics-2020/
One of the most important element that Google uses to rank is – Page Load Time.

1.2 To increase Conversion Ratio:

A faster site means good sales & a conversion ratio. A one second delay to loading the page is to 11% drop in page views, and 7% fewer conversions.
Simply, it means if a customer comes on your site and the page loads slowly, hence the customer will go on another site.
It just may be a delay of only one second, which also includes the effects to your regular customers.
Do you want to increase your conversion ratio as well as sales and improve your search rankings?
And to achieve this the best way for you is Image Optimization.

2. What is Image Optimization?

Images are the most important component for your e-commerce store. Image optimization is the process of delivering the images in the right format, dimensions, size and resolution so that your page load times remain low.
So, image optimization actually performs by compressing images so the size of the file gets smaller (means they don’t load slowly ).
Adding attributes to the images so Google can understand faster what the image shows which will also help you for the Google ranking.

3. How to perform Image Optimization in easy steps.

So, if you want to perform image optimization here, are steps :-
  • Step 1- Reducing the size
  • Step 2 – About thumbnails facts
  • Step 3 – Utilize Picture Tag
  • Step 4 – Apply lazy loading images
  • Step 5 – Make a use of sprite images
  • Step 6- Know about shopify inbuilt image optimization
  • Step 7 – Image CDN

3.1 Reducing the size

Observe this :-
  • To load an ecommerce site closely 50% of customers don’t wait for 3 seconds.
  • Overall the average loading time of the page is continuously, increasing.
Which means your page load speed is low then it can affect your conversion ratio – which is not a good point. Then the first thing is :-
How you start to compress images to get your page load speed as fast as possible.
Remember, Google’s algorithm uses page load time as a Ranking factor.
So, How do you reduce the file sizes?

By Manually using Photoshop :-

When a customer comes to visit your site, it takes a little time to load everything which depends on how large files you used. More the larger files – it takes more time to load. To raise page load time you can decrease the size of image files by using photoshop.
In this you can manually reduce file sizes using Adobe Photoshop. It is a process of all about changing the amount of image data.
You can reduce the size of an image by using the “Save for Web” instruction in Adobe Photoshop. Keeping a watch out on image quality you have to fix the image to the smallest file size.
  • Quality: This is at the upper side, right- hand area (i.e. 100).
  • File format: Search this at upper area, (i.e. JPEG).
  • Optimization: The checkbox in the top, right-hand side (i.e. Optimized).
  • Color: Search this checkbox at, right-hand side (i.e. Monitor color).
  • Downsizing and sharpening: Look out this in the bottom, in right- hand area (i.e. W: and H:).
  • Expected file size: Search this in the bottom, left corner (i.e. 31.11K).

By Without using Photoshop :-

There are a lot of image compression tools, other than photoshop, you can select one which says it follows Shopify in terms of picture quality and file type.For example :- There is a picture editing tool, called Photoshop Express.
You can install the tool which you have chosen and it will automatically optimize your images then upload them to your Shopify page
Do you know, How large you can keep your image file?
Keep your image file size below 70 KB for ecommerce site images you have to maintain this protocol. This will be difficult for the bigger image.

3.2 About Thumbnails facts

You think thumbnails are good because every ecommerce site is using thumbnails images. But no, they are a Destroyer. You want to know- How? Your speed of the loading pages
Thumbnails are displayed on your screen at the very supreme place that is during the buying process.By which you can lose your future customer if thumbnails are stopping category pages to load fast.
Then what can you do- Create the smallest size of thumbnail images. You can use one slide in the replacement of a smaller file size. And do not give the same alt attribute text to the bigger version of that image.
Keep in mind – Your thumbnails will have a great impact on your page load time.

3.3 Utilize Picture Tag

How your site images will get displayed on each view port or every device of your customer.

By utilizing the Picture Tag :-

The picture tag is an HTML5 element that is used in the creation of responsive websites. It is used to display images in order to adapt to different devices’ screens.
The many different display sizes,image formats, and viewports where displaying images on smartphones, tablets and desktop are not always the same.The picture tag allows the browser to choose an image so that it is displayed correctly on different sized displays.
  • A mobile browser selects a version that suits its type of device and display size.
  • A browser on a desktop PC chooses an image that fits the much larger screen.The picture tag acts as a container. It does not load the image to be displayed, but tells the browser which image they have to load for that particular view port.

Example:-

Where,
  • src – The srcset attribute provides the options to the browser so that it can decide on a suitable image to display.
  • jpg – type of image

3.4 Apply Lazy Loading Images

How lazy loading of images on shopify makes your site faster?
Consider, A one second delay in mobile load times can decrease mobile conversions by upto 20%. So, to raise the conversion ratio each website of an online store needs to load quickly.

What is Lazy Loading?

Lazy loading is an optimization technique that consists of the delay in loading of images or in simple words images load as the user scrolls down the page, instead of during the initial page load.
Lazy loading improves the speed and performance of your site and also makes the customer think that your site is loading faster.

How does lazy loading work?

Let’s take a look at the collection page of your store, where you can show up to 40 products per page. Consider this minimum 40 product images without counting header images,logos or icons. So, automatically your page load time will increase because it includes a lot of content.
Your page will start to load all images, but it gets complex, each time the user won’t look up to every image so it is not required for you to load all images.Loading the all 40 products will take a time –
As not every customer will see all products they are interested to look up at only a few product images. So, lazy loading will display only 10 product images before going to the product page

Why is lazy loading great?

  • The page loads quickly !
  • Best rankings means faster pages.
  • Faster pages = better conversion rates

What images should you lazy load?

  • Collection page images
  • Home page images
  • Product related images
  • Images of Blog

3.5 Make a use of Sprite Images

Your page takes too much time to load because it contains many images like header image,corner images,logo, menu icons etc. So, loading all these images at one time your page loading speed becomes slow.To stop this issue make a use of Sprite Images.

What is Sprite Image?

Sprites which are made up of combining small images into one larger image.Consider, you select seven images to get displayed on your main page then the browser will individually load all images which takes time.
Sprite image is just only one image which consists of all these seven images and by displaying this one image it will also reduce page load time.

Advantages of Sprite images

  • The major impact on reducing the response time which makes the web page more responsive for the customer.
  • Increases page load time
  • Caching a single file

3.6 Know about Shopify Inbuilt Image Optimization

Speed up your store using Image Optimizer
Your site speed plays an important role towards your customer. A quicker loading storefront makes users happier and increases the conversion rate. In case to create images for all resolution is not achievable then you can use this approach that is inbuilt image optimizer.

Image Compression by Image Optimizer

Using shopify inbuilt image optimization a developer can specify image dimension and shopify will generate dimension specific images. The Image Optimizer automatically compresses images to minimize file size without decreasing the quality of image.
Considerably, it reduces the time needed for images to post over the internet or downloaded.The Image Optimizer automatically sets the alt text by using simple templates for images which also helps in Google ranking.

Content Delivery Network

A Content delivery network is a group of servers or is a system that distributes servers ( network) in different locations. Small CDNs may be situated in a single country and large CDNs are across the world.
For example :- The images specially, product images, documents, videos etc which are loaded by visitors’s browser the copies of these all are held by a network.
When a visitor’s loads a page on your website, the CDNs provide the media from the server which is closest to them geographically. The servers in the network are spread around across different countries.

What is Image CDN?

An Image CDN is a group of servers that are placed around the world. These servers detect devices and cache optimized images. When an equivalent device requests an image again, the image CDN gives response fastly with having cache optimized images.
An image CDN serves 50% faster web page download time and quick response to user’s request.

Advantages of Image CDN

  • Minimize loading time of your business website.
  • Secure servers to hold your data
  • Easily your website deals with uncacheable content.
  • The networks for content distribution (CDNs) are suitable for storing images and other media data. They will speed up the loading of your website and help solve bandwidth problems.

For Further Details or Additional Information

OR

If you want to know more about our Services