We’ve written tons of articles giving you step-by-step advice on how to make your website faster – but not everyone wants to go through lots of steps. Many people reach out to us asking what is the #1 most important bang-for-your-buck tip on optimizing your website’s speed.
Good news is that we can answer that with a simple response. The most important thing you can do to speed up your site is:
Optimize your images!
Sounds simple, right? And it is! But there are a few tips you should know to ensure you’re optimizing your images effectively.
“Images are still the number one cause of bloat on the web”
Recently Addy Osmani of Google Chrome released a guide covering essential image optimization. It’s a godsend. Seriously, open that up in a new tab right now so you can read into the details after you finish this overview.
In the guide Addy declares that images constitute some of the largest file sizes in websites today, and expands on how we can do our part to improve our site’s optimization and by extension, our user’s experience.
The statistical site HTTP Archive lists images as responsible for more than 60% of the data required to fetch the average website. With modern web design trends such as the full screen hero image, parallax image backgrounds, and large sliders, it’s more important than ever before to make sure that the images on your site are compressed/optimized.
In addition, nearly 60% of web traffic in 2018 came from mobile devices.
This trend shows no signs of slowing down, and underscores a huge responsibility for web designers and site owners. Large image files are taxing on batteries and data plans, which greatly lowers the user experience for mobile users.
Even for desktop visitors, we’ve mentioned before how much the bounce rate of a site is largely dependent on how quickly a site loads. For a lot of site owners, unnecessarily large images are a frequent culprit.
How to know if your site need its images optimized
There are many great resources you can use to audit your site, which will also show what images you need to optimize. A site audit through WebPageTest.org gives you a simple, straight to the point grade for many areas of your site, including image compression.
Google Page Speed and the Lighthouse audit that they use will also check your site for best practices and let you know what images you need to optimize.
Their simple suggestions will show you the bloated images, as well as the file size you could save with optimization. As you can see, even relatively small images add up to a large amount of bloat. This site could save more than 2 seconds of loading time by optimizing the smaller images they have on their site.
At MachMetrics, we always recommend using a tool like ours for site speed monitoring and speed optimization. Automated speed tests continuously monitor your site, rather than checking it once. Your site may show a great score on one the audit services listed above, but if you were to absentmindedly add a large image to your site, you may not catch it for a long time. Think how many visitors may experience your site being slowed down by that massive image in that amount of time.
You might ask, “One uncompressed image can’t make that big of a difference right?” Below is an example where a site we were monitoring had a large image added to it by a developer:
That obviously made a huge difference. That one image made the site’s page load speed skyrocket as it took the page size from around 1.5MB to 12MB. Thankfully, our speed alerts caught the issue and the developer was able to immediately fix the problem.
How do I optimize my images?
There are a ton of resources you can use to optimize your images. ImageOptim is a very popular program for Mac users that does a great job of reducing file size without a noticeable reduction in quality. Windows users can use FileOptimizer, and Linux offers Trimage; both are similar programs to ImageOptim. There are also many 3rd-party solutions online as well such as Tinypng.
However, the ideal situation involves an automated process. This keeps the above issue from happening where you forget to optimize an image before you upload it to your live site. Solutions like imagemin and Coludinary are great for automatic optimization, and there are countless alternatives.
WordPress offers a ton of plugins that optimize your images as well, and the best of them automate the process by optimizing your images as soon as you upload them to WordPress’s media library. reSmush.it, WP Smush, and Compress JPEG & PNG images are just a few of the excellent options you have in that category.
Image Formats – JPEG vs PNG vs WebP vs SVG
You’ve probably noticed that many of the images you’ve put on your site have different formats, so which one should you use to give you the best compression? The good news is it’s easy to decide. JPEG is typically better for pictures and photographs, such as a hero image, because it is a lossy format. Lossy means that it can be compressed more than a lossless format such as a PNG. This can reduce the quality of the image, but when done correctly through one of the services we’ve mentioned in this article, you won’t see a difference.
PNG images are best used when you need to display a web graphic, especially one with a transparent background like a logo or text. As mentioned before, this format is lossless, so it can’t be compressed as well, but it doesn’t lose any quality during this process. The downside is that PNGs can’t scale/enlarge or pixelation will occur.
The SVG on the other hand, is drawn from mathematically declared shapes and curves, instead of pixels so they can be enlarged and will always look great. SVG’s can be animated, and support transparency, but if they contain lots of detail they can be among the larger file sizes.
This brings us to WebP. A recent image format from Google, it offers some of the best compression (while also offering transparent graphics), at roughly 30% smaller than a JPEG, without the quality gap. The catch is that is isn’t fully supported by every browser yet. According to caniuse.com, Opera and Edge have recently added support to join Chrome and Firefox, with Safari the lone holdout.
Many large company sites (Netflix, YouTube, Yahoo, etc.) are now using WebP in production, because of the significant file size savings it offers. Because some browsers don’t support this format, you’ll need to conditionally serve WebP images with a backup JPEG/PNG to serve if your visitor’s browser doesn’t support it. You can use .htaccess, or the <picture> HTML tag to offer multiple images to the browser, which will cycle through them and serve the first match. This method allows you to enjoy significant smaller file sizes while catering to everyone’s user experience.
Additional ways to Optimize Your Images
There are other ways that you can optimize how your website displays images that go beyond simple compression of the images themselves.
Lazy-load images that the user won’t see right away
Lazy loading is an optimization technique that involves telling the browser not to load an image until it detects that the user is scrolling to it. This way, images that are well down the page aren’t loaded right away, as they aren’t immediately necessary. Using this method along with the techniques mentioned above, can save a lot of time and data for your sites visitors.
There are quite a few options when it comes to adding this functionality to your site. We’ve provided a quick guide to lazy-loading, but that’s not the only way. Javascript solutions like Lazysizes offer a quick and simple solution for developers to use on their own sites. If you have a WordPress site, there are countless plugins with this functionality built in right out of the box. WPRocket is one of the best all-in-one solutions that offers this feature; simply check the lazy load box in the settings, and it takes care of the rest.
Use a short video file instead of a GIF whenever possible
Once a stable of a turn of the century website, animated GIFs have seen a decline in usage. Part of that reason, is there are many downsides to using them and almost no advantages. Delivering a file as a MP4 video can create a file size 80% smaller than if it was delivered as a GIF. In fact, the social media giants Twitter and Imgur automatically convert GIFs to videos as soon as a user uploads them to their site. It makes sense that we follow in their footsteps, as they know that this drastically cuts down on the bandwidth they need to use to deliver these media files.
Please, consider your image optimization
Even if you feel overwhelmed by the more advanced methods mentioned here or in Addy’s e-book, it’s important to understand that even taking the first basic steps towards optimizing images makes a big difference to the visitors of your site. Something as simple as installing the a plugin on your WordPess site or running all of your images through a simple service ensures that you won’t have any of the massive 10MP images that can kill a site’s load time and SEO ranking.
At a minimum, just being aware that images are one of the easiest thing to optimize will help guide your site on a path towards speed.
It would be a good decision to mention native support for lazy loading in chrome >75, which, given its popularity, can help many of webmasters who are not too strong in javascript.
Especially since you have the appropriate post. https://machmetrics.com/speed-blog/browser-native-lazy-loading-coming-in-2019/
Absolutely, great point!
You can also use a polyfill for WebP that renders it as a single frame video which is supported almost anywhere. Then just serve WebP everywhere. Sure polyfills are slow, but unsupported device are probably slow anyways