Everybody enjoys visiting fast-loading websites. Imagine you want to buy something online, and the site takes about 10 seconds to load; you can get frustrated. Use the same analogy for someone visiting your site, and the same thing will happen. It may lead to the loss of potential customers.
79% of online shoppers who have an issue with website performance say they won't return to the site again. According to Entrepreneur, 47% of people expect a website to open within two seconds or even less, and 40% of website visitors tend to abandon a page taking over three seconds to load. Therefore, you need to improve your online store's speed as an e-commerce website owner.
This article explains the step-by-step process of increasing the website’s speed by optimizing images.
1. Save Images in the Correct Format
The most common image formats are Joint Photographic Experts Group (JPEG or JPG) and Portable Network Graphics (PNG).
The major differences are that PNG allows for transparency and is higher in quality but requires a large image size. On the other hand, JPEG has lower quality but a smaller image size.
When to Use PNG?
- For images with opacity;
- For images with backgrounds that are transparent;
- For small images like icons or logos;
- For text images;
- For images or text with a few colors;
- When file size doesn’t matter and when you want to maintain the quality of an image.
When to Use JPEG?
- For backgrounds and images;
- For images with plenty of colors, such as realistic images and photographs.
2. Change Image Size
Suppose you upload an image of about 3000 pixels to your product image. In that case, you’re causing the search engine to work harder. The browser will have to load the large image first and then resize it to fit the screen.
Now, if your website width is about 900 pixels, the shopper’s browser will have to load both the 3000 pixels and the 900 pixels. You probably have more than one image; now imagine the whole time that’ll be wasted on individual loading images. Before you put any image on your website, double-check the size.
If you use Google Chrome, use the inspection function to determine the size of your image. Go to your site, click on the space you want to investigate, and tap on “inspect.” You will notice a popup at the bottom showing a toolbar. You’ll be able to go through the HTML segments of your site, float over them, and know the size of that section.
3. Save the Image for the Web
Virtually all image editing software has a “Save for Web” bar. The function is to adjust the size of the image. For Photoshop, go to File, Export, and click on the “Save to Web” button.
The software will allow you to switch between options to ensure the perfect image size and quality. You can view the original image and the edited one in Photoshop.
4. Run the Image Through a Compressor
Image compressors remove unnecessary information from an image. Such info includes embedded thumbnails, color profiles, camera details, and metadata. Compressing an image will decrease the image size while maintaining its quality.
Some WordPress plugins can also come in handy, including Ewww Image Optimizer and Smush Image Compression and Optimization. They help in compressing images when you upload them to your site. Those tools are handy if you’re using e-commerce website builders with limited image size requirements, like Shopify, Shoplazza, etc.
Every e-commerce store needs to pay attention to image sizes since they are vital for product sales. However, website speed is also crucial because it can determine if customers leave or stay on your e-commerce website.
The steps above are the most accessible guide to improving your website’s speed by optimizing the images you upload. Follow them and convert your traffic into sales!
(Contributed by Ayotomiwa Omotosho & Hermes Fang)