WordPress image compression. Image Optimization - Best WordPress Plugins


Take any image and add it to Media Files

I got 219 KB from a small PNG file originally 236 KB. Thus, it turned out to compress 7.2%. Can you imagine what will happen to large files?

Installing EWWW Image Optimizer

You can install the plugin in two ways: through the WordPress admin panel or download the archive with the plugin separately.

In the first case, you go to the admin section Plugins - Add new (http://example.com/wp-admin/plugin-install.php) - EWWW Image Optimizer

In the second case, you need to download it.

Where to download EWWW Image Optimizer

We unpack the archive into /wp-content/plugins/, then find it among the plugins in the admin panel and activate it.

Setting up EWWW Image Optimizer

To get to the settings, go to Settings - EWWW Image Optimizer
You don't have to change anything; by default, everything works as it should.

Everything is visible on the screenshot and it is quite clearly described what is responsible for what. You can change the settings to suit your needs.

If you expand the Plugin Status tab, you will see what is installed in the system and what is missing for normal functioning, as well as statistics of the work done. List possible problems For the status of the plugin and their solutions, see the special section below.

This is what the Advanced tab looks like. Here, perhaps, I’ll comment on the untranslated part

  • Deferred Optimization— compression will occur later, according to the WP Cron schedule
  • Disable Automatic Optimization— Images will not be optimized when they are uploaded to the site. You can optimize them later manually or set up an optimization schedule. This option will be useful if you upload a lot of images and don’t want to wait for them to be compressed
  • Include Media Library Folders— If you have disabled automatic image optimization, check this box to enable scheduled compression for the last two directories from the media library

Why EWWW Image Optimizer doesn't work

EWWW Image Optimizer is quite demanding installed utilities plugin, without which it will not work, so it is likely that you will have to face one of the problems listed below. If you don’t find a solution below, write in the comments, we’ll figure it out.

EWWW Image Optimizer requires exec()

After installation, the plugin may give a warning

This means that your hosting has disabled execution exec. This is usually done for safety, but sometimes this concern for us results in such problems.

If you have simple hosting, write to support asking to enable exec . If they refuse, unfortunately, you will not be able to use the free version of the plugin. In this case, you can download all the images and compress them using . Also, it is possible to use the WP Smush - Image Optimization plugin, but it has a limitation: in paid version you can compress a maximum of 50 files in one go

If you have your own server, then go to php settings, namely in php.ini .

To determine where php.ini is located, you can use the phpinfo() function. Create a file phpinfo.php in the root of the site, then write it there

Save, then open in the browser http://example.com/phpinfo.php

We are looking for a line Loaded Configuration File

So, our php.ini is located in /etc/php5/apache2/php.ini

Let's edit it, for which you can use or putty.

In the file itself we look for the line disable_functions. This is a list of disabled php functions. We remove exec from there, and then save it.

I tend to copy the original line, then close it in a comment, thereby keeping a backup copy just in case.

Now, for the changes to take effect, you need to restart php (Apache or php-fpm).

Service apache2 restart

Service php5-fpm restart

That's it, now the exec function works.

Missing: jpegtran, optipng, gifsicle, pngout

In this case, you will have to either write to the support service so that they can help with installing the required utilities, or, if possible, install them manually.

Installing jpegtran in Debian, Ubuntu

Apt-get install libjpeg-progs

Installing optipng in Debian, Ubuntu

Apt-get install optipng

Installing gifsicle in Debian, Ubuntu

Apt-get install gifsicle

If the commands don't work, try updating the ports. For example, in Debian this is done with the command

Apt-get update && apt-get upgrade

Finally

This was a review of the optimization plugin and png compression, jpeg, gif animations in WordPress. If you are interested, there is an article on how to

The images you use, it is very important to ensure their quality and good optimization.

WP smush

WP smush reduces image size without compromising quality. Using this plugin will increase the speed of your website. The tool optimizes both new images and already downloaded ones.
Peculiarities:
  • Optimization of JPEG, PNG and GIF files;
  • Automatic optimization of attached files;
  • Opportunity mass optimization up to 50 images at a time;
  • Optimizes without loss of quality;
  • There are paid and free versions of WP smush. For beginner users, the free version will be more than enough.

Optimus - image optimization on Wordpress

One of the best plugins for compressing and optimizing images without losing quality. Allows you to reduce up to 70% of the weight of the image, which will save you great amount traffic.

CW image optimizer

The CW image optimizer WordPress plugin has the same function as EWWW and WP smush - reduces the size of images to optimal. Can optimize all the images on your blog at once, and also automatically reduces the size of all the images you upload.
The quality of the images does not suffer; the plugin reduces the size of the images without sacrificing anything.
Peculiarities:
  • Performance;
  • Runs on your server, without using the API.

Lazy load

This is another one good image optimizer. The Lazy load plugin is different in that it loads images only when they are in the user's field of view.
There is no need to configure it, all you need to do is install it. .sonar is used to upload images.

Compress JPEG and PNG images

Compress JPEG and PNG images optimizes images, to increase page loading speed. TinyPNG technology is used for this.
Can resize images that are already on the site, as well as new ones, before loading them.
Peculiarities:
  • Allows resize image to those specified by you;
  • Automatically compresses new and already uploaded images;
  • Work with multiple sites with one API key;
  • There are no file size restrictions;
  • Mass optimization.

After studying the topic on the Internet, it turned out that in September 2017 Google Pagespeed changed the algorithm, now it wants all images to be smaller than webp q75 + 9%. Webp on average compresses 40% more than Jpeg. That is, achieving such a size from a Jpeg and maintaining image quality is unrealistic. That is, no problem, you will have to use Webp. But Webp is only supported by Chrom and Opera. Firefox and Safari don't understand them. Simply converting images to Webp will not help. But there is a trick. You can create two files for each image.
Normal and wepb. And give browsers that support webp - webp, and those that do not support - normal file. The file selection is done by Apache mod_rewrite. You need to add this code to .htaccess.


RewriteEngine On
RewriteCond %(HTTP_ACCEPT) image/webp
RewriteCond %(REQUEST_URI) .*(jpe?g|png|gif)$
RewriteCond %(DOCUMENT_ROOT)/$1.webp -f
RewriteRule(.*)$1.webp


Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

To generate webp files found free plugin Opti MozJpeg Guetzli WebP. It is made in a very interesting way so that you do not have to install image codecs on the server (and I have hosting and they are not supplied there), you can download a virtual machine for Oracle Virtual Box from the plugin website. It runs Linux, ssh server and image codecs (MozJpeg, Guetzli, WebP). You need to launch a virtual machine on your computer, connect the plugin to it via ssh. And the plugin will download images via ssh and optimize them in virtual machine. That is, I am like a cloud to myself. In this slightly perverse way, I optimized the images and created webp duplicates for them. Google Pagespeed has completely removed all claims regarding images.

The first thing to note is that different sites require different levels of compression for images. For example, blog pages or portfolio pages do not require High Quality images. All visitors to such sites need to do is remember a single post or page.

But there are also sites where image quality is of paramount importance. Moreover, not only visual quality is important, but also EXIF ​​data contained in the image itself. EXIF data contains all kinds of useful information about the image. After optimization they disappear. For a professional photographer, for example, it is very important that any photographs he publishes on his website are saved EXIF data. In this case, site visitors will be able to see various settings camera, camera model, lens and other information about what characteristics the photographs were taken with.

Another scenario is a website specializing in selling goods. For example, let's say you sell furniture through a WooCommerce online store. You've hired a professional photographer to take great images of all your products. You've even installed buzzer extensions that allow customers to zoom in on the details of your products. In this case, you don't need the EXIF ​​data, but you still want the details of your products to be clearly visible when zoomed in!

Lossy and lossless image compression

This review is dedicated to describing lossless compression options. Lossy compression typically discards as much data as can be discarded while still maintaining the overall appearance of the image. This is very effective at reducing images, but the downside is that it comes with a loss of visual quality.

On the other hand, lossless compression does not throw out any data. This process is similar to creating a zip file. At first different files archived in one much smaller zip file. But after unpacking, all data is available again. The same thing happens when compressing images.

1. EWWW Image Optimizer

EWWW “the Hammer” Image Optimizer plugin is a huge success. It has standard and cloud versions and boasts more than 100,000 downloads.

It should be noted that this is the only plugin in this list, which performs the entire compression process directly on your server.

2. Kraken Image Optimizer

The Kraken “the Shipwrecker” Image Optimizer plugin is a “professional” way to automate the process of compressing your images. This WordPress plugin boasts over 4,000 downloads. It allows you to allocate an area on the server for uploading your images to your service, after which you can rewrite your media library with optimized images there.

3. Compress JPEG & PNG images

This is another plugin that works on the principle of “ software like a server." He is the “youngest” on this list. Released in early February 2015, it already has thousands of downloads. Despite the name, it losslessly optimizes both PNG files, so JPG files.

4.WP Smush

To be honest, this is not the best plugin. Firstly, in the free version of the plugin you can only optimize images smaller than 1 MB. Even in the premium version, you can optimize images only up to 5 MB in size. Secondly, the compression quality it provides is no better than EWWW.

However, it was released a new version this plugin. Perhaps it will be better than its predecessor and will force users to change their opinion about this plugin for the better.

5. ShortPixel Image Optimizer

ShortPixel Image Optimizer is another newcomer. It is still difficult to say anything definite about him.

Plugin Comparison Results

There has already been a comparison of these plugins on the forum and therefore I would like to greet you with an excerpt from that topic:

We will also present the results of the speed of loading images into the media library. 5 images were uploaded with a total volume of 43.6 MB.

  • EWWW Image Optimizer = less than 5 minutes. The results were the same both with and without metadata.
  • Kraken Image Optimizer = approximately 7 minutes.
  • TinyPNG = 10 minutes.

Regarding EXIF ​​data

If you need to save EXIF ​​data, don't use TinyPNG. It does not have the ability to save this data. TinyPNG has been actively improved over the past 1.5 years, so it is possible that this flaw will be corrected over time.

When analyzing the results, it is easy to see that the best option is the EWWW plugin. It allows you to save EXIF ​​data if necessary, perform lossy and lossless compression, add, disable and install various compression libraries.

Which is better, paid or free plugin?

The plugins described here vary in cost.

EWWW– at first this plugin may seem completely free. And for most people this is what it is. But if you pay for server resources on your hosting, then you will have to take this into account. Especially if you use the automatic optimization option in the EWWW settings.

Tiny PNG– this plugin provides the ability free optimization for 500 images per month. However, WordPress users need to keep in mind that for every image uploaded, WordPress generates three images (thumbnail, medium, large). This means that instead of 500 photos per month, you only get 160. The plugin also contains many images for bloggers. TinyPNG is not a very expensive plugin.

Kraken– the most expensive of the three options. But there are several important points. Firstly, it has a “micro-tier”, that is, $5/month for 500MB of images. Please note that this limitation applies to the size of the data, not the image. Secondly, Kraken is more than just an image optimizer. IN Pro versions will be available to you cloud storage on the server where you can place backups your images that you have optimized via the web interface.\

So it’s up to you to decide, but at the initial stage of your site I used free options, and already when the site gets promoted, I would think about purchasing a paid version.

Conclusion

The Kraken plugin performs image optimization no worse than EWWW, but in the premium version it has additional functions. Although EWWW provides greatest number options and performs image optimization on your server, but it can't match TinyPNG's performance.

Tiny PNG automatically compresses images much better. This is a really powerful plugin. But you will need to be careful to keep free version, and you won't be able to save EXIF ​​data.

Most users who don't need to process too much a large number of images, we can recommend the following option:

  1. Limit the size of large images that are uploaded from Imsanity.
  2. Automatically optimize these images using TinyPNG.
  3. Make sure these images are SEO friendly SEO Friendly Images.
  4. Organize these images using the Enhanced Media Library.
  5. Make pictures adaptive size to fit the screen using RICG Responsive Images.

Naturally, in point 2 you can change TinyPNG to EWWW or Kraken, whichever you prefer.

Hello! It’s no longer a question of what needs to be optimized on a website for “search engine love”, and what can do just fine. The reality is that everything needs to be optimized (). Moreover, one thing clings to another and all the hundreds of indexing and ranking rules working in search algorithms, have long been intertwined into a single ball. For example, photos on a website must be optimized.

Three Parts of WordPress Image Optimization

If you look at the extended one on the Internet, this can be done with any special online server, we’ll see that the lion’s share of loading time is taken up by unoptimized photos.

In addition to the effect on loading speed, which is now monitored very carefully by search engines, you can add keywords, which will be read by search engines and influence the position of the article upon request. Let's divide WordPress photo optimization into three parts:

  • Optimization before adding photos to the site;
  • Optimization when adding photos to an article;
  • Mass optimization of photos on the website without uploading.

WordPress image optimization (SEO) when inserting into an article, image anchors

When adding an image to any site, you can set: photo anchor (photo link anchor), its description, title and size. Anchor is of particular importance to search engines. The photo anchor is specified by the alt attribute.

Full HTML structure adding photos to wordpress looks like this.

Without caption photo:

With photo caption:

Photo caption

In WordPress, all photo attributes, including the anchor, are set in visual mode:

Attributes are added in the “ ” mode or in the “Edit Photo” mode.

Rules for anchor photos

  • The alt (anchor) attribute for an image must be unique.
  • In the article, it is advisable to have one anchor photo ( alt attribute) must include the forward key ( key phrase) articles.
  • If you want to generate anchors automatically, go to Majento.ru(Majento is taken as an example and does not claim to be unique) into the anchor generator.

Conclusion 1

IN WordPress system The issue with image code optimization has been completely resolved. If you wish, you can visually fill in all the necessary image attributes that are important for its optimization, and the system itself will set the photo size in the tags:

Optimizing images before adding to the site

Optimizing images should begin before they are added to the site. And the main thing is to reduce the size of the photo without losing quality.

Programs to reduce the size of image files will come to the rescue in this matter. Here are a few rules:

  • The lightest photos in jpeg extension.
  • The png format and screenshots in pnp are the heaviest.

For permanent job With photographs, you need to try several programs and choose a couple of them for permanent work. I use the following photo editing and compression programs:

  • Standard tool Microsoft Office(excellent compression when resizing up to 448x);

optimization WordPress images Microsoft program Office 2010
  • Great program Fast Stone Image Viewer(http://www.faststone.org/). This is an excellent editor with the ability to do good group compression and change the photo format;

WordPress image optimization with FastStone
  • Program (https://saerasoft.com/caesium/). This free program, with excellent single or group compression of jpeg photos.

WordPress image optimization with Caesium
  • I recommend the program (sourceforge.net/projects/nikkhokkho/files/latest/download). unlike Ceasium, this program is based on Windows will compress any image formats.

Conclusion 2

You need to compress photos before adding them to your WordPress site.

Bulk image optimization for WordPress

WITH using WordPress You can optimize your entire WordPress media library without uploading photos.

To optimize photos already placed in the WordPress media library We use the plugin: EWWW Image Optimizer(tested on version 4.4.2.). The plugin is simple, but the working one is updated periodically. Cloud plugin (2) allows you to optimize photos using cloud technologies and compresses the photo without changing the format. This plugin is paid, $0.005 per photo up to 1000 photos.

Install the plugin as standard, you can from WordPress panels on the Plugins tab→Add new→Search by name.

After activating the plugin, it is ready to work, but you can go through the settings (Settings → EWWW Image Optimizer). Settings are in Russian, dangerous settings are highlighted with the word “Attention!” By the way, there is a function to reformat photos from png and gif to jpeg. After the settings, open the plugin page and start the optimization process.

After some time, we look at the results of photo compression. I note that I always compress photos before the site, but the EWWW Image Optimizer plugin manages to “squeeze” from 5% to 20% out of each photo.

Conclusion 3

WordPress, with the help of an additional plugin (plugins), allows you to optimize photos of the entire media library of the site at any time.

As you can see, optimizing WordPress images is not difficult. There is no need to ignore it, because photos are the main reason for a slow website. In addition, there are a few more tips for using photos on WordPress sites.

  • Try to choose vector formats images. Their quality does not depend on resolution or size, which is why they look great on large monitors and different devices.
  • For SVG resources: compress them, remove XML markup, check the GZIP compression setting for SVG files.
  • For raster photos: choose your scale and format for raster photos, avoid GIF, compress photos before adding to the site (), don’t be afraid to reduce photo quality, reduce color whenever possible (optimally 256 colors), remove unnecessary metadata (


2024 gtavrl.ru.