You don’t want Google to hate your website. Fortunately, you can reduce your image’s file sizes to help improve your website’s performance. There are some tricks and techniques that let you reduce the image’s file size and still keep them pretty enough to proudly display them on your website
Originally published by Brian Jackson at https://kinsta.com
So let’s take a look at how to format your images without making them ugly, as well as how to optimize images for web and performance.
Large images slow down your web pages which creates a less than optimal user experience. Optimizing images is the process of decreasing their file size, using either a plugin or script, which in turn speeds up the load time of the page. Lossy and lossless compression are two methods commonly used.
First, why do you need to format your images? What are the benefits? There are numerous benefits of optimizing your images for performance. According to HTTP Archive, as of November 2018, images make up on average 21% of a total webpage’s weight. So when it comes to optimizing your WordPress site, after video content, images are by far the first place you should start!
It’s more important than scripts and fonts. And ironically, a good image optimization workflow is one of the easiest things to implement, yet a lot of website owners overlook this.
Average Bytes Per Page (KB)
Here is a look at the main benefits.
The primary goal of formatting your images is to find the balance between the lowest file size and an acceptable quality. There is more than one way to perform almost all of these optimizations. One of the most popular ways is to simply compress them before uploading to WordPress. Usually, this can be done in a tool like Adobe Photoshop or Affinity Photo. Some of these tasks can also be performed using plugins, which we will go into more below.
The two primary things to consider are the file format and type of compression you use. By choosing the right combination of file format and compression type you can reduce your image size by as much as 5 times. You’ll have to experiment with each image or file format to see what works best.
Before you start modifying your images, make sure you’ve chosen the best file type. There are several types of files you can use:
There are several others, such as JPEG XR and WebP, but they’re not universally supported by all browsers. Ideally, you should use JPEG or JPG for images with lots of color and PNG for simple images.
Here is an example of what can happen you compress an image too much. The first is using a very low compression rate, which results in the highest quality (but larger file size). The second is using a very high compression rate, which results in a very low-quality image (but smaller file size). Note: The original image untouched is 2.06 MB.
Low compression (high quality) JPG – 590 KB
High compression (low quality) JPG – 68 KB
As you can see the first image above is 590 KB. That is pretty large for one photo! It is generally best if you can keep a webpage’s total weight under 1 or 2 MB in size. 590 KB would be a fourth of that already. The second image obviously looks horrible, but then it is only 68 KB. What you want to do is find a happy medium between your compression rate (quality) and the file size.
So we took the image again at a medium compression rate and as you can see below, the quality looks good now and the file size is 151 KB, which is acceptable for a high-resolution photo. This is almost 4x smaller than the original photo with low compression. Typically simpler images like PNGs should be under 100 KB or less for best performance.
Medium compression (great quality) JPG – 151 KB
It is also important to understand that there are two types of compression you can use, lossy and lossless.
Lossy – this is a filter that eliminates some of the data. This will degrade the image, so you’ll have to be careful of how much to reduce the image. The file size can be reduced by a large amount. You can use tools such as Adobe Photoshop, Affinity Photo, or other image editors to adjust the quality settings of an image. The example we used above is using lossy compression.
Lossless – this is a filter that compresses the data. This doesn’t reduce the quality but it will require the images to be uncompressed before they can be rendered. You can perform a lossless compression on your desktop using tools such as Photoshop, FileOptimizer, or ImageOptim.
It’s best to experiment with your compression techniques to see what works best for each image or format. If your tools have the option make sure you save the image for web. This is an option in many image editors and will give you the quality adjustments so you can perform optimal compression. You’ll lose some of the quality, so experiment to find the best balance you can without making the images ugly.
There are a lot of tools and programs out there, both premium and free, that you can use to optimize your images. Some give you the tools to perform your own optimizations and others do the work for you. We are personally big fans of Affinity Photo, as it is cheap and gives you almost identical features to that of Adobe Photoshop.
Compressing photo in Affinity Photo
Here are some additional tools and programs to check out:
In the past it was very important that you upload images to scale and not let CSS resize them. However, this is no longer as important since WordPress 4.4 now supports responsive images (not scaled down by CSS). Basically, WordPress automatically creates several sizes of each image uploaded to the media library. By including the available sizes of an image into a
srcset attribute, browsers can now choose to download the most appropriate size and ignore the others. See an example of what your code actually looks like below.
srcset responsive images example in code
So with more and more HiDPI displays nowadays, it can be good to find a happy medium. Say 2x or 3x your website’s column or div size, but still less than the original size. The browser will show the correct one based on the resolution of the device.
The WordPress media library creates thumbnails based on your settings. However, the original is still retained and untouched. If you want to resize your images and save disk space by not saving the original, you can use a free plugin like Imsanity
WordPress media settings
Imsanity allows you to set a sanity limit so that all uploaded images will be constrained to a reasonable size which is still more than large enough for the needs of a typical website. Imsanity hooks into WordPress immediately after the image upload, but before WordPress processing occurs. So WordPress behaves exactly the same in all ways, except it will be as if the contributor had scaled their image to a reasonable size before uploading.
Thankfully, with WordPress, you don’t have to do all of the formatting or compression by hand. You can use plugins to do at least some of the work for you automatically. There are several plugins that will automatically optimize your image files as you upload them. They’ll even optimize images that you’ve already uploaded. This is a handy feature – especially if you already have a website filled with images. Here’s a look at some of the best plugins to format your images for better performance.
It is important though that you don’t solely rely on the plugins themselves. For example, you shouldn’t be uploading 2 MB images to your WordPress media library. This can result in eating up your web hosts disk space really fast. The best method is to quickly resize the image in a photo editing tool beforehand, and then upload it and use one of the following plugins to reduce it further.
Imagify Image Optimizer plugin
Imagify is created by the same team who developed WP Rocket, which most of you are probably familiar with. It is WooCommerce, NextGen Gallery, and WP Retina compatible. It also has a bulk optimization feature and you can choose between three different levels of compression, normal, aggressive, and ultra. It has a restore feature as well, so if you are unhappy with the quality you can one-click restore and re-compress at a level which better suits your needs. There is a free and a premium version. You are limited to a quota of 25 MB of images per month with a free account.
Getting rid of the original image and resizing your larger images can also be done with this plugin.
Resize images in Imagify
Imagify also compresses images on their third-party servers, not yours, which is very important when it comes to performance. Imagify shouldn’t slow down your WordPress site.
ShortPixel Image Optimizer is a free plugin that will compress 100 images per month and will compress multiple types of files including PNG, JPG, GIF, WebP, and even PDF files. It will do both lossy and lossless image compression. It will convert CMYK to RGB. It takes your images and thumbnails into the cloud for processing and then brings them back to your site to replace the originals. It creates a backup of the original files so you can manually restore them if you want. It will convert gallery files in bulk. There is no limit to the file size.
Optimole is an image optimization WordPress plugin that automatically reduces your images’ size without any work required on your end. It has a big advantage when it comes to your site’s loading speed as it is entirely cloud-based and never serves images that are bigger than they should, aka it displays the perfect image size for the visitor’s viewport and browser.
Moreover, the plugin provides lazy loading and efficient image replacement – it downgrades the image quality if the visitor has a slower internet connection – which makes it stand out from the crowd. It also automatically detects the user’s browser and serves WebP if it’s supported.
All the images that Optimole compresses are served via a fast CDN. You can try Optimole for free or upgrade to the premium plan if you need extra bandwidth and processing space.
EWWW Image Optimizer Cloud plugin
EWWW Image Optimizer Cloud helps you make your images smaller, and your site faster with less hassle starting. With no size limits, and plenty of flexibility, you can use the defaults, or customize the plugin completely to your liking. All EWWW IO users can use the Bulk Optimizer to compress their existing images, or use the Media Library list mode to pick and choose specific images to compress.
Additional folders can be scanned to make sure every single image on your site is properly optimized. EWWW IO even allows you to convert your images into next-generation formats like WebP, or find the best image format for an image with multi-format conversion options. Image compression starts out at only $0.003/image.
The premium compression API allows you to take compression to a whole new level without sacrificing quality, which unlocks PDF compression and includes convenient 30-day image backups. The ExactDN feature which starts at $9/month brings in automatic compression (with no server-side compression necessary), automatic resizing, and all the benefits of a CDN for faster results, and even more performance across any device size.
Optimus Image Optimizer plugin
The Optimus WordPress Image Optimizer uses lossless compression to optimize your images. Lossless means you won’t see any quality loss. It supports WooCoomerce and multi-site and has a nice bulk optimization feature for those with already large existing media libraries. It also is compatible with the WP Retina WordPress plugin. There is a free and premium version. In the premium version you pay once annually and you can compress an unlimited amount of images. If you combine it with their Cache Enabler plugin you can also dive into WebP images, which is a new lightweight image format from Google.
WP Smush plugin
WP Smush has both a free and premium version. It will reduce the hidden information from images to reduce the size without reducing quality. It will scan images and reduce them as you upload them to your site. It will also scan images that you’ve already uploaded and reduce those too. It will bulk smush up to 50 files at once. You can also manually smush if you want. It will smush JPEG, GIF, and PNG image types. File sizes are limited to 1MB.
TinyPNG uses the TinyJPG and TinyPNG services (the free account lets you compress around 100 images per month) to optimize your JPG and PNG images. It will automatically compress new images and bulk compresses your existing images. It will convert CMYK to RBG to save space. It will compress JPEG images up to 60% and PNG images up to 80% without a visible loss in image quality. It does not have a file size limit.
ImageRecycle – Image & PDF optimizer plugin
The ImageRecyle plugin is an automatic image and PDF optimizer. This plugin focuses on not only image compression but PDFs as well. One really handy feature is the ability to set the minimum file size for compression. For example, if you have images that are 80 KB in size, you can have it automatically exclude them from compression. This ensures images and files are never compressed too much. It also includes bulk optimization and auto image resizing. Note: They have a free 15-day trial, but this is a premium service, and images are uploaded and compressed using their servers. They don’t charge per month, but rather by the total number of images compressed, starting at $10 for 10,000.
We decided to do our own little case study and tests to show you just how much optimizing your images for the web can affect your WordPress site’s overall speed.
We first uploaded 6 uncompressed JPGs, all of which were over 1 MB in size, to our test site. (See the original uncompressed JPGs). We then ran 5 tests through Pingdom and took the average. As you can see from the speed test below, our total load time was 1.55 seconds and the total page size was 14.7 MB.
Speed test with uncompressed JPGs
We then compressed the JPGs using the Imagify WordPress plugin, using the “aggressive setting.” (See the new compressed JPGs, which still look just as beautiful). We then ran 5 tests through Pingdom and took the average. As you can see from the speed test below, our total load time was reduced to 476 ms and the total page size was reduced to 2.9 MB. Our total load times were decreased by 54.88% and page size was decreased by 80.27%.
Speed test with compressed JPGs
There is almost no other optimization you can make on your site that will get you over 50% decrease in load times. That is why image optimization is so important, the process above was all automated by the plugin. It’s a hands-off approach to a faster WordPress site. The only other dramatic optimization you could make would be changing up your WordPress hosts. Many customers that move to Kinsta see over 45% speed increases. Imagine moving to Kinsta and optimizing your images!
By optimizing your images, whether it is using a photo editing tool or a WordPress plugin, you can also fix the “Optimize images” warning you get in Google PageSpeed Insights (as shown below.)
PageSpeed Insights optimize images warning
If you have other optimization warnings from speed test tools, make sure to check out our post on Google PageSpeed Insights and our in-depth Pingdom walkthrough.
Another recommendation is to use SVGs alongside your other images. SVG is a scalable vector format which works great for logos, icons, text, and simple images. Here are a couple reasons why:
Genki wrote a great article where he compares the size of SVG vs PNG vs JPEG. Below are a few takeaways from his testing in which he compared the three different image types.
As you can see above, the SVG is a decrease in file size of 92.51% when compared to the JPG. And when compared to the PNG, 92.83%.
Here are some general best practices when it comes down to how to optimize images for web:
Once you’ve formatted your images for better performance and followed best practices, your site will be better liked by search engines, browsers, and networks, and will load faster for your readers. Oh, and make sure to check out our tutorial on hotlinking, to prevent people from stealing your images and bandwidth.
Have you formatted your images for better performance? Do you format them by hand, use a plugin, or both? Is there another tool or plugin you would recommend? Do you have something to add? Let us know about your techniques and best practices in the comments below!
Thanks for reading ❤
If you liked this post, share it with all of your programming buddies!
Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...
With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...
You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...
Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.
This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.