How to Optimize Images to Improve Your Website Speed
They say a picture is worth a thousand words, which is one of the reasons images are so important in website design. Effectively used, images can help drive more visitors to your website, promote social sharing and ultimately help drive business goals such as sales.
Images tell your brand story. Your website visitors rely heavily on the images to understand your brand story. And if you’re doing e-commerce, trying to sell a product without an image is almost impossible.
So it goes without saying that your images need to be high-resolution and crisp. But, that comes at a price. Large, high def images can have huge file sizes. Put a few of those images on your website and your website will slow down more than maple syrup dripping from a pine tree on a cold day (and trust me, that’s slow).
Not only will this cause your website visitors to bounce, but in time, Google will notice as well, and this can affect your SEO.
In website design, it’s critical to find a good balance between image quality and image file size when you save an image for your site. Lucky for you, it’s quite easy to optimize your images (make the file size smaller, but keep the crisp resolution).
If you haven’t started your website yet, this is a great step to do BEFORE you upload your images to your website.
But if you already have a website and have realized that it’s not operating as fast as it could be, I recommend optimizing all your images. It’ll be more of a pain in the butt for you but the results are worth it.
Ready to optimize your images?
IMAGE FILE TYPE OPTIONS
There are two main file types we’ll want to focus on for saving images optimized for the web: JPG, and PNG. Each file type has its own strengths and weaknesses. It’s important to know and keep these in mind when saving an image.
WORKING WITH JPGs
JPGs (also known as JPEGs) are the most popular file type for images on the web. JPGs are perfect for photographs or complex images containing lots of colors, shadows, gradients, or complex patterns.
JPGs can also be saved in high-quality, low-quality, or anywhere in between. This allows you to adjust and save the image exactly how you want, balancing quality and file size.
JPGs are the most popular file format online and are commonly used for product images, photographs, and homepage hero banners/images.
WORKING WITH PNGs
PNGs are another popular file format online. They can provide a much higher-quality image as well as they can handle transparency. This is one of the biggest differences between PNGs and JPEGs. But that also means it comes with the problem of much higher file size.
PNGs are usually used for logos because they are high-quality and can handle transparency. This works well for logos because logos nearly always require transparency and high-quality. Typically logos are a small part of your site overall, the file size is still small and not as big of a concern.
HOW TO OPTIMIZE IMAGES FOR YOUR WEBSITE
As I said earlier, large images take longer to load. When I say large I’m referring to the file size rather than the dimensions of the image, i.e. the value in KB, MB, GB, etc. Considering 47% of users expect a webpage to load in under 2 seconds, and 40% will abandon a page that takes more than 3 seconds to load, it’s important that your images are small enough to ensure a speedy site.
There are several things you can do to properly optimize your images for your website but I’m going to share the easiest option, and the one I use all the time.
First, save your image file as a JPG or PNG.
Image compression apps are the easiest way to reduce the file size of images. These types of tools remove hidden data in the image file like additional color profiles and metadata (like geolocation of where the photograph was taken) that aren’t needed. These tools provide a quick and easy way to reduce file sizes without losing any image quality.
image compression apps & services
There are several image compression apps and services out there, but my favorite two compression services to use are:
They’re super easy to use and make the whole process stupid quick. Basically, you upload the file you want to optimize or compress, then the program does its thing. Once it’s done, you download the newly compressed file. Then you upload it to your website!
How much easier can that get?
So say you start with an insanely huge file size of say 14.4MB, use one of the image compressor services, and now you have a much more reasonable 336KB but the image still has high-quality resolution. That’s a HUGE difference and will make a considerable difference in the speed of your website.
Compressing images appropriately for your website is an important step to learn early and implement religiously. Even if you only save 10-20% on each image, over time, as your website grows, every little KB can add up to some significant savings that will lead to a much more pleasant experience overall for your website visitors and Google.
Here’s a great way to check the speed of your existing website to see if you need to work on your images: https://developers.google.com/speed/pagespeed/insights/
If you do this BEFORE you upload images to your website, you’ll save yourself a major headache down the road.
What is your favorite way to compress your image file size? Have you done this already to your website images or are you going to go do it now? I’d love to hear from you in the comments below!