Smart Image Compression with Optimus WordPress Plugin

Utilizing image compression is one of the quickest ways to increase your page speed and minimize the total size of your pages. And because of that, the team at KeyCDN has developed a WordPress plugin, Optimus, which focuses on lossless compression of PNG images and slightly lossy compression of JPEG images.

According to a 2022 report from HTTP Archive, on average, 45 percent of a website's page weight is made up of images.

In our last post "10 Website Speed Test Tools for Analyzing Web Performance" we mentioned different ways you can optimize your code, but as you can see your number one priority should first be optimizing and compressing your images. You will see the quickest gains by reducing the size of your images.

We also interviewed over 20 web performance experts and 46% of them said that the number one priority or focus should be on image optimization.

Lossy compression vs lossless compression

There are two different types of image compression methods you can use, lossy and lossless. While you want to opt for high compression, you also want to ensure you are maintaining the quality of your images. And because of that, the Optimus WordPress plugin uses a combination of both methods while maintaining the visible quality of images.

Lossy compression

Lossy compression refers to compression in which some of the data from the original file (JPEG) is lost. This results in a significantly reduced file size, but it also means there is quality loss. By default WordPress uses a lossy compression rate of 82 percent to optimize JPEG images when creating preview images. You can change this using the filter jpeg_quality in your functions.php file.

Lossless compression

Lossless compression refers to compression in which the image is reduced without any quality loss. Optimus removes unnecessary metadata from JPEG and PNG files. Depending upon the images, reductions of up to 70% are possible. Even images exported from Photoshop using the "Save for Web" function can still see significant reductions.

PageSpeed Insights - Image optimization

Google PageSpeed Insights offers two recommendations when it comes to optimizing your images. Here are two examples you are probably familiar with below:

1. Optimization suggestion: "By compressing ... you could save 4.7 KB (30%) without losses."

This recommendation refers to using the lossless compression method as we mentioned above. You can easily fix this by using the Optimus WordPress plugin.

2. Optimization suggestion: "By compressing and adjusting the size of ... you can save 5.8 KB (51%)."

This recommendation refers to your images being scaled down by your browser. For example, maybe the image you upload has a 400px width, but the column it was placed in is only 300px wide. This results in your image being scaled down to 300px due to CSS so that it matches the column size. This can also be a problem in a lot of WordPress themes because developers tend to scale things down in responsive themes using CSS.

It is better to always upload images at scale. Or you can also upload multiple resolutions of your images and serve the right resolution for the right device.

Optimus features

The main goal of Optimus is large file compression while maintaining quality. It includes the following features:

• Compression of both JPEG and PNG Files
• WebP Conversion
• Maximum File Size: 5 MB
• Unlimited amount of images
• Progressive JPEGs
• Reduction of file size with no visible change in image quality
• Automatic optimization of original and preview images (this includes WP thumbnails)
• Compatible with WordPress Multisite and WooCommerce
• HTTPS connection
• Images aren't stored on Optimus servers
• Bulk optimization (optimize existing images)
• Support from the team at KeyCDN

WebP conversion

Optimus supports converting to the WebP file format. WebP is a new image format developed by Google that provides lossy and lossless compression of images on the web. WebP is a sophisticated alternative method for convenient image compression that is now entering the market.

According to Google, WebP lossless images are 26% smaller than PNGs and 25-34% smaller than JPEG images.

You can add the following snippet to your .htaccess file to support the serving of WebP format instead of JPEG or PNG images.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Read more about the advantages of converting to WebP for your next project.

Progressive JPEGs

Optimus also creates progressive JEPGs as an output. Normally JPEGs will load from top to bottom, these are known as baseline images. Progressive JPEGs are different in that they show the entire image right away, but only load some of the data, meaning it might look slightly pixelated until the image fully loads. You can see examples below.

Depending on the file size, progressive JPEGs can be much better optimized, resulting in a smaller output size (leading to faster load times). Also when it comes to what the visitor sees, would you rather them see half an image or a slightly pixelated image until full load?

Bulk optimization

The Optimus plugin does allow bulk optimization of your existing images. This can be useful after you install the plugin for the first time in WordPress. There are two different ways you can do this.

1. Navigate to Tools in WordPress and click on "Optimize all Images." This will compress all images that have not yet been compressed in your WordPress media library. Depending upon the size of your library this could take some time.

2. You can also optimize images by selecting them in bulk via the media library in WordPress.

Transparent data privacy policy

Data privacy is very important and that is why every image that is transferred to the Optimus server for optimization is then deleted immediately. The Optimus servers are located in Germany and all the connections use SSL encryption.

How does Optimus work?

When you upload images to the media library in WordPress, the Optimus plugin simultaneously sends the images to the Optimus server for compression and then they are sent back in an optimized form. The plugin then saves the image version with a reduced file size in the media library.

The optimization of images, including thumbnails, is conducted in the background and outside of the view of the user. The compression gains per file are displayed by Optimus within the media library in the form of a percentage value. See the example below.

Pricing

Optimus has three different types of licenses you can choose from: Optimus, Optimus HQ, and Optimus HQ Pro. The pricing is unique compared to most other online compression services or plugins in that it is a one-time charge per year instead of a monthly subscription.

Optimus - Free version

Free: Optimus supports both JPEG and PNG compression but is restricted to a maximum file size of 100 KB. It supports an unlimited amount of images and progressive JPEGs.

Optimus HQ

$39/year: Optimus HQ supports a maximum file size of 10 MB, both JPEG and PNG compression, HTTPS connection, WebP Conversion, an unlimited amount of images, and progressive JPEGs. You can use this license on all of your own projects.

Optimus HQ Pro

$169/year: Optimus HQ Pro supports all of the same features as Optimus HQ, but you can use it on all of your own projects as well as your customer's and client's projects.

Read more about determining which license is right for you.

Optimus plugin options

You can download Optimus from the WordPress Plugins or purchase it from the Optimus website. If you purchase a premium license you will receive it via email. To activate the plugin simply click into plugins, scroll down and enter your Optimus license key.

Once in the plugin, you have the following options:

• Images sizes: Here you will see the different image sizes being compressed. This is pulled based upon your theme and plugins you have installed. By default WordPress will have thumbnail, medium, large, and post-thumbnail.
• Ignore original images: You could use this option if you want to preserve the original image and only compress thumbnails.
• Keep image metadata : Keeps EXIF, copyright and photo information in images.
• WebP Files: Creation of the new Google image format WebP (Optimus HQ and HQ Pro).
• HTTPS connection: Transfer images securely over TLS encryption (Optimus HQ and HQ Pro).
• Manual optimization: No optimization of images during the upload process.

Summary

If you haven't yet started optimizing your images, download Optimus and test out the compression results for yourself. It is a great WordPress image compression solution. Take advantage of smart image compression, progressive JPEGs, WebP conversion, and a unique yearly plan with no limit on the number of images you can compress.

The team here at KeyCDN is ready to help you speed up your website and automate your image compression!