How to Optimize Images to Speed Up Your Online Store

 In woocommerce web design and development, Wordpress Web Design

How to Optimize Images to Speed Up Your Online Store

People like fast loading websites, search engines like fast sites. Everyone on the Internet likes fast-loading sites.

As an eCommerce site owner, how can you easily improve the speed of your online store?

By optimizing all of your images for web.

Why is this important?

How do you get started, and what do you have to do? You’ll find answers to all of these questions below.

How fast should your site be?

  • 47% of people expect a web page to load in two seconds or less.
  • 40% of visitors will abandon a page that takes three seconds or more to load.

Website visitors aren’t waiting ages for a page to load, nor should they have to.

How can you find out the speed of your website?

There are a couple of free tools available online that will scan your site and give you a speed score, along with a step-by-step breakdown of the biggest problems and how to improve them.

How do you speed up your online store?

One of the best places to start is by optimizing your images for web.

Images take up more space then any other part of a website, especially when it comes to online stores. 

They’re some of the “heaviest” and most difficult files for a server to work with, and their size and quality can make or break your web performance.

That, in turn, impacts how long people stay on your site and how many of them convert.

Lighter images lead to a faster site, happier customers, and more sales.  So where do you start?

Step 1: Save your image in the correct format

The two most common image formats to use are Portable Network Graphics (PNG) and Joint Photographic Experts Group (JPEG or JPG).

Step 2: Resize Your Image

When you upload an image that’s 3,000 pixels wide to your product page, you’re making the browser work twice as hard. 

The browser has to first load the original 3,000 pixel image, and then reload the image sized down to fit the area that it’s uploaded to.

For example: If the width of your website content is 800 pixels, your visitors’ browsers have to load the 3,000 pixel image plus the 800 pixel image. 

Multiply that process by the number of images you have on a single web page. See how that can quickly turn into a pretty monstrous problem?

Before uploading any image to your website, first double-check the size that you’ll need. 

Important: Image file size and Image size are two different things.

The image size (460px x 460px) is shown in the screenshot above.

The image file size is how big the actual file is (such as 92,461 KB). This is the amount of space required to store the image on your server. The larger the file size, the longer it takes for the image to load.

You want to make sure that most images on your websites are no larger than 150 KB, but preferably less than 100 KB – depending on the purpose of that image

How do you find out what image size is needed?

If you’re using Google Chrome, you can use the Inspector tool to help you figure out the size of the space for your image.

Navigate to your site and right-click on the area you want to investigate the width of. Then click “inspect”.

A toolbar will pop up at the bottom. You’ll be able to sort through the HTML sections of your website, hover over them, and see the width of that section.

So, for example, if you want to add an image to your blog post, you need to know the max-width of your content area so you can upload an image to be that size or smaller.

Open the inspector tool to determine the space for your image.  In the example below, the size of the area that your image will occupy is 1,080 pixels wide.  Now you know that, in order to prevent the web browser from loading two different-sized images (as mentioned above),  you have to resize your image to be 1,080px wide or smaller.

Step 3: Save Your Image for the Web

Most image editing software has a “save for web” option which helps adjust the file size of the image.

To “Save for Web” in Photoshop, go to File > Export > Save for Web from the menu bar at the top of your screen.

Step 4: Run the Image Through a Compressor

Image compressors strip an image of unnecessary information such as camera details, metadata, color profiles, embedded thumbnails, etc. 

Doing this decreases the file size of your image, without affecting its quality.

 

You can use a WordPress plugin such as Smush Image Compression and Optimizationor EWWW Image Optimizer to bulk compress or automatically compress images when you upload them to your website.

If you have a Mac, download ImageOptim for free – a super easy drag-and-drop app.

You can also take advantage of free online image compressors like TinyPNG or Kraken.

Recommended Posts

Leave a Comment

3 × one =

Start typing and press Enter to search

WhatsApp has recently enabled the new audio picker with the possibility to play the audio before sendingPre-Launch Checklist: The Essentials Of E-Commerce Website