Websites are just like professional sprinters: the most optimized for the race is the one that wins and is also the one who gets the most cheers from fans in the form of leads, conversions and clickthroughs.
One best practice for optimizing the speed of your website is to optimize all of your images. It’s also a method that many businesses still overlook. Let’s begin by answering all the questions you’re likely already thinking: why is this necessary? If it is important, how can I do it?
The Importance of Site Speed
A majority of users that experience speed issues with a website are unlikely to return; if a web page is taking longer than three seconds to load, users are extremely likely to bounce!
Search engines like sites that can provide the best UX, and the best is often the fastest. If you’re behind on loading speed, you’ll also be lacking in Google SERP rankings, and losing conversions. Your site should not take longer than three seconds to load, many users now expect a site to load within two, and the expectation will only become more rigid.
How to Improve Site Speed Through Image Optimization
Images take up a lot of space and most eCommerce stores will have a lot of images. Even minimalist site designs have more images than you think. Images can be very heavy, but most images you use on your site can be made more lightweight without any loss of perceivable quality. Let’s talk about how.
1. Use the Correct Image Format: PNG vs JPEG
Different file types will better suit the purpose of different images. In general, PNG images are of better quality and allow for transparency, but can have a very large file size. JPEG images are marginally lower-quality, but their files sizes can be made a lot smaller through compression.
PNG uses lossless compression, which means that the image can be compressed and decompressed without any loss of quality. JPEGs are lossy, meaning that they lose data (and definition) when compressed (such as during saving). Compressing and decompressing a JPEG image will give you back a different image that is smaller in file size but has lost some detail compared to the original file.
JPGs are often overused: it’s a powerful and versatile image format, but it’s not perfect for every situation.
When You Should Use PNG
- Logo or icon images
- Images with opacity
- Images that have transparent backgrounds
- Images with text
- Any image where it’s essential you keep image quality and file size is less important
When You Should Use JPEG
- Images with a variety of colours, such as photographs
- Product images
- Backgrounds
2. Resizing Your Image: Making the File Size Smaller
The pixel width of your websites content should always be considered. Let’s say the width of your website content is 1000 pixels, yet you’ve uploaded a 2000 pixel image. Your browser will need to load the 2000 pixel image first then resize it, to no visible benefit. The image therefore takes longer to load and—if this is the case for multiple images on the same page— the load time starts to add up.
The Difference Between Image Size and Image File Size
Image size refers to the dimensions of the image, e.g (460px x 460px), (1280px x 720px). Image file size refers to the size of the file and will be expressed in kilobytes (KB) or sometimes megabytes (MB).
Finding Out The Max Image Size You Should Use
The process is basically the same for any browser. Navigate to the web page and find the content area you’d like to upload an image. Right-click and click “inspect element” or “inspect” depending on the browser you’re using. A toolbar will pop up and while viewing the various HTML sections you’ll be able to see the width for the section you’re concerned with.
Use Web Templates For All of Your Images
Many businesses will make web templates to resize images for, thus speeding up the process. Especially for product images (where you’re likely to be going through 100s if not 1000s of product images) you want to reduce the manual effort of resizing as much as possible.
Use An Image Compressor
An image compressor gets rid of all necessary data that may be in an image: metadata, embedded thumbnails, color profiles. This reduces the images file size without reducing the quality (JPEG images), or without reducing the perceivable quality—maybe a graphic designer will notice a slight difference, your average user won’t.
The most efficient way to compress image files is to put them in a bulk compressor. After resizing a lot of images to fit your custom web templates. Put all of your files through your image processor at once.
If you’re using WordPress, we recommend you use Smush. If you’re using a Mac, ImageOptim is an image compressor you can get for free.
Speed is Everything
Considering how many images are inevitably going to be on your eStore, image optimization can seem like a tiresome task, and it might be to start with, but once you have an efficient system in place, using custom image size web templates in place and a bulk image compressor things will speed up!
Image optimization is one way you can speed up your website but there are so many other ways you can optimize your eStore: if you don’t have these in check, the effort you have put into your images is lost, customers will still bounce. Image optimization can be taken care of by a business owner, designer or even marketing employee. The most meaningful increases in speed will come through expert web development. Stick to global companies that can operate in multiple time zones, so you get the best in communication and project support. Look for web development companies that specialize in multiple eCommerce platforms. One recommended company that has specialist Shopify, Magento and WordPress developers is CodeClouds. They are a global company with offices in The US, India, Australia and New Zealand, allowing entrepreneurs to get both expert eCommerce developers in Fort Wayne and Kolkata.
