13 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Smart Image Compression with Optimus WordPress Plugin

Smart Image Compression with Optimus WordPress Plugin

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. You can also take advantage of the developer API for projects that aren’t related to WordPress.

According to a 2016 report from HTTP Archive, on average, 64 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.

Standalone Tools

Using standalone tools are probably the best way to compress the images, but there will be limited either by size or number of images you can upload. So you got to try which one is best for you.

Tiny PNG

TinyPNG uses smart lossy compression techniques to reduce the file size of PNG or JPG files. You can upload up to 20 images with a max of 5 MB each.

tinypng

Compressor

Compress and reduce your image size up to 90% with Compressor while maintaining high-quality resolution. It supports JPEG, PNG, GIF & SVG and files size limit is 10 MB.

compressor

Puny PNG

PunyPNG compression that just works for designers and developers. It may not be suitable if your image size in MB as the limit is 150KB each for up to 10 files. It compresses JPG, GIF & PNG file types.

Compress Now

Reduce the weight of image files with Compressnow. Unique about this tool is you can choose % of compression to get results. So it’s under your control the level of compression you want.

Kraken

Kraken lets you select the optimization mode between LOSSY, LOSSLESS, and EXPERT. You can upload a file from your computer, Dropbox, Google Drive or Box.

Optimi Zilla

Upload up to 20 files in JPEG and PNG formats at OptimiZilla. If you upload multiple files, then you have the option to download them all at once.

Читайте так же:
Бесплатные программы для Windows скачать бесплатно

Imagify

You have the option to choose the compressed level between normal, aggressive and ultra. Imagify keep your files for 24 hours so you can download later if you wish.

imagify

The above standalone tools should be able to help you in reducing the files. Let’s take a look at the following WordPress plugin.

Image Lazyloading and inlining

The Fasterize engine automatically prioritizes images located «above the fold.» Images further down load as the user scrolls down the page. Our script does not execute on the first few images, however, in order to prevent images above the fold from holding up script execution, as well as to ensure that they are displayed as quickly as possible.

Image inlining is the technique of encoding small images directly into the HTML (Base 64). Rather than issue an additional request, which can cause considerable lag, the browser reads the image directly from the HTML source.
Our engine applies this optimization to small images, because it’s better to add a few hundred bytes to the HTML page than to issue a new request, which can take up to 500ms.
With Fasterize, these techniques work together without interfering with one another. Lazy loaded images are not inlined, and inlined images are not lazy loaded. The Fasterize engine intelligently combines different rules for maximum effect while also avoiding any combinations that could be counter-productive.

If the visitor’s browser does not support WebP, then the CDN will return the old format (png / jpeg), but compressed (optimized for the Web)

What is image compression

Image optimization is special processing of a graphic file in order to minimize its size without loss of visual quality.

To carry out this procedure, there are a large number of fairly complex algorithms. However, they are all based on the same basis — all the service data there (for example, the name of the program that stores the file, etc.) must be removed from the graphic file, and also, using special programs, merge / smooth similar colors.

As a result, we get the same image, which visually has not changed. However, the volume (weight) of this file in bytes will be much less than the original. If this processing is carried out correctly, the image file can be reduced to 98% without losing image quality.

Читайте так же:
Как зарегистрироваться в Телеграмме

This means that the pictures on the pages of the site will be loaded many times faster after the optimization.

What will optimize images for your site

  • Save disk space.
  • Speed ​​up page loading.
  • Minimum server load.
  • Increase conversion.
  • Better site ranking for search results.

It has been proven that website acceleration can improve behavioral factors, as well as increase website conversion (increase sales). The longer the page of the site loads, the fewer customers will be able to perform certain target actions there. If your site on the Internet will not work fast enough, you have every chance to miss your potential income. Acceleration of the online resource will provide an opportunity to improve the conversion and due to this significantly increase revenue and attract more customers.

Enable Fastly IO

You can enable Fastly image optimization (Fastly IO) from the Admin panel by uploading the Fastly IO VCL snippet. When you upload the VCL snippet, it provides the Fastly service with configuration instructions to process all images through image optimizers, using default configurations.

Prerequisites:

  • Install or upgrade to Fastly module version 1.2.62 or later

To enable Fastly IO:

Log in to your local Admin panel as an administrator.

Click Stores > Settings > Configuration > Advanced > System.

In the right pane, expand Full Page Cache.

Click Fastly Configuration > Image Optimization to specify the configuration settings.

In the Fastly IO snippet field, click Enable/Disable.

Upload the Fastly IO snippet:

  • Click Default IO config options to open the Image optimization default config options page.
  • Click Upload to upload the VCL snippet to your server.

Final thoughts on the best online image optimizer tools

According to our results, Kraken offers the highest compression for JPG images, while Compressor.io won out when it comes to PNG files. You can view a summary of our results one more time below:

Compression ToolJPG Image file compression
(Original file size — 238 KB )
Percentage reduction in JPG FilePNG Image file compression
(original file size- 118 KB )
Percentage reduction in PNG File
JPEG Optimizer79.1 KB66%NANA
Kraken206.59 KB (lossless)
69.77 KB (lossy)
11.32% (lossless)
70.05% (lossy)
64.68 KB (lossless)
28.56 KB (lossy)
44.06% (lossless)
75.30% (lossy)
Tiny PNG162.9 KB32%29.9 KB75%
JPEG.io81.51 KB65%85.04 KB17%
ImageRecycle118.88 KB48.97%24.78 KB78.57%
Compressor.io122.12 KB49%22.80 KB81%
Ezgif119.26 KB48.81%60.56 KB47%

