It may not be a huge surprise, but images are a huge part of most websites. Images increase engagement and communicate a range of emotions and value to the viewer. With that in mind, it’s important that images on your site are high-quality and look good on multiple screen sizes.
This is where it gets tricky.
That beautiful, high-quality image has the potential to bring your page to a grinding halt and turn away users if not handled carefully. The larger the image and the higher the pixel density, the larger the image file.
When a user accesses your webpage, all the images need to load in order to be viewable. This is fine if the user has a fast data connection and a quality device. If the user is on a slow network or has an older device, then that image can take several minutes. In a world where consumers expect immediate gratification, anything longer than 2 or 3 seconds becomes a frustrating user experience and you risk losing these people as customers.
The good news, however, is that there is an easy fix. Those big, beautiful images can be tweaked to significantly increase load speed. By following the below steps, you’ll ensure your images are web-ready while providing your users great content along with a fantastic user experience.
With these three steps, you’ll be able to take a 10MB (10,240KB) photo and make it less than 500KB!
1. File Type
Without getting too technical, .jpg (or .jpeg) and .png are two separate file types that offer different features.
To make it simple:
- High color range
- No transparency
- Limited color range (except PNG-24)
Ultimately, .pngs should be used if you need a transparent background. For all other images, use .jpg.
You most likely have some high-quality images that are 5,000px or more at their largest dimension. While this is great for a poster or a 55” TV screen, it will kill your load time on the web. To avoid this, you need to determine the end dimensions of your image.
With any luck, your theme developer listed image dimensions. If this is the case, size and crop the image you have to fit those dimensions. If not, there are some general size rules you can adhere to make an image fit the space, maintain its quality, and reduce load time.
If your developer didn’t list the desired image size, then use your best judgment to size the image. As a general rule, if your image is larger than 2,000px wide, it’s probably too big.
While this may seem complicated, there are some great tools out there. You can use your image editor to compress your photo, but for the best results, pass it through an image compressor.
With any of these compression tools, you should see a 70-80% file size reduction.
For users with less than ideal internet speed, skipping this step means your viewers are waiting 70-80% longer for the content to load. That’s a major difference you want to avoid whenever possible.
If you followed these steps, you should have a gallery of images that are the perfect size for the job and will engage your users without testing their patience.