The ultimate WordPress image compression optimization tutorial, with plugin comparison, TinyPNG, ShortPixel

Images are an essential element of the page as they can describe the content more visually and make the content more attractive to increase the conversion rate. Too many/too many images will increase the size of the page resulting in slow loading speed, increased server load and CDN traffic costs.

According toHTTP ArchiveAccording to the data, on average, images account for about half of the page size of an average website, and optimizing images becomes the key to reducing website size and improving page load speed.

Why must WordPress websites compress images?

We have seen many websites with huge photos that are not optimized for compression. The pages load slowly and the images take a long time to load. This kind of website has very poor customer experience and gives visitors a bad first impression, most of them will choose to bounce out.

In general the page volume has 60% (or even more) is pictures, by compressing pictures can greatly reduce the page volume without losing picture quality. Thus greatly shorten the loading time and shrink the bandwidth, CDN costs, but also improve to improve user experience, SEO effects and conversion rate, very necessary.

What is WebP, Avif image format?

WebP format is a new generation image format introduced by Google, which reduces the volume by about 30% on average than the regular JPG format, and currently 96% browsers/software support this format. To minimize the size of the image must be converted to WebP format.

Avif format is more advanced, the volume is about 25% less than WebP format on average but the clarity is higher! Avif format is very necessary! But currently more devices do not support it. According to Caniuse, today there are 95% user devices that support WebP and only 67% user devices that support Avif.

To reduce the size of the image without reducing the clarity of one of the good way is to use the plug-in to convert the image from Jpg/Png to WebP/Avif, if the browser does not support Avif/WebP format will automatically switch to display Jpg/Png format.

The best way to optimize WordPress image compression is by installing compression plugins. Diamo selects and compares 4 excellent image optimization plugins for you to choose based on the use experience.

Don't upload WebP and Avif format photos directly to your website for use! Some devices do not support these 2 formats, which may cause abnormal display of images. It is recommended to upload Jpg, Png photos and then use the plugin to generate WebP, Avif formats. If you encounter a device that does not support these 2 formats, it will display Jpg, Png format instead.

If you want to convert WebP, Avif to Jpg, Png, you can useConvertioYou can also use online conversion tools such as "Convert". After selecting the original image and the target image format, upload the image and click "Convert".

Select the correct image format, size, resolution (DPI)

WebP pictures may be wrong after using the plug-in compression leading to wrong picture display, blurring, etc.

Regular images should be in Jpg format, which displays well and has the smallest size. In fact the vast majority of images should be preferred in jpg format.

PNG is a lossless format, clearer and generally larger in size. PNG format should be chosen for transparent background images or some high-definition icons. Images with a single color, such as text screenshots, should also be in PNG format, which is smaller than JPG. Knowledge point: WebP format supports transparent backgrounds.

Icons, Logos, cartoon illustrations and so on try to choose SVG format, regardless of zoom in and out are very clear, the volume of the smallest. If a page SVG icon as many as a dozen volume to dozens of KB, switch to woff and other icon fonts will reduce the volume a little.

Animation if only 1-3 seconds with Gif format browsing experience is better, if longer time to video format will be smaller, the video can also be delayed loading speed faster.

You should also pay attention to the size of the picture, and make the picture according to the actual size of the display so that the display is the clearest and the volume is the smallest. For example, if the displayed size is 600px, make a 600px image to show the clearest and smallest size.

If the photo produced is larger than 600px, the clarity of the image displayed may be reduced, and the loading speed will be relatively slower due to the large size. If it is a responsive web page, we should consider the size of the picture on the cell phone, and the size of a picture displayed on the cell phone may be larger than that on the computer.

If it is a product detail page product pictures will come with a magnifying glass effect, the picture size should be made larger instead. The cell phone picture display size is smaller than the computer side, use elementor or other separate production page to separate the cell phone picture display size set a little smaller, or directly use a smaller size picture.

Image resolution (DPI)It is also an important factor that affects the volume of the picture, the higher the DPI the larger the picture volume. Have you ever encountered a picture no matter how to compress the volume is very large? That is because the DPI of the picture is set too high, some artists consider the quality of printing will make the picture 300DPI.

DPI is only useful for printing, the higher the value, the clearer the printout. But the web page will not use DPI, whether set to 300 or 72, the size and clarity of the picture displayed on the web page is the same, but the volume of 300 DPI pictures is 72 DPI several times!

So be sure to set the DPI to 72 when making pictures, or save the picture output as "Web Common Format" (which will automatically set 72 DPI), which can greatly reduce the size of the picture.

If the image has been created, direct use of PS etc. to modify the DPI will result in a smaller image size. It is recommended to use freeOnline Photo Resolution (DPI) Modification ToolModify the image DPI to 72, the image size will be saved unchanged.

WordPress image compression plug-in comparison recommendation

Let's start with the conclusion that there is no best image compression plug-in, only the most suitable one. To choose the right plug-in according to their own picture situation and the requirements of the picture quality.

