How to Reduce Image Size to Speed Up Your Website (Without Sacrificing Quality!)
Images serve as the jam and butter to your otherwise bland web page toast: They add flavor in between all of the text, allowing your readers to rest their eyes and giving them something nice to look at before continuing on their reading journey.
However, these same images can also consume a lot of bandwidth, causing your site to slow down and your site’s visitors to have a less-than-optimal experience.
In this article, we explain why and how you should reduce the sizes of your images, enabling you to optimize your site’s load times without compromising image quality.
Table of Contents
7 ways to optimize images for better web performance
Why Do I Need to Reduce Image Size?
Although high-resolution images are very detailed and nice to look at, their large sizes are one of the many reasons behind a slow website. These images also take up a lot of your bandwidth, which, depending on the hosting plan that you have, can be quite limited.
Even if you sign up with the best web hosts, if you don’t reduce the size of your images and optimize them properly, your hosting fees could spiral out of control, or worse, these images could even cause your site’s online search ranking to plummet!
What Are the Benefits of Reducing Image Size?
With all this talk about optimizing your images and reducing their size, you may be wondering about the benefits of doing so. Here are but a few of them:
- Smaller images lead to faster load times
The faster that your website loads, the more people will stay. Imagine a site that takes more than 30 seconds just to load one page: Would you stick around and wait for it to load? - Optimized images consume less bandwidth
This means less money spent on hosting fees and bandwidth costs every month!
In addition, the smaller image sizes help any of your users who may have data caps, letting them enjoy your site more without worrying about using too much of their limited bandwidth. - They help with SEO
Search engines “crawl” through the internet to index images on websites, and they hate slow-loading sites. Larger images will slow down your site, causing your search engine rankings to plummet.
Keeping your images lean and optimized, on the other hand, helps these search engines and improves your pages’ rankings on their results pages. - Tinier images are faster to back up
The speed of your backups depends on the overall size of your website. Using smaller images, therefore, speeds up the process of backing your site up, as the file sizes are smaller. - Better images lead to better conversion rates
Your site visitors should have the best experience possible, and this is especially true if you want them to do something, be it buying a T-shirt or clicking on an affiliate link.
As such, you should make this process as pain-free for them as possible. Optimized images lead to a faster, more responsive site, helping you convert happy visitors into happy customers.
How Do I Optimize My Images for Better Web Performance?
With all of these significant benefits, you may be wondering where to start. Don’t worry! Here are seven hand-picked tips to help you optimize your site’s images and reap all of the rewards associated with a leaner, faster website:
1. Test Your Site
Before we get started, you should first run a speed test on your site—like Google’s PageSpeed Insights — to identify any issues that you should focus on, such as any images that might need to be resized or saved in a different format.
2. Know and Use the Best Image Formats
Now that you’ve tested out your site, you should learn what image formats are and what they’re best for. It pays to learn these differences before uploading any images, ensuring that you’re using the best formats for the job.
We’ll focus on three of the most widely used image formats online:
A JPEG image has already been compressed by an algorithm and offers the smallest size for an image. If you’re trying to save as much bandwidth as possible and don’t mind a little loss in quality (like, maybe a few pixels out of, say, millions), then JPEGs are the best choice.
PNG, on the other hand, are also compressed, but not as much as a JPEG, hence their larger file sizes. However, PNG compression is lossless, which means that none of an image’s pixels will be altered in any way.
In addition, PNGs support transparent backgrounds, making them preferable for some complex web page layouts.
Finally, GIF only support 256 colors but are animated, making them perfect for, say, a short, funny meme animation to tie up a page.
Be warned, however, that GIFs can take up a lot of bandwidth, so you should carefully consider how long they last and if you really need to put them on a page.
3. Compress Your Images
To reduce the sizes of your site’s images, you’ll need to use an image compression tool, which is a specialized software that uses algorithms to reduce the sizes of images with little to no impact on their quality.
One of the easiest tools that you can use to compress your images is Kraken.io, which describes itself as a “robust, ultra-fast image optimizer and compressor with best-in-class algorithms.”
Simply drag and drop any image that you want to compress onto Kraken.io’s web page, and pick an optimization mode:
- Lossless optimization: compresses the image but ensures that none of its pixels are altered, making sure that no detail is lost.
- Lossy optimization: means that some of the pixels may be altered, but the image will be overall smaller compared to one that uses lossless optimization.
Once Kraken.io has done its magic, you can click on “Download File” to download your freshly optimized image!
Kraken.io also has a premium version priced at different tiers based on the bandwidth of the images that you’d like to compress per month, starting at 500 MB of images per month and going up to 60 GB.
4. Use a Plugin to Optimize Your Images
If you’ve signed up with a web host for your WordPress site, you may be familiar with plugins. These are software that you “plug in” to your WordPress site to easily perform a variety of functions—such as adding a simple calendar or increasing your security—and yes, these functions include image optimization.
We’ve already mentioned Kraken.io above, and it should come as no surprise to you that it has its own image optimizer plugin, which lets you optimize and resize up to 100 MB of WordPress image uploads (including the ones that you’ve already uploaded), all for free!
In addition to Kraken’s own plugin, WordPress has other image optimization plugins, such as Imagify or ShortPixel’s Image Optimizer.
5. Tidy Up Your Media Library
In addition to these plugins, you can also make use of a plugin like Media Cleaner to tidy up your WordPress media library. It sniffs out any unused media entries and files and deletes them (with your approval, of course) and fixes broken entries.
Utilizing this cleanup tool helps minimize your website’s size and cleans up the files that it uses, helping you lower your bandwidth and speed up your site even further.
6. Resize Your Images
Resizing an image is the process of changing its dimensions (e.g., from 6000×3000 to 1000×500). A resized image is lower in size and therefore faster to load, further helping with your site’s optimization.
To resize an image, you can simply use an image manipulation program, such as GIMP (or even Preview on Mac or Paint on Windows), to change an image to your desired size.
If you’re on WordPress, you’re in luck: it automatically creates thumbnails based on your configurations: You can simply change your image settings by navigating to “Settings” on your dashboard and then clicking on “Media.
From this menu, you can specify the maximum size (in pixels) for your thumbnails as well as medium and large images.
To resize the original images that you upload (and therefore save up even more bandwidth), you can use a plugin like Imsanity to automatically resize huge images into whatever size and quality you want.
7. Utilize Lazy Loading
Lazy loading is a technique that will only load images when they are visible to a user (i.e., images further down a page won’t load until the user scrolls down), helping you achieve faster load times and lowering your bandwidth consumption.
Once again, plugins come to the rescue: You can simply install a plugin like Smush, turn on lazy load, and you’re good to go!
Smaller Images, Faster Websites!
Now that you’ve learned these simple tips, you’re more than ready to optimize your site and boost it further up the search engine results ladder. Remember to use the right formats, and resize and compress your images properly!
However, if your thirst for website knowledge isn’t sated and you’re looking to push your website even further to the next level, check out our article on the best website layouts that always work.
