One important ways to make your site more friendly to search engines is to make your website images smaller to improve website performance. You need to know how to compress images to speed up WordPress websites. You could also read this article for reference.
Simply rudely compressing images regardless of quality can be counterproductive, as it may make your site hate your visitors. What we’re trying to do is compress the image without compromising, or minimally, image quality. There are a few tricks that allow you to reduce the file size of your images and maintain the quality so that the user doesn’t realize you’ve compressed your images. So let’s take a look at how to format images without making them ugly, and how to optimize them for web pages and performance.
Large images can slow down your web pages, resulting in a poor user experience. To optimize images, you can use plugins or scripts to reduce file size to speed up page load time. Lossy and lossless compression are two commonly used methods.
Benefits to compress images
First, why do you need to compress images? what is the benefit? Optimizing images for better performance has many benefits. According to HTTP Archive, as of November 2018, images accounted for an average of 21% of the total volume of web pages. Therefore, when optimizing your WordPress site, images are the first place you should start!
It’s more important than optimizing scripts and fonts. An image optimization workflow is one of the easiest jobs to accomplish, but it is overlooked by many website owners.
- It will improve your page load speed. If your page takes a long time to load, visitors may be reluctant to wait and bounce.
- Search Enginees likes those websites that take less time to load. So they will more likely give you a better ranking
- Creating backups will be faster.
- Smaller image file sizes use less bandwidth.
- Requires less storage space on the server (it depends on how many thumbnails you optimize)
How to Optimize Images for Web and Performance
The main goal of optimizing images is to find a balance between minimal file size and acceptable quality. There is more than one way to optimize your images. One of the most popular methods is to simply compress them before uploading to WordPress. Typically, this can be done in tools like Adobe Photoshop or Affinity Photo. Some of these tasks can also be performed using plugins, which we describe in detail below.
The two main things to consider are the file format and compression type you use. By choosing the right combination of file format and compression type, you can reduce image size by up to 5 times. You will have to experiment with each image or file format to see the best results.
Choose the correct image format
Before you start modifying your images, make sure you have the best file type selected. You can use several types of files:
- PNG – Produces higher quality images, but also larger file sizes. Lossless image format, although it can also be lossy.
- JPEG – Uses lossy and lossless optimizations. You can adjust the quality level to achieve a good balance of quality and file size.
- GIF – uses only 256 colors. This is the best choice for animated images. It only uses lossless compression.
There are several others, such as JPEG XR and WebP, but not all browsers support it. Ideally, you should choose JPEG (or JPG) for colorful images and PNG for relatively simple images.
Compressed mass and volume
Below is an example of what happens when you compress too many images. The first is to use a very low compression ratio, which results in the highest quality (but larger file size). The second is to use a very high compression ratio, which results in very low image quality (but smaller file size). Note: The original unmodified image is 2.06 MB.
As you can see, the first image above is 590 KB. That’s pretty big for one photo! For general website pages we should keep the total size of no more than 1 or 2MB. 590KB is already a quarter of that. The second image obviously looks bad, but is only 68 KB. What you have to do is find a balance between your compression ratio (quality) and file size.
So we compress the image again with a medium compression rate, as shown below, the quality is still very good, and the file size is 151 KB, which is acceptable for high-resolution photos. This is nearly 4 times smaller than the original photo with low compression. Generally, images like PNG should be under 100 KB or less for best performance.
lossy and lossless compression
It’s also important to understand that there are two types of compression you can use – lossy and lossless.
Lossy – this is a filter that removes some data. This will reduce the image quality, so you must be careful to reduce the weight of the image. The file size can be reduced a lot. You can adjust the quality settings of your images using tools like Adobe Photoshop, Affinity Photo or other image editors. The example we used above was using lossy compression.
Lossless – This is a filter that compresses data. This does not reduce quality, but requires decompression of the image before rendering. You can perform lossless compression on the desktop using tools like Photoshop, FileOptimizer or ImageOptim.
It’s best to experiment with different compression techniques to see which works best for each image or format. If your tool has an option, make sure to save as a web image. This is an option in many image editors that will give you quality adjustments so you can perform optimal compression. The image loses some quality, so try to find the best balance to reduce volume as much as possible without compromising quality.
Software to compress images
There are many choices of image optimization tools and programs, both paid and free, that you can use to optimize your images. Some give you the tools to optimize, while others do it directly for you. Affinity Photo is a very good option, cheaper than Adobe Photoshop, but with almost the same features.
Here are some of the tools and programs we have collected that can be used for image compression:
Use WordPress Image Compression Plugins
Thankfully, with WordPress, you can use plugins to compress images to speed up WordPress websites. Some plugins automatically compress images files as you upload them, and even optimize images you’ve already uploaded. This is a very handy feature – especially if your site has a lot of stock images. Here are some of the best plugins to format images for better performance.
But it is very important that you should not rely 100% on the plugin itself. For example, you should not upload 2MB images to the WordPress media library. This can cause your web host to run out of hard drive space very quickly. The best way to do this is to quickly resize the image in a photo editing tool beforehand, then upload it and reduce it further using the plugins below.
Imagify Image Optimizer
Imagify was created by the team that developed WP Rocket, and most of you are probably familiar with it. Compatible with WooCommerce, NextGen Gallery and WP Retina. It also features batch optimization and you can choose from three different compression levels, normal, aggressive and ultra. It also offers a restore function, so if you are not satisfied with the quality, you can restore and recompress with one click to make it more suitable for your needs. The plugin provides free and premium versions, of which the free version is relatively stingy and only has a quota of 25MB.
ShortPixel Image Optimizer
ShortPixel Image Optimizer is a free plugin that compresses 100 images per month and supports compressing many types of files, including PNG, JPG, GIF, WebP and even PDF files. It provides lossy and lossless image compression and supports CMYK to RGB conversion. It puts your images and thumbnails into the cloud for processing, and then sends them back to your website server to replace the originals. The plugin creates backups of the original files so that you can restore them manually if needed. The plugin also supports batch conversion of gallery files, and there is no limit to the file size.
Optimole is a WordPress image optimization plugin that automatically reduces the size of images without any manual work. It has a big advantage in the loading speed of your website because it is completely cloud-based and never serves larger images than they should be, taking care of both the visitor and the browser.
Additionally, the plugin offers lazy loading and efficient image replacement – which reduces image quality if the visitor has a slow internet connection – which makes it stand out from the crowd. It will also automatically detect the user’s browser and display WebP format images according to the actual situation.
All images compressed by Optimole are served through a fast CDN. You can try Optimole for free, and if you need extra bandwidth and processing space, consider upgrading to a paid plan.
EWWW Image Optimizer Cloud
EWWW Image Optimizer Cloud helps you shrink your images, speed up website creation and reduce hassle. With no size limit and enough flexibility, you can use the defaults, or customize the plugin to your liking. All EWWW IO users can use the batch optimizer to compress their existing images, or use the Media Library list mode to select specific images to compress.
Additional folders can be scanned to ensure that every image on your website is properly optimized. EWWW IO even allows you to convert images to next-generation formats like WebP or find the best image format for images with multiple format conversion options. Image compression starts at just $0.003 per image.
Optimus Image Optimizer
Optimus WordPress Image Optimizer uses lossless compression to optimize your images. Lossless means you won’t see any quality loss. It supports WooCoomerce and multisite, and for those with already large existing media libraries, it offers great batch optimization capabilities. It is also compatible with the WP Retina WordPress plugin. The plugin is also available in free and paid versions. In the paid version, you pay once a year and you can compress an unlimited amount of images. If you combine it with the Cache Enabler plugin, you can also dive into WebP images, a new lightweight image format from Google.
WP Smush has free and premium versions. It will reduce the hidden information in the image to reduce size without losing quality. When you upload images to your website, it scans the images and reduces them. It also scans your uploaded images and reduces them. It will batch refresh up to 50 files at the same time. You can also do it manually if needed. It supports JPEG, GIF and PNG image types, but the file size is limited to 1MB.
- It is compatible with some of the most popular media library plugins like WP All Import and WPML.
- All image optimizations use lossless compression techniques to maintain high image quality.
- The directory where the images are saved doesn’t matter. Smush finds and compresses them.
- Smush has the option to automatically set the width and height of all images, so all images are resized to the same ratio.
TinyPNG (also compressed JPGs)
Compress JPEG & PNG Images will be familiar to users of TinyPNG; this is the plugin version of the tool. This allows you to use the TinyPNG service directly from your site, making it one of the most user-friendly options.
The plugin sends each uploaded image to the TinyPNG service to automatically determine the best way to compress the image. This image is then optimized and returned to your site. Compress JPEG and PNG images can also batch compress your existing files.
- Enables you to automatically resize images.
- Compress animated images.
- Convert images from CMYK to RGB to save extra space.
- This plugin is free to use and compresses up to 500 images per month for free. After that, you can purchase additional packs for $0.009 per image. TinyPNG provides a handy price calculator that can be used to estimate prices based on your requirements.
Jetpack Image CDN
Jetpack is a popular WordPress toolkit plugin that includes image optimization in the form of a service CDN. Formerly known as Photon, this module lets you speed up the load time of images on your website by toggling a single setting (located at Jetpack > Settings > Writing).
Image CDN utilizes the image_downsize filter to quickly optimize images on articles and pages, including featured images and thumbnails. After selecting the Accelerated Image and Photos setting, all of your articles will have their images optimized using the Image CDN.
Automatically resize optimized images so they don’t affect the look of your chosen theme.
Very easy to set up.
Filter content without changing image information in the database.
The free version of the Jetpack plugin includes full Image CDN functionality, but a premium plan is also available.
Speed is critical to your website as audience always lack of patience to wait for the loading of your pages. Search engine does not like the low speed website either. So we need to how to compress images to speed up WordPress websites. For WordPress webmasters, the most convenient and effective way is to use the plugin.