Don't over pursue the image compression rate, you should give priority to the image display quality, clear photos provide better customer experience and conversion rate. The impact of a photo with more or less than 10KB on the speed is basically negligible, and you can also delay loading, pre-loading and other methods to optimize the image loading.

1) If the web server is inForeign(Don't use it for domestic website) and the number of visitors per month (by IP) is less than5KRecommended for priority useOptimole. Free, support WebP/Avif, unlimited number of images, support CDN, good effect, unbeatable.

If it is a foreign trade website, the picture is not much pre-basic no traffic. It is recommended to use Optimole, the effect is good and simple to use. Waiting for the traffic up to earn money and then change to ShortPixel, switch over is also very simple, the cost is not high.

2) If Optimole is not suitable and you are willing to spend money to use it directlyShortPixelIt is a full-featured, effective, Avif-supporting, trouble-free package. Spend $9.9 to buy a permanent compression package can compress 10,000 photos, minus the thumbnail size and WebP, Avif amount can actually compress 1,000 ~ 2,000 photos, small and medium-sized sites enough.

3) If Optimole is not suitable, and do not want to spend a penny, not many pictures recommended to useImagifyIt saves you time + free + good results. Free account has 20M/month compression quota, you can register multiple free accounts to switch to use, small and medium-sized sites enough. If you are willing to spend money, you can also spend $4.99 to buy 500M compression quota (can compress 300-500 photos, valid for one month), $9.99 unlimited compression quota (valid for one month).

4) If none of the above options are suitable, and you don't want to spend money, and you don't like the hassle of signing up for multiple accounts to switch, we recommend usingTinyPNG + Performance Lab (PL) The free account can compress 500 photos a month (completely enough, you can also register multiple accounts to switch to use), and the best quality of image compression.

Note: Programs4)It is not possible to convert the photos that have been uploaded to the media library before installing the plugin to WebP format, this solution is more suitable for new websites.

5) If you use SiteGround Optimizer, LiteSpeed Cache and other plug-ins, it is recommended to use the image compression function that comes with the plug-in, there is no limit on the amount, simple and trouble-free, but also to WebP.

All the photos you see on this tutorial page are watermarked using the Easy Watermark plugin and then compressed using TinyPNG.

Optimole, ShortPixel, Imagify, TinyPNG (2022.12) Detailed comparison table

	Optimole	ShortPixel	Imagify	TinyPNG+PL
Installation volume	100,000+	300,000+	700,000+	200,000+
User Comments	5 stars	4.5 stars	4.5 stars	4.5 stars
Free Account Limit	5k visitors	100 sheets	20M	500 sheets
Minimum Payment Package	$20.04/month- 25,000 visitors/month	$4.99/month - 7k sessions (can be bought for one month only) $9.99 - 10,000 times	$4.99/month - 500M (can be bought for one month only) $9.99/month - Unlimited	$5.4 - 1100 sheets
WebP format	✓	✓	✓	✕
Avif format	✓	✓	✕	✕
Image CDN	✓	✕	✕	✕
Automatic image resizing	✓	✕	✕	✕
Retina support	✓	✓	✓	✕
Delayed loading	✓	✕	✕	✕
Adjust the compression level	✓	✓	✓	✕
Compression method	Online compression	Online compression	Online compression	Local Compression
Png to Jpg	✕	✓	✕	✕
Compressed Gif	✓	✓	✕	✕
Advantages	Free, fully functional and effective, with CDN function, AVIF support	Full-featured, effective, hassle-free, AVIF support	Free, easy to set up and fully functional support for WebP	Free + more credits; best compression quality/speed; least burden on server
Disadvantages	Not suitable for mainland websites, limit 5,000 visitors/month	Have to spend money	AVIF is not supported, you have to pay or register multiple accounts to use	AVIF is not supported and the original image cannot be recovered

Optimole

It's a latecomer, not many people know about it yet, only 100,000+ installations so far. I saw its introduction in the overseas speed optimization blogger Tom and installed it with the mindset of trying it out. After a period of use found Optimole really good, is by far the best picture optimization plug-ins we have used!

It also comes with a CDN function can be images, CSS, JS into the Amazon CDN acceleration, with this plug-in can not even use other CDN services! There is also a cloud storage image function, if your pictures are particularly many server hard disk capacity is not enough to move all the pictures to the cloud (media library does not store pictures).

Optimole Benefits.

1. The ability to delay the loading of background images, which can exclude the delayed loading of selected images.
2. Automatic resizing of images on mobile to enhance loading speed;
3. Converting images to WebP/AVIF format.
4. Free! No limit to the number of times you can compress/convert images!
5. Automatic resizing of images according to the size of the visitor's screen.
6. Automatic image quality reduction when slower networks are detected.
7. Using the Amazon CloudFront CDN.
8. Retina support, intelligent cropping.
9. Delayed loading of images without jQuery (better).
10. Image watermarking function.

