Speeding up OpenCart for Free: Image Optimization

How quick is your OpenCart store? Page speed and web performance are among the leading reasons that determine whether visitors of your website stay or leave. The important part here is that slowly loading pages can seriously affect your bottom line.

“40% of people abandon a website if it takes more than 2 or 3 seconds to load.”

So, you’ve got your objective - optimize your OpenCart store to load as fast as possible.

Note that the size of your images does play a key role, but it’s not the main one. Remember that this is just one of the steps in achieving higher pagespeed.

The speed mostly depends on your hosting and server, but there are many ways you can boost your website by optimizing the content within.

The more content and data your server has to transfer, the tougher it will be. In this blog post, we will discuss images and how they can be optimized for optimal page speed.

If you are running an OpenCart store, there is a high chance you have got a lot of images uploaded and used in your website. Multiple product images, banners, header images, etc.

Whether you are loading your website on desktop or mobile, you will always want to see optimized images that load almost instantly, in sync with the rest of the page content.

Basic Image Optimization for OpenCart

Image File Types

First, let’s mention the image file types.

Vector Images

It’s also important to mention Vector graphics, or SVG format images, which are images that have quality and resolution independence. This means their size can be manipulated without them losing their quality and scaling.

Since SVG is an XML-based format, images contain a lot of metadata such as layer information and comments, so for optimizing them, you need a more special tool like svgo.

They are mostly used when creating website themes and brand logos.

(Image source: Andrewkeir.com)

Raster Images

These images will be our focus in this post. The main types of Raster images are JPEG, GIF, PNG. Raster images can be optimized for various web purposes. These images are resolution dependant, which means that they will lose quality when being scaled up.

OpenCart is cool because whenever you upload an image in your online store, it is automatically resized to dimensions that will fit the native requirements. Usually, they are preset from the theme you are using.

To see the image dimensions from your admin panel, go to System > Settings and choose the Image tab.

What’s the benefit here? Lower dimensions also mean a significant decrease in image size.

However, resizing images is not our main point. We mainly want to talk about image compression. This is the process of compressing an image so its size is decreased, making it easier to load in a web page.

Image compression can be lossy or lossless. Lossy compression is when the image is compressed to a point where its quality is visually decreased. Lossless compression means that the image is compressed without losing any visual quality.

Obviously, lossless compression is better for web purposes and it is done with specific tools. Our example for an image compression tool will be NitroSmush.

This is a free web-based image optimization tool that compresses images and optimizes their size so it doesn’t put extra load on your website.

The tool optimizes the image size without sacrificing its quality, so it is easier to load in your site, while still looking good as ever.

Example: Let’s take an image from the default OpenCart installation and compress it with the tool to show how it works.

Result: More than 10% of the image size were taken away. In some cases, the difference may not be as big as you might expect, but the real effect is shown when you use NitroSmush for all of the images on your website.

This was a small JPEG image, so let’s try the same thing with a bigger PNG image.

Almost 30% of the image size were trimmed away. This is quite a bit for a single image.

Important note: We’re not saying that compressing a few images will boost the page loading speed of your website. Simply remember that that finishing the image optimization process means going through all of the images you use on your website and smushing them with this tool.

The HTTP Archive clearly shows that images are the most heavy objects on a standard web page and the majority of high-page loading times are because of them.

When uploading images in OpenCart, you should never forget to optimize them first by using a tool like NitroSmush. Another compression tool you can use is CompressJPEG.

Final words

We hope you understand how important image optimization is for the page loading speed of your OpenCart store. While it may not be the single, most powerful method that will break the speed limit, it’s still among the important steps to optimize the page loading speed of your website. Start experimenting with the tool we shared with you and boost up the performance of your website. If you do it properly, the results might even surprise you. True story.