Why speed matters
Bounce rate. If you have never heard that expression, it is what happens when you visit a site and leave it, or ‘bounce’ immediately. We want to capture a user as quickly as possibly once they land on your site. If the site takes too long to load, users lose faith in your site’s competency and decide to find their product elsewhere. We’ve all experienced this where we have visited a new site experimenting with the idea of purchasing from them and their website loaded so poorly that you had no choice but to purchase your product somewhere else because of the amount of time you are wasting waiting for their site to finally load.
According to Kissmetrics, 79% of web shoppers who have trouble with website performance say they won’t return to the site to buy again. That’s a large percentage. So if your site isn’t loading as quickly as possibly, you could be losing sales.
Save your image in the correct format
PNGs are higher in quality and allow for transparency, but their image file sizes are much larger. JPEGs are a lower quality image, but the file size is much smaller and better for page speed. JPEGs will be your best bet in most cases as they’re a good compromise between image quality and file size.
When to Use PNG:
- For images with transparent backgrounds
- For images with opacity
- For smaller images such as logos or icons
- For images with text on them
- For screenshots or images that don’t use a lot of different colors
- When you want to retain the quality of a detailed image and file size doesn’t matter
When to Use JPEG:
- For images with a lot of different colors, like photographs and realistic images
- For product images and backgrounds
Resize Your Image
Resizing your image has 2 sizes to consider, the dimensions of the image (length x width) and the actual upload size of the image (like weight of an image). You want to match your dimensions to the image size you are designing. If you are unsure the dimensions of the image, open the site in Google Chrome, right click and select Inspect in the popup menu. There you can hover over the image and get the exact pixel dimensions you need to make your image.
As far as ‘weight’ of the image, 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. To accomplish this you will need a photo editor, i.e. Adobe Photoshop.
Save Your Image for the Web
To Save for Web in Photoshop, go to File, Export, Save for Web from the menu bar at the top of your screen. Most image editing software has a “save for web” option which helps adjust the file size of the image.
Your software will usually allow you to adjust the image in order to find a balance of file size and image quality.
Run the Image Through a Compressor
Here at Running Robots, our Image Optimizer of choice is Optimole. Not only do they set your images to a CDN, they then push your images to the browser as .webp which adds to your mobile page speed. To learn more about Optimole, check them out here. They provide a free service up to 5,000 visitors, after that you will need to look into their monthly subscription service to meet your image optimization needs.