So many advanced, powerful features + free + unlimited compression / conversion times + CloudFront CDN (more than 200 nodes worldwide, the speed is not slower than Cloudfalre) + SVG, GIF compression + image exclusion function. I just ask: who else!

It is worth noting that Optimole supports automatic image resizing for mobile, which is not available in other image optimization plugins. The general size of the banner image on the computer side is 1920px, and the volume is usually more than 100kb, while the mobile side usually shows a size of no more than 500px and a volume of 50kb or less.

If the mobile terminal can automatically adjust the image size according to the screen size, the volume of the banner image alone can be reduced by at least 60kb, and the volume of a whole page can be reduced by at least 120kb. This is very helpful to improve the speed of the mobile side, but also can improve the Google speed test mobile end score!

There is no such thing as a free lunch. The free account only has an accelerated effect on the first 5,000 visitors to the site each month (by ip/browsing device, repeat visitors are counted only once). The first 5,001 visitors will start showing uncompressed images in their original format (equivalent to this plugin being disabled) and the quota will be restored the next month.

If you don't want to pay, Optimole is only suitable for websites with less than 5,000 monthly visitors, such as foreign trade B2B websites.Click to see how to count the number of visits and details. Forced use of CloudFront CDN cannot be turned off.

CloudFront CDN has these nodes in China: Shanghai (1); Shenzhen (1); Zhongwei (1); Beijing (1); Hong Kong (4). We haven't tested it and don't know how the speed is in China, if you have tested it welcome to give us feedback.

The use of the process found that the 5,000 quota is very durable, will not count the number of known crawlers / robots browse, repeat visits are not counted, the vast majority of B2B foreign trade independent sites and small blogs will not exceed the quota. If the traffic more than the amount, it is recommended to use ShortPixel and other plug-ins.

The Optimole settings screen shows the amount of used visitors. For example, the image below shows a total of 5k credits and 14 used (0.28%).

If the site has more than 5,000 visitors per month, an email will be sent to you with a prompt to purchase a paid package, and there will be a prompt on the plugin settings page as well as in the media library ↓. No automatic deduction will be made and the amount will be restored next month. Exceeding the quota may cause some images on the site to be displayed incorrectly, so deal with it promptly.

Optimole setup tutorial

Go to the settings screen

Enter your email address↓ and click "Create & conect your account". It will send you an email to activate the mailbox, in fact, do not care, the plug-in will be used as usual.

Go to the Settings > General section.

Note: The same feature can only be enabled in one plugin/theme, if you enable features like delayed loading in Optimole, don't enable it in other plugins!

Enable image replacement.Turn it on and enable it before compressing to WebP, etc.

Scaling images and delayed loading.Open, you can delay the loading of images and in the small size screen (cell phone + tablet side) will be displayed according to the screen size of the corresponding picture, greatly reducing the size of the picture, improve the page loading speed.

Enable error diagnosis tool.Close. Provides a troubleshooting mechanism that can help identify possible problems with the site using Optimole. Enabling it will increase the burden on the server, if the site has problems then turn on this option to see the cause, clickView Details.

Enable Optimole badge:When opened it will display the icon below in the bottom right corner of the front end page, advertising Optimole. In return the free package will increase the amount of visits from 5k to 25k, which is very fragrant!

Please choose whether to open it or not according to your personal situation. From a marketing point of view when the number of users reaches a certain number, the official should cancel the activity, forcing some users to buy packages, which can both attract traffic and increase sales.

Next, click into the "Advanced" > "Compression" settings section ↓, read the explanation of the function and turn it on as needed.

Enable network based optimizations.Turn on to automatically reduce image quality and shorten loading time when slower networks are detected.

Serving CSS and JS via Optimole.off, it is better to use a CDN like Cloudflare. After all, more than 5000 visitors Optimole will fail, CSS and JS CDN acceleration on Barbie Q, and it does not support HTML, font acceleration.

Turn on Gif to video conversion.Open, the video volume is at least 1/3 smaller than Gif, and the video can delay loading to shorten the loading time. If the gif is similar to the kind of expression packets with small size and short time (small volume), the volume itself is small, do not recommend to turn into video and turn off this function.

Enable avif conversion.Open, greatly reduce the size of the image, the clarity is basically the same.

Enable Auto Quality powered by ML (Machine Learning).It is recommended to open it, and it will adjust the compression level according to each picture. This is a trend, different photos need different compression levels to show the best results, a uniform compression level is not good for some photos.

If you do not open, you can manually select all pictures uniform compression level, generally select the most appropriate grade. If it is a photography website needs to display pictures super clear, choose high-grade.

Tip: Some websites have been tested to enable "Enable Auto Quality powered by ML"After some pictures are compressed too much and become blurred, encounter this situationIn case of a problem, please turn off this mode and select the compression level manually instead, choose high level. If it still doesn't work, exclude the image from being compressed.