Last but not least, if you’re a website owner and simply want an efficient tool to optimize all images on that website, give Optimole a look. It’s our set-it-and-forget-it image optimizer that works on complete autopilot.

How to optimize image quality

The image quality setting defines the compression level to apply to an image as a value between 1 (smallest file size) and 100 (best visual quality).

The setting you choose entails a trade-off between visual quality and file size: the lower the quality value, the more the file is compressed to a smaller file size, and the more data is lost in the process, the result of which is a loss of visual quality. At the higher quality levels, the loss of visual quality is barely noticeable to the human eye. The ultimate visual quality result also depends on other factors such as the size of the original image and the resolution of the user's monitor or mobile screen.

Adjusting the quality of your images to a level that still provides good visual output, is one of the most powerful tools in image optimization. You can often deliver images at less than half of the original file size with little to no visually noticeable difference. Optimizing image quality can also help improve your Core Web Vitals score.

There are a few ways to control the quality of images delivered from Cloudinary:

Set the default quality for your account

As mentioned above, when you deliver an image with any transformation applied, it also applies a default quality level. Depending on the content, purpose, and audience for the majority of your images, you may want to modify the Default image quality level in the Upload Settings for your account.

You can choose a fixed quality level, or use one of the q_auto options as the default.

When you want specific image transformations to use a quality setting that is different to the default set for your account, or if you are not performing any other transformations on an image you deliver, you can specify the quality level as a transformation.

For example, the q_60 parameter below decreases the delivered file size from 118 KB to 73 KB:

Image set at 60% quality

Set the quality when delivering an image

Control the visual quality and compression level of images with the quality parameter ( q in URLs). This parameter represents the compression level to apply to an image as a value between 1 (smallest file size possible) and 100 (best visual quality). Reducing the quality is a trade-off between visual quality and file size: the lower the quality value, the more the file is compressed to a smaller file size, the more data is lost in the process, and the result is a loss of visual quality. The loss of visual quality is barely noticeable to the human eye at the higher quality levels, and final visual quality also depends on other factors such as the size of the image and the resolution of the user's monitor or mobile screen.

For example, reducing the quality of the uploaded JPEG image named sample to 60 results in a file size of 73 KB compared to the original file size of 245 KB with a barely noticeable reduction in visual quality:

Image with quality set to 60

The quality parameter is also automatically applied when delivering images with any other transformation applied. That is, unless the original uploaded image is requested, then a default quality value of 80 is also automatically applied to the transformed image.

The interactive image example below shows the effect that the various quality settings have on an image's visual quality. The image is scaled down to a width of 600 pixels and initially displayed with a quality setting of 100. Click on the quality buttons below the image to see how different quality settings impact the image quality.

beach hut

  • Images in the WebP format are lossless when specifying a quality of 100, and lossy when specifying a quality less than 100. See the How to support WebP images, save bandwidth and improve user experience blog post for more information on the WebP format.
  • Images in the WebP format are lossless if the quality isn't specified and the original image's format is lossless (e.g., PNG).
  • Animated GIFs ignore the quality setting unless the lossy flag is added. See the Lossy compression for optimizing animated GIFs article for more information.
  • The JPEGmini add-on automatically applies the best compression possible to JPEG images while maintaining a high visual quality.

Toggle chroma subsampling

Chroma subsampling is a method of encoding images by implementing less resolution for chroma information (colors) than for luma information (luminance), taking advantage of the human visual system's lower acuity for color differences than for luminance. To override the default behavior of whether to perform chroma subsampling, a separate value can be added to the quality parameter as follows:

  • 444 can be added to prevent subsampling. For example: q_80:444
  • 420 can be added to force subsampling. For example: q_95:420 .

Automatic quality selection (q_auto)

Cloudinary's intelligent quality and encoding algorithm analyzes an image to find the best quality compression level and optimal encoding settings based on the image content and the viewing browser, in order to produce an image with good visual quality while minimizing the file size. Cloudinary automates the file size versus quality trade-off decision, on the fly using perceptual metrics and heuristics that tune the quality settings based on the specific image content and format. Analyzing every image individually to find the optimal compression level and image encoding settings allows for precise adjustment of the compression level complemented by fine tuning of the encoding settings, and can significantly reduce the file size without any degradation noticeable to the human eye.

To perform automatic quality selection and image encoding adjustments, set the quality transformation parameter to auto ( q_auto in URLs) or apply one of the Automatic options as the default image quality setting for your account.

You can further fine-tune the automatic quality selection as follows:

  • q_auto : The optimal balance between file size and visual quality. By default, this is the same as q_auto:good , while it can automatically switch to the more aggressive q_auto:eco mode (see the note on Save-data support below).
  • q_auto:best : Less aggressive algorithm. Generates bigger files with potentially better visual quality. Example of a target audience: photography sites that display images with a high visual quality.
  • q_auto:good : Ensuring a relatively small file size with good visual quality.
  • q_auto:eco : More aggressive algorithm, which results in smaller files of slightly lower visual quality. Example of a target audience: popular sites and social networks with a huge amount of traffic.
  • q_auto:low : Most aggressive algorithm, which results in the smallest files of low visual quality. Example of a target audience: sites using thumbnail images that link to higher quality images.

Examples of the resulting file size when encoding a photograph, using various regular and automatic quality parameter values:

Original Original (569KB) q_80 q_80 (80.3KB) q_auto:best q_auto:best (65.9KB) q_auto:good q_auto:good (56.9KB) q_auto:eco q_auto:eco (45.0KB) q_auto:low q_auto:low (35.0KB)

голоса
Рейтинг статьи
Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector