The latest WordPress image compression optimization tutorial (Webp, Avif), optimization speed must see

WordPress image compression
Article List
Article List

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 to Diamo's experience with optimizing multiple sites, the main reason for slow websites is that the size and volume of images are too large. Maximizing the compression of image size without affecting the display of images as much as possible can help significantly in optimizing the speed of WordPress and improving Google SEO results.

 

What is WebP, Avif image format?

WebP format is a new generation of image format launched by Google, than the conventional JPG format volume reduction of 30% or so, most browsers / software currently support this format. avif format is more advanced, volume than the WebP format reduced 25% or so but the clarity is higher, it is necessary to use Avif format! However, more devices do not support it at the moment. According to Caniuse, there are 95% user devices supporting WebP and 67% user devices supporting Avif today.

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.

WebPAvif volume comparison

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 two formats, which may cause abnormal image display. It is recommended to upload Jpg, Png photos, and use the plug-in to generate WebP, Avif format will enable the fallback function, when encountering these two formats do not support the device will display the original image (Jpg, Png). If you want to convert WebP, Avif to Jpg, Png, useConvertioSelect the original image and the target image format, then upload the image and click "Convert".

Pasted 23

 

Image format, size selection

Choose Jpeg for regular photos, this is the most commonly used image format with the smallest size, by default jpeg format should be used in preference.

Screenshots, transparent background images or some brightly colored photos choose PNG format, better clarity. You should only choose Png format if Jpeg is not clear enough or if the background of the picture is transparent, after all, its volume is much larger than Jpeg.

Icons, logos, cartoon illustrations and so on try to choose SVG format, no matter zoom in and out are very clear, the volume is minimal.

If the animation is only 1-3 seconds with Gif format access experience better, if the time is longer, then converted to video format will reduce the volume, but also can delay the loading of speed will help.

Jpeg and Png images should pay attention to the size of the uploaded image, and make the image according to the actual size displayed so that the display is the clearest and the volume is the smallest. For example, a 600px (long) image is clearest if it is displayed at 600px. If the display is larger or smaller than 600px, the image will be scaled and the clarity will be reduced.

If it is a product detail picture will have 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 set the cell phone picture display size a little smaller, or directly use a smaller size picture.

 

WordPress image compression plugins recommended comparison

First, the suggestion: Optimole > TinyPNG > ShortPixel > Imagify > Smush

If the web server is located abroad and the number of visitors (by IP) is less than 5,000 per month, Optimole is preferred.
The second recommendation is TinyPNG, which needs to be paired withWebP Converter For Mediaor use a CDN with a WebP/Avif conversion function.

If neither Optimole nor TinyPNG fits your situation, we recommend using ShortPixel.
ShortPixel supports Avif format, PNG to JPEG, good picture compression, and lower price than Imagify. Imagify is easier to set up and use, and the picture compression speed is faster than ShortPixel, which takes up less server resources, to be sure that Avif is not supported for the time being.

Optimole, ShortPixel, Imagify, TinyPNG detailed comparison table

Diiamo Logo white Optimole ShortPixel Imagify TinyPNG
Installation volume 80,000+ 300,000+ 600,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

1100 sheets - $5.4

WebP format
Avif format
Image CDN
Automatic image resizing
Retina support
Delayed loading
Adjust the compression level
Compression method Online Cloud Compression Server Compression Server Compression Server Compression
Png to Jpg
Compressed Gif
Advantages Automatic watermarking, automatic image quality reduction when the network is slow, gif to video, online compression PNG to JPG, compress PDF documents   The most free amount, the best compression quality/compression speed, and the least burden on the server

 

Optimole

It's a latecomer, not many people know about it yet, only 80,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! Diamo has been installed and used in all B2B foreign trade website customer sites.

Optimole Benefits.

  1. On-line cloud compression/conversion of formats without taking up server resources.
  2. Converting images to WebP/AVIF format.
  3. Free! No limit to the number of times you can compress/convert images!
  4. Automatic resizing of images according to the size of the visitor's screen.
  5. Automatic image quality reduction when slower networks are detected.
  6. Using the Amazon CloudFront CDN.
  7. Retina support, intelligent cropping.
  8. Delayed loading of images without jQuery (better).
  9. Image watermarking function.

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

%E8%BF%98%E6%9C%89%E8%B0%81

天底下没有这么好的免费午餐,免费账户只对网站每个月前5,000个访问者(按ip/浏览设备算,重复访客只计算一次)有加速效果,第5,001个访客开始会显示未压缩的原始格式图片(相当于这个插件被禁用),下个月恢复额度。

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 to use CloudFront CDN can not be closed, CloudFront (Amazon) domestic acceleration effect is not good, domestic sites do not use Optimole. use process found that this 5,000 quota is very durable, will not calculate the number of known crawlers / robots browsing, repeat visits do not count the number of times, the vast majority of B2B foreign trade independent sites and small blogs will not exceed the quota.

如果流量多超过额度,建议改用ShortPixel之类插件。

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%).

Pasted 3

If the website has more than 5,000 visitors per month, an email will be sent to you prompting you to purchase a paid package, just ignore it, no automatic deduction will be made and the amount will be restored next month.

 

Optimole setup tutorial

Go to the settings screen

Pasted 11

Enter your mailbox, click Send Secret Key, enter the mailbox and copy the italicized secret key in the middle of the email. If you can't receive the email, check the junk mailbox or change the QQ mailbox to register.

Pasted 12

Click "I have API key" on the above screen to enter the following screen, enter the api and click Connect.

Pasted 13

Go to the Settings > General section.

Pasted 16

Enable image replacement.Open it, it will be automatically converted to WebP format as well as stored to Amazon CDN.Not requiredSo enable the CDN feature of plugins like WP Rocket. Note: By default the CSS-loadedBackground imageswill not be optimized, you need to open the following firstServing CSS and JS functions via OptimoleOnly then will the background image be automatically compressed and optimized. It is recommended to first useTinyJPG online compressionThe background image is then uploaded to the website for use.

Scaling images and delayed loading.It is recommended to turn off, because the actual effect is not good. I have tried in several sites, the home page banner will be delayed loading resulting in longer perception time, even if the delayed loading is excluded, it does not take effect. Also, the delayed loading of other images is not sensitive enough and always shows up very late. We suggest using Perfmatters' delayed loading feature instead, which can specify CSS to delay loading the background image and preload the key images in front.

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, we have not encountered problems so far.

 

Next, click "Advanced" > "Compress" and enable the function as shown.

Pasted 17

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 your motion picture is similar to the kind of small size of the emoji packet, time and short (small volume) is not recommended to turn into a video, Gif user experience is better.

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.

 

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

Pasted 18

Enable smart cropping.Open. The image is automatically repositioned to show the main part of the image when it is outside the display box, instead of showing the upper part of the image directly.

Enable retinal images.Open. If the visitor is using a Retina HD retina device, a retina definition image is provided to the visitor.

Resize large images original source.Open it and set it to 1920 x 1920. Set the maximum size of the website photos that can be displayed, most website pages have a maximum size of 1920px and will not exceed this size.

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.

Pasted 19

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.

 

Pasted 20

Cloud Integration.It is not recommended to enable it. It doesn't help with speed, it just manages photos. It's easy to make mistakes, so don't turn it on.

Once the plugin is set up, the photos uploaded before and after will be automatically compressed and processed without any other operations. If you have the Elementor plugin installed, you will need to regenerate the CSS and data as shown below.

Pasted 22

如果安装了Wp Rocket,可能会提醒禁用掉Wp Rocket的图片延迟加载避免冲突。如果你在Optimole没有开启延迟加载图片,就不需要管这个提示。使用Wp Rocket清除缓存后提示应该会消失。

If the same function as Optimole is enabled in other plugins, please turn it off, otherwise there will be a conflict.设置好后可能网站一开始图片显示错误,那是因为图片还在压缩转化格式中。大概等20分钟后刷新页面图片正常显示,如果图片特别多等待的时间会更长。

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.

Pasted 25

 

TinyPNG

TinyPNG is the big name in 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! Each month can be compressed 500 pictures, picture compression effect than ShortPixel, Imagify good, this site pictures using TinyPNG plug-in compressed pictures, using WebP Converter For Mediacch to WebP.

TinyPNG plugin advantages.

  1. A free account limit of 500 cards/month and the ability to register multiple accounts to switch login compression.
  2. The best quality and fastest compression of images.
  3. Minimal size of the plug-in and minimal burden on the server.

The disadvantage of the plug-in is that temporarily can not generate WebP, Avif format, but can be used with pictures to WebP, Avif function of the CDN (such as Tencent cloud, volcano engine, Ali cloud, etc.) together to make up for this shortcoming. You can also installWebP Converter For Mediacchand other plugins to convert images to WebP, Avif format (see below for specific configurations).

 

TinyPNG setup tutorial

Go firsthttps://tinyjpg.comRegister an account and after registration go tohttps://tinify.com/dashboard/apiCopy the api in the middle and fill in the plugin settings page (location: "Settings" > "TinyPNG-...") Link the account.

After linking your account, it will show you the remaining available credit, select the red box Compress new images in the background (Recommended) as shown.

Pasted 10

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 only regret is that WebP format is not supported for the time being, the author said that the WebP function has been added to the update plan. I use to WebP plug-in found that many have been compressed pictures into WebP after the volume than the original picture is even larger! It can be seen that the TinyPNG compression ability is very powerful, the compression effect itself is very close to the WebP effect.

There is no need to convert to WebP format or anything like that already to compress the image size to the minimum, while having the best clarity.

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.

Pasted 9

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 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.

Pasted 7   Pasted 39

 

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.

Go to the plug-in installation page and search for "WebP", find the plug-in below, click "Install Now" and enable it.

Pasted 35

After installation, enter the plugin settings page. If it is an Nginx server, a prompt will pop up at the top, and you will need to install the code to activate the feature. Go to the Pagoda panel > "Websites", find the corresponding website and click on it to enter the settings page, click on "Profile" and copy and paste the following code into the server { ... } block at the very beginning (see the picture below). See detailsPlugin official documentationConfiguration for Nginx inside the FAQ section.

# BEGIN WebP Converter for Media
set $ext_avif ".avif";
if ($http_accept ! ~* "image/avif") {
set $ext_avif "";
}

set $ext_webp ".webp";
if ($http_accept ! ~* "image/webp") {
set $ext_webp "";
}

location ~ /wp-content/(? . +)\. (? jpe?g|png|gif|webp)$ {
add_header Vary Accept;
add_header Cache-Control "private" always;
expires 365d;
try_files
/wp-content/uploads-webpc/$path.$ext$ext_avif
/wp-content/uploads-webpc/$path.$ext$ext_webp
$uri =404;
}
# END WebP Converter for Media

Pasted 40

After installing the code and restarting Nginx, the page should take effect after refreshing and the prompt to install the code disappears. The official documentation says that you need to install 2 lines of code in another file, but by default that file already has those 2 lines of code, so I won't write an installation tutorial here, so please leave a comment if you have any questions.

Pasted 42

 

The following is a tutorial for setting up the WebP Converter for Media plugin, set it up as shown. If you care about Avif format, we recommend using the ShortPixel plugin.

Pasted 41

BelowImage QualityThe default is 85%, I like a little clear set to 90%, see what you like. Remember to click save after setting.

Pasted 43

Click the "Force convert all images" button to turn green, then click "Regenerate All" to start automatically compressing your media library photos. The uploaded photos will be compressed automatically without manual compression. If you change the quality of the images, you need to compress them again manually here.

Pasted 44

Pasted 45

Open the page with Google Chrome and press F12 to go to Developer Tools to see that the image size has been reduced. UseGTmetrixThe test tools such as the "page size" and "load speed" tests are used to see the changes in page size and loading speed.

Pasted 36

 

ShortPixel

ShortPixel is also a very good optimization plugin, many, many foreign vloggers promote it on their websites, and I have seen many websites use it to optimize their images. ShortPixel has more features than Imagify, such as converting PNG to JPG, CMYK to RGB, converting to AVIF format, and adjusting the compression level of each image individually.

The free account can only compress 100 images per month.Monthly subscriptions$4.99/month can compress 7,000 sheets and $9.99/month can compress 16,000 sheets. You can purchase one month and cancel the package to free package after the compression is finished.

Pasted 5

You can also purchase the unlimited length, unlimited sites separatelyCompressed amount, $4.99 - 10,000 sublimits, $19.99 - 30,000 sublimits.

Pasted 6

Note: Compressing the volume and converting to Webp/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.

Pasted 21

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.

Pasted 15

Copy the key in the red box below

Pasted 27

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

Pasted 29

 

GeneralEdition settings, as per the diagram.

Pasted 32

Compression type."detrimental"Compression has the smallest size, the most people choose it, and the worst image quality. It is recommended to choose "Glossy", both volume and clarity. It is recommended to choose the compression level according to the actual picture compression, by: first select "detrimental" compression, save the settings, and then go to the media library and click the list icon to enter list mode.

Pasted 26

Select 1-2 photos, click "Optimize Now" on the far right to start compressing photos. After compression, clear the cache and copy the image URL to open in a new browser window to view and compare the clarity of the original image, if you feel that the compression is not clear enough, set the compression level to "glossy" and test again.

Pasted 28

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.

Pasted 30

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.

Pasted 33

 

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

Pasted 34

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.

Pasted 37            Pasted 38

 

Imagify

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

The disadvantage is that Avif format is not supported at the moment and the free account only has a monthly compression quota of 20M (too little). It is recommended to register more than one free account and switch between accounts to continue compressing images after the quota is exceeded. Or buy a paid package (monthly payment) and cancel the subscription plan after compressing the images at once, and then use the free package to compress them later.

Imagify used to have a zip package, $9.90 to zip 10,000 images with no time limit, but then it was taken down.

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

NonsIc7EAAAAASUVORK5CYII=

 

Smush (not recommended)

Nginx server needs to install the code to activate the WebP function, I installed the corresponding code in Pagoda as prompted but still could 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, until now there have been people follow 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.

This is the end of the image compression plug-in comparison, if you have questions or recommendations, welcome the comments below to exchange. Image optimization in addition to compression volume, but also need to delay the loading of images, mobile scaling images, open cache, the use of CDN in order to maximize the effect. Please see the specificThe Most Complete Speed Optimization Guide for WordPress. To purchase the delayed loading, caching plugin, please go toPlugin DownloadPage.

End

Article out of date? Have a better opinion? Have a question? Please leave your comments below and we will follow up.

Recommended Articles.
Comments :

Leave a Comment

邮箱不会被公开, 评论框内禁止插入网址、邮箱

Chat
  • WeChat Service
Quick login without registration

Enter your username and password to log in

Don't have an account? Forgot your password?
For a better user experience, the site uses cookies -Privacy Policy
This site uses cookiesPrivacy Policy