Go to the "Resize" section ↓ and set it according to the picture.

Enable smart cropping.It is recommended to turn it off. This feature automatically adjusts to show the main part of the image after the image goes out of the display box, instead of fixing the top part of the image. This feature is not used much and may conflict with other plugin image features (e.g. delayed loading, autoscaling, etc.).

Enable retinal images.When turned on, if the visitor is using a Retina HD retina device, a retina definition image will be provided to the visitor. retina requires the image size to be 2 times larger than the actual size displayed, if your image is made to the size displayed, turn this feature off.

If your image size is more than 2 times larger than the actual display size (for example, display out 600 * 600, the image size should be at least 1200 * 1200), and you want to display clear images in HD devices, turn on this feature. Note: Enabling this feature will increase the size of the image and slow down the site.

Limit Image Dimensions with max width/height:Turn on to set a custom maximum width or height for the images provided by Optimole. When this setting is enabled, the Retina image option is disabled to ensure consistency between images.

Resize large images original source.Set the maximum photo size that can be uploaded to the media library, exceeding the size will be automatically cropped. The recommended setting is set to 1920 x 1200, the majority of website pages have a maximum size of 1920px and will not exceed this size.

You can use this feature to crop images automatically, if you have many different sizes of square product images and want to upload a uniform size of 800*800px. You can set it to 800*800px here, and the uploaded image will be automatically cropped. Set it to 1920*1200px again after uploading.

Some customers find us to optimize the speed of the website, we found that they have not optimized the pictures at all, the size of super large volume goes to 2M. the total volume of the page goes to about 8M! Regular page volume should be 300k~1M, open this function can greatly reduce the volume of large size photos.

The "Exclude" section is set ↓.

Enable generic delayed loading placeholders:The images that are delayed to be loaded after opening will show a blurred version at first, thus improving the page loading speed, which may reduce the customer experience a little. It is recommended to test the display effect after opening, and close this function when you are not satisfied.

Exclude the first X images from lazyload:Open to exclude X images before each page from the delayed loading, set to 3 or 4 depending on the content of the first screen image on the page.

Using native delayed loading:Using the browser's delayed download feature, if enabled will disable the smart crop feature, so it is recommended to turn it off.

Zoom image:Scales the image on delayed loading.

Enable delayed loading for background images:Open. By default, deferred loading does not apply to background images. When enabled, background images can be delayed loaded by adding image CSS.

Enable lazyload for embedded videos and iframes:Open to enable delayed loading for embedded videos and iframes.

Enable noscript tagging:Turn on. By default, this option will be turned off for new users and turned on for users who are already connected. This will help browsers that cannot handle Optimole-based features to load backup images.

Delayed loading of background images for selectors:Enter the ID or Class of the background image that needs to be delayed to load.

The "Exclude" section is set ↓.

If some photos are compressed and you think they become blurred, enter the photo name here to exclude it from compression. Just enter part of the text/English words contained in the image name, or you can enter the full image name. You can also exclude all photos of a specific page or images with a certain suffix (png, svg) from being compressed.

Note: Photos that are excluded from compression will also cancel delayed loading, etc.

Enable cloud library browsing:It is not recommended to enable it. Enabling does not require logging into the backend media library of the website. You can access the photos inside the media stored in the cloud directly online. This feature is useless for the majority of people.

Cloud Integration.It is not recommended to enable it. When enabled, all photos in the media library will be moved to the Optimole cloud and deleted from the website media library. This feature allows you to use Optimole cloud to store photos, thus reducing server load and freeing up hard drive capacity.

This feature is not recommended unless you have a very large number of images and have purchased the Optimole membership package. It is safest and most secure to store the images on your own server. This does not help to improve the speed, but only to manage the photos. It's easy to make mistakes, so don't turn it on.

Note: Some images are loaded via css code (e.g. background images) and Optimole may appear uncompressible. Use firstTinyJPG online image compression toolCompress the images before uploading them to the website media library for use.

After this plugin is set up, the photos uploaded before and after will be automatically compressed and processed without any other operations. If you still don't understand, you can checkOfficial Setup TutorialCheck for gaps. If you have the Elementor plugin installed, you need to regenerate the CSS and data as shown below.

If you have Wp Rocket installed, you may be prompted to disable the delayed loading of Wp Rocket's images to avoid conflicts. If you don't have deferred image loading turned on in Optimole, you don't need to bother with this prompt. The prompt should go away after clearing the cache with Wp Rocket.

If the same function as Optimole is enabled in other plugins, please turn it off, otherwise there will be a conflict.After setting up the site may start to display the wrong picture, that is because the picture is still in the compressed conversion format. About 20 minutes after refreshing the page picture normal display, if the picture is particularly large waiting time will be longer.

Now open the page with Google Chrome and press F12 to enter Developer Tools to see that the URL of the image has been replaced with the Optimole.com URL, which means that the image compression and CDN acceleration have taken effect. Now you can useGTmetrixThe test tools such as the "page size" and "load speed" tests are used to see the changes in page size and loading speed.

Optimole FAQ

1- Pictures become very blurry

Turn off the "Enable Auto Quality powered by ML (Machine Learning)" function in the "Compression" tab, and manually select the compression level, and try the highest level. If it does not recover. If it still does not recover, exclude blurred photos from being compressed.

2- SVG image/icon color change

Some SVG images/icons will change color after being compressed, just exclude being compressed.

TinyPNG + Performance Lab

TinyPNG is a big-name, old-fashioned freeOnline image compression sitesIt is a good way to compress the image size to the maximum while retaining clarity. Later introducedTinyPNG - JPEG, PNG & WebP image compressionThis image compression plugin. Free! You can compress 500 pictures per month, the picture compression effect is better than ShortPixel, Imagify, the pictures on this site use TinyPNG plug-in to compress pictures.

TinyPNG plugin advantages.

1. A large number of free accounts (500/month) and the possibility of registering multiple accounts to switch compression, the amount of which is not a problem at all.
2. The best quality and fastest compression of images.
3. Minimal size of the plug-in and minimal burden on the server.

TinyPNG's compression effect is the best, we personally tested it and found that many of the compressed photos are smaller and clearer than other plug-ins to WebP! This site uses TinyPNG to compress pictures.

TinyPNG has another disadvantage: you can't recover the original image after compression, and you can't adjust the compression level of a particular image individually. However, it compresses very well and there is basically no need to adjust and restore the photo back.

Some images are more pixelated, and how to compress the volume can not be reduced. Only converted to WebP/Avif to further reduce the volume, one of the disadvantages of TinyPNG is that it does not support conversion to WebP, you need to use with the conversion to WebP/Avif format plug-in or CDN.

The plugin author replied in the forum that WebP format will be supported in the future, very much looking forward to it! Once this plugin supports WebP, it can instantly kill Imagify.

Tencent Cloud, Volcano Engine, and Ali Cloud are three CDNs that have image to WebP/Avif functionality, and TinyPNG is used together to complement each other. If the CDN does not have the image to format function, you can use TinyPNG and Performance Lab or other plug-ins to WebP together (see below for specific configuration).

Install and set up the Performance Lab plug-in

Performance LabIt is another conscientious work of the Perfmatters plugin team, which adds several checks in "Tools" > "Site Health" to help troubleshoot factors affecting site speed. It comes with a conversion WebP function, no additional configuration, free, no quota limit, out of the box is very convenient to use!

Performance Lab converts JPG to WebP and then compresses it with TinyPNG, sometimes better than Imafigy (personally tested), the image volume is basically the same but the details are clearer. The disadvantage is that PNG is not supported, but PNG is a lossless format, after converting WebP (lossy format) will become blurred, does not support PNG is not a bad thing. Usually try to use JPG format.

Note: The WebP function of the Performance Lab plug-in is only effective for JPG, PNG will not be converted to WebP. Only photos uploaded to the media library after installing the plug-in will be converted to WebP automatically, photos already in the media library and photos uploaded via FTP will not be converted to WebP.

Tip: If the JPG photos have been compressed before uploading, or if they are already small in size, they may become larger after conversion to WebP. In this case the plugin will automatically delete the large WebP photos and keep the JPG format (which will still be compressed by TinyPNG).

Next, install the setup plugin. Click to download and installPerformance LabPlugin, click "Perfmance" below to enter the plugin settings after enabling it.

Just open the following 2 items and click "Save Changes". Don't open the other options, especially "SQLite Integration"!

The following setting will also be added in Settings > Media. Enabling this will improve compatibility, but will cause the image to double in size and take up more hard drive space.

After setting, when uploading JPG, the photo will be automatically converted to web format. When you go to the media library, the image suffix becomes .webp.

If you want to adjust the compression quality of WebP images, copy and paste the following code to the bottom of functions.php, and adjust the compression quality according to the website. Note: Don't set it too high, otherwise the image volume may be larger than the original image after converting to WebP, resulting in failure to convert to WebP.

//把WebP压缩质量调整为85(默认82)，最高100，越高越清晰。
function set_webp_quality( $quality, $mime_type ) {
  if ( 'image/webp' === $mime_type ) {
   return 85;
  }
return $quality;
}
add_filter( 'wp_editor_set_quality', 'set_webp_quality', 10, 2 );

Install and set up the TinyPNG plugin

Next download and installTinyPNGplug-in, after enabling the plug-in top will prompt the content of the following chart, click the red box blue words to enter the plug-in settings page.

If you have registered before and already have an API, directly enter the right box and click "Save". If you don't have API, enter your name and email address in the left box and click "Register Account" to send an email to your email address.QQ mailbox can not be registered, use other mailboxes.

Check the email with the subject "Activate your Tinify integration" (it may be in the spam folder), click on "Activate your account" to enter the TinyPNG website personal center. If you do not receive the email, go to https://tinypng.com, click on "LOGIN" in the upper right corner and enter your email address to resend the link.

Click the symbol next to the three dots, and then click the pop-up menu "Enable key" to enable the API. copy the API KEY and fill in the website plug-in settings page and click "Save".

Tap "Change API key"↓.

Enter the API and click "Save", if the API is automatically entered, click "Save" directly.

If you need more than one account, go tohttps://tinyjpg.comRegister. After registration go tohttps://tinify.com/dashboard/apiCopy the middle location api and fill in the plugin settings page link account (Location: "Settings" > "TinyPNG-...") .

If the above URL registration is not successful, go tohttps://tinypng.com/developersRegister, enter your name, email ↓ click "Get your API key". Check your email and click the button inside to log in the background, click "Enable key" to enable the api as shown below, then copy and paste it into the plugin.

After linking the account, it will show the remaining available amount, select the red box Compress new images in the background (Recommended) to compress automatically in the background; the second option is to compress when uploading, which will lead to slow and cardy uploading of photos; the third is to compress manually.

Note: You must select "Compress new images in the background" to compress automatically or "Do not compress new images automatically " to compress the photos after the Performance Lab plugin to WebP.

TinyPNG can not set the compression level and so on, the function is very little. This is because it is a very mature technology and already has the best settings by default, so there is no need to adjust it manually. Each image is automatically analyzed for optimal compression after upload, so there is no need to adjust the compression level.

Color profiles are automatically converted to standard RGB colors, CMYK is automatically converted to RGB to save more space and increase compatibility, and JPEG images are displayed faster using progressive JPEG encoding.

The following chart is to check which sizes of pictures need to be compressed. Compressed thumbnails will also calculate the amount, so do not need to compress the size do not check! The original picture must be checked, the article as well as the product page large image sizeIf soCheck the box, and check the product cover thumbnail size if available. If you are not sure whether the other sizes are used on the website, it is recommended that you do not check them.

Original image: Resize the original image Recommended checkbox

The following 3 items if checked will increase the size of the image, it is recommended not to check, please decide according to your own situation.
Preserve creation date and time in the original image
Preserve the creation date and time in the original image
Preserve copyright information in the original image
Preserve copyright information in the original image
Preserve GPS location in the original image (JPEG only)
Retain GPS location in original image (JPEG only)

This is the end of the setup, and the photos uploaded to the media library will be automatically compressed in the future. If you have already existing photos, you need to go to the media library and compress them manually. Here you can also see the number of compressed and uncompressed images.

Here is the installationWebP Converter For MediacchPlugin tutorial, you can convert the compressed photos to WebebP format. This is necessary, this site has a few PNG pictures either compressed or converted to Jpg volume are in the 30-40kb or so, use this plug-in to WebP after the volume directly down to more than 10kb. if the volume of WebP than the original picture will automatically revert to the original format.

(Updated 2023.01.31) The compression rate of this plug-in is not too high, and the quality of the compressed PNG format image degradation is great. After our test using the above Performance Lab plug-in to WebP and then use TinyPNG compression better clarity and smaller size.

ShortPixel

ShortPixel is the most popular image optimization plugin for V and high quality websites. Many, many foreign V's promote it on their websites and I have seen many high quality websites using it. It is also the earliest optimization plug-in that supports Avif format, and currently has 300,000+ installations, highly recommended.

ShortPixel has a full range of features, such as converting PNG to JPG, CMYK to RGB, converting to AVIF format, and can individually adjust the compression level of each picture, etc. The compression effect is also very good. The only sure thing is to spend money, but it is not expensive, you can charge this is the best image compression plug-in for WordPress.

The free account can only compress 100 images per month, which is definitely not enough to pay for.Monthly subscriptions$4.99/month can compress 7,000 sheets, $9.99/month can compress 16,000 sheets, you can purchase only one month, and cancel the package to switch to free package after the compression is finished.

You can also purchase the unlimited length, unlimited sites separatelyCompressed amount$9.99 can purchase 10,000 times the quota ↓ (minus the thumbnail size and WebP, Avif quota can actually compress 1,000~2,000 photos), $19.99 can purchase 30,000 times the quota ↓.

Note: Each thumbnail, each conversion to Webp, each conversion to Avif will count the number of compressions. It is recommended not to compress thumbnail sizes that are not used.

ShortPixel setup tutorial

After installing the plug-in background will prompt the top will pop up the following alert box, directly click the red box to enter the settings page.

If you have not registered before, enter your email address in the red box, check the box and click "Request Key" to enter the registration interface, check the box and click "SIGN UP" to display the key directly.

Copy the key in the red box below

Fill in the API Key box in the settings screen and click "Verify".

GeneralEdition settings, as per the diagram.

Compression type."detrimental"The highest compression rate and the smallest image size are the most chosen, while the image quality is also the worst. It is recommended to choose "Glossy" or "Non-destructive", with a balance of size and clarity.

It is recommended to test the sharpness of images with different compression effects before choosing the appropriate compression level. ClickOpen test pageIt is recommended to open 2 windows to select different compression levels and upload the same photo for compression. After compression, download the 2 pictures to your computer and then compare the clarity and size, and choose the right one.

Please also include thumbnails of.Check the box, there are many images on the page are thumbnails, must be checked to compress.

Image backup.Check the box to restore the original image at any time.

Remove EXIF.A check mark is recommended.EXIF is a set of various information that is automatically embedded in the image at the time of creation. This can include GPS location, camera manufacturer, date and time, etc. We recommend removing this for better compression, if you need to keep this data, don't check the box.

Adjustment of large image size.The maximum width that can be displayed on the page is 1920px, so the maximum size of the image is set to 1920px. The height of the image can be set higher, it is recommended not to exceed 1920px, otherwise it will affect the loading speed and customer experience.

AdvancedEdition settings, as per the diagram.

Other media folders.Ignore. By default only photos in the Content (where all images and files uploaded to the media library are located) folder are optimized, and in most cases this is the only place where photos are basically used on the site. If you want to compress photos from other places, add the path here. If you don't understand this feature, it's best to ignore it.

Conversion of PNG images to JPEG images.PNG has better clarity and larger size than JPG. If it is a screenshot or something PNG is not recommended to convert to JPG, because the clarity will drop a lot, the volume is not much different. If some PNG images are very large, it is necessary to open this function and pay attention to the change in clarity. If the generated JPEG image is larger than the original PNG image, the conversion will not be performed. It is not recommended to check the box "You can also force the conversion of images with transparency".

CMYK to RGB conversion.Check the box to adjust image colors for computer and mobile screen displays. Images for the web only need to be in RGB format, converting them from CMYK to RGB will make them smaller.

Next Generation Images.Creating both WebP and Avif with a check mark can greatly reduce the image size.

Optimization of retinal images.Check the box to support Retina HD display images.

Optimize other thumbnails.Check the box to optimize some thumbnails that are displayed in the foreground, but not found in the background. Note: Turning on this option will increase the consumption of compression credits.

Optimize PDF documents.Check the box to reduce the size of PDF documents. Note that after checking the compression of PDF pictures inside the display quality, if a lot of decline on the closure of this feature.

Exclusion mode.If some images are compressed with a strong quality drop, enter the name/path of the image etc. here to exclude it. You can also modify/remove the compression level of images individually inside the media library (refer to the previous section on compression level settings for details).

Optimize media when uploading.It is recommended to check the box, ShortPixel will automatically optimize all newly uploaded images and PDF files. If you want to compress images manually, do not check the box, go to the Media Library (in the list view) and click the "Optimize Now" button on the right to compress images manually in bulk.

Front-end processing.The vast majority of websites do not use this feature. Check this if you have users adding images or PDF documents from custom forms on the front end. This may increase the load on the server if there are many users connecting at the same time.

Excluded thumbnail sizes.Check the foreground page to displayNot usedThe thumbnail size of the thumbnails saves the compression amount significantly.

Cloudflare section settings.
If you have used Wp Rocket and other plug-ins to link Cloudflare, here you do not need to link, ignore it. Instead, it is best to link, you can choose to use token or global api key link. If you restore the image or modify the compression level, remember to clear the Wp Rocket and other plug-in cache.

Statistics section
Display data such as used amount, remaining amount, compressed saving space, etc.

This is the end of the setup, and the photos uploaded to the media library will be automatically compressed in the future. If you have already existing photos, you need to go to the media library and compress them manually.

Imagify

Imagify is an image compression plugin from the official Wp Rocket team, currently with 700,000+ installations. It is easy to set up, easy to use, takes up less resources on the server, full-featured, fast compression, and you can change the compression level of each image individually (media library open image modification).

In the free plug-in Imagify can be said to be the best comprehensive, powerful, easy to set up, so it is very popular, the number of installations than several other plug-ins are high. 2021 Imagify has a compression package package, $ 9.9 to compress 10,000 images unlimited time, but later removed from the shelves (the pattern is small).

The downside is that Avif format is not currently supported and the free account only has a 20M compression allowance per month. But you canSign up for multiple free accountsYou can continue to compress images by switching to a different account. You can also spend $4.99 to buy a one-month package with a compressed 500M compression credit (valid for one month),.

Monthly payment $4.99, 500M compression per month. monthly payment $9.99, unlimited compression

The setup is simple, I'm lazy and don't want to do a tutorial, please move to Baidu.

Smush (not recommended)

In 2019 I still do not know much about image compression plug-ins, then Baidu to Smush is good to install and use. nginx server requires the installation of code to activate the WebP function, I installed the corresponding code in Pagoda as prompted but still can not enable the function, decided to abandon the pit. When it was also in the Pagoda Forum posted a post for help, including the official Pagoda staff, no one gave a solution, and until now there have been people following the same problem for answers.

Smuch 2018 won the best plug-in award, the highest visibility, and currently has 1 million+ installations. The free version has too few features, can not be converted to WebP/Avif, can not adjust the compression level, compression effect is not as good as the other 3 plug-ins, no compression limit may be its only advantage. pro version $5 / month, does not support Avif, cancel the package WebP format disappears with it.

More than 1 million installations are estimated to be brought by the bundled package. Smush Development has a total of 11 paid plugins, and a monthly payment of $15.83 allows you to use all plugins on 1 website, and a monthly payment of $82.50 allows you to use all plugins on countless websites.

Think about all know buy unlimited site package after the probability of resale at a low price, the installation volume is easy to up. Comprehensive view of this plug-in is really no special advantages, these years recommended it not many bloggers, it is better to use the above several plug-ins.

Other image compression plugins

EWWW Image OptimizerThese plug-ins are free, but the features and compression quality are average, not as good as the above-mentioned plug-ins.WebP ExpressandConverter for MediaThe plug-in is mainly to turn the picture to Webp, but not much compression, the volume is still on the large side.

Further optimization of image loading speed

After following the above WordPress image compression optimization tutorial, the image volume should be able to reduce 50% or even more, and the image loading speed has been greatly improved. In addition to compressing the volume, using the following methods can further greatly reduce the loading time ↓.

Delayed image loading

In most cases the image volume can account for about 60% of a page size, the acceleration effect of delayed loading images is even better than compressed images, which is very important. By default, the browser will load all the photos at once when visiting the page, and the speed is slow.

When you visit the page after delaying the loading of photos, the browser only loads the few photos at the top of the page, not the photos at the bottom of the page (visitors slide down to the corresponding image position and then start loading), thus greatly reducing the loading volume and making it much faster.

Many plug-ins have delayed loading image function, we compare and find that the best acceleration effect and display effect is Perfmatters plug-in, click to viewPerfmatters delayed image loading setting method. ClickDownload Perfmatters plugin.

Use the right image size

Image size = display size is the best, the most clear and the smallest size. If the image size is larger than the display size, the clarity is not necessarily better and the size is larger. If the image size is smaller than the display size, the photo will be blurred.

Choosing the right image size will reduce the size of the image and ensure clarity. The "Responsive Photo" method below will automatically load the article/product image at the display size that is close to the size. However, if a page is built using a page builder like Elementor, the image display size may not be responsive.

For example, the Elementor widget background image needs to be sized accordingly according to different devices ↓.

Responsive Photos

The screen size of computer, tablet and cell phone is different, and the size of the same picture is displayed differently. Automatically displaying photos of the appropriate size according to the screen size can greatly reduce the size of the photo, which is responsive.

For example: when we upload a photo to media library, it will automatically generate other size thumbnails. For example, the width of the banner image on the front page of an article is usually 1920px, and the volume is usually 100~200kb. 350px will be automatically generated after uploading to the media library (the volume is about 20kb), etc. When viewing the front page on a cell phone, if the screen pixel ratio is ≤350px, the banner image of 350px size will be automatically displayed instead of 1920px. Thus greatly reducing the image volume.

Most of the themes are responsive and do not require any manipulation. How to check if your website images are responsive? Check the html source code<img>If or not there is srcset attribute inside the tag.

The "srcset" property - this property describes to the browser how the image should behave. You assign the image width so that the browser can check for images that match the browser width.

For example, this siteAbout UsAt the bottom of the page there is a picture of the office, below is the source code of this picture with "srcset" attribute, inside the srcset attribute there are numbers like 1000w, 706w, etc. These are the several sizes generated by this picture. When the monitor size is ≥ 1000px, it will display the 1000px photo. When it is ≥ 788px but less than 1000px, it will show 788px size, and so on.

It is worth stating that we need to adjust the automatically generated thumbnail size appropriately according to the page image display size, especially for Woocommerce websites. You can set 3 thumbnail sizes in the backend "Settings" > "Media" ↓. You can also install the thumbnail plugin to set more thumbnail sizes, and also generate thumbnails by size for photos previously uploaded to the media library.

It is recommended to set the media library size to the following 3 sizes, the mobile side will display 350 or 706px size photos, the tablet side will display 1023px. cell phone and tablet resolution is high, the image size is larger than the screen size to display clear.

This is the end of the image compression plug-in comparison, if you have questions or recommendations, welcome the comments below to exchange. Optimize image loading speed in addition to the above-mentioned compression volume, but also need to use CDN, open browser cache, etc. in order to maximize the effect. Please see the specificThe Most Complete Speed Optimization Guide for WordPress. To purchase the caching and delayed loading plugins, please go toPlugin DownloadPage.