Images are one of the primary factors behind slow website load times. Optimizing your images can lead to significant and immediate speed wins.
In this article you'll learn how you can optimize your images to boost your site loading speed. This is information you can move forward with today.
A slow-loading website will sink your conversion and earning potential because it delivers a poor experience to the user. Users bounce in droves from sluggish websites.
Site loading times are a search engine ranking factor too. A slow-loading site may also damage your SEO, diminishing site traffic and surrendering leads and prospects to your competitors.
It also causes much of your marketing spend to be wasted. What’s the point of spending thousands of dollars in promotion when your users can’t get a mobile version of your site to fully load quickly? It's possible to be progressing in your marketing on some fronts while actively undermining your site performance, SEO, and business results.
The majority of mobile websites are “slow and bloated with too many elements" says Google.
Research by Google and other industry leaders has long established the link between site loading speed and engagement, conversions, and ROI.
Here are some representative data points:
The website 'obesity' trend, captured in numbers by the HTTP Archive. Since 2011, average web page sizes have increased by over 1,100%.
Image optimization is the practice of minimizing image file sizes while preserving visual quality. By minimizing the file size, the image — and web page — will load faster.
Typically a balance is in play: the file size must be reduced while maintaining good visual quality.
Don't confuse file size with display size. We'll be using techniques that reduce the file size but don't affect the display size.
"Speed is a ranking factor for both mobile and desktop search results." — Google, 2018
There are many methods of image optimization and it's a highly technical field. For this article, we're going to focus on easy wins and address the non-technical audience.
Our focus is to get actionable information in your hands that you can start using today to improve your website's performance.
Website owners and users have gotten used to the ease of article posting. It only takes seconds to post content to a website. Unfortunately, as a result, the images that are posted often receive little thought.
If you allow visual appeal to be the only deciding factor for images that get posted to your site, you'll soon bog down your website's performance.
To give your business the best shot at success, incorporate a new discipline regarding how images are handled on your website.
Free images supplied by sources like Unsplash are popular with site owners. These images from professional photographers are high-resolution and gorgeous, but the image file sizes are usually enormous.
I've downloaded images from Unsplash that have been as large as 8 MB in size. Uploading images like this to your website is like tying a boulder around it and tossing it into the ocean. It's going to sink your page loading time, which degrades user experience, SEO, traffic, conversions, and ROI.
So what to do?
We're going to explore 4 main methods for optimizing images, using a sample image of New York City that has a file size of 2.2 MB.
You can see the results up front in this comparison chart. The use of the Cloudinary optimization service delivers the biggest file reduction, reducing the photo file size down to 74 kb: a reduction of approximately 96%.
|Original download||Editing to column width||Tinypng tool||Screen grab||Cloudinary|
|Image size||2.2 MB||1.1 MB||822 kb||740 kb||74 kb|
For our example, I'll use an image of New York City from Unsplash, with a file size of 2.2 MB (megabytes)
You can use an online compression tool like tinypng.com to reduce the file size of your images.
A word of caution though.
This is why I recommend the simple screen grab method (discussed next) for non-technical folks: it's fast, it's not fussy, and it works.
This is probably the easiest and most impactful method for non-technical people to use. Here's how it works.
The screengrab is going to be a much lighter file size than the original.
However the screen grab isn't ideal. It's a compromise: it's much better than uploading huge image files to your site but it doesn't deliver the best results.
When it comes to biggest impact on site loading time and low resources needed to get the job done, using an optimization service like Cloudinary or ImageKit wins hands-down.
Here's the same image optimized by Cloudinary.
One thing that Cloudinary and ImageKit do is to deliver images in what "next-gen" formats. Next-gen file formats like WebP, JPEG XR, and JPEG 2000 load faster than 'traditional' JPG and PNG files.
Cloudinary automatically detects the browser (and browser version) that a web visitor us using to access your site. If that browser can support next-gen images, then Cloudinary will display your site's images in that format to that individual user.
In this case I'm using Chrome, and Cloudinary is delivering the image in what's known as WebP format. Our image is now a featherweight file size at only 74 kb. And the visual quality is good.
You can learn more about how Cloudinary and ImageKit work in this article.
While a pro can optimize all your existing images, you'll need to determine how you'll handle posting to your web in the future. What will be your protocol for handling images?
It may be that a hybrid approach works for you: (1) having all the images on landing pages and any conversion-oriented pages optimized, as well as images in your blog archive and (2) having staff who post to your site use the screengrab method for the future.
Optimizing your images is an important step to speeding up your site loading time and maximizing conversions and engagement.
I've shared three possible approaches, one delivers the best results. Which one will you choose?
Let me know how you're getting on with your image optimization. And feel free to contact me with any questions you may have.
Get started today reigning in your website bloat.