Published by on February 26, 2020 • 0 Comments • Lire en Français

Do you know what takes the longest time to load on a website page?

Neither is it CSS files, nor Javascript files.

No: it's the pictures.

People often try to optimize the speed of their site by optimizing the code (as you may have seen if you read our guide about the .htaccess file) ; but you can achieve this without giving yourself a headache.

Before I tell you about the WordPress plugin I use to significantly reduce WPMarmite images' weight, I would like to talk to you about best practices to apply to your images.

3 best practices concerning your images

When managing websites, it's important to always think about visitors first. In my case, I always try to do what's best for you.

For instance, instead of telling you directly about a plugin or something else, I want to give you pieces of information that can be useful to you in the future.

It takes a little more time but I know that in the long run, this is what makes the difference 😉

Come on, enough chitchat. Let's move on to these 3 tips!

1. Do not upload oversized images

Whether or not you're a keen photographer, the files created by a digital camera today are very large.

They can weigh from 4 to 8Mo, sometimes more! It all depends on your settings.

To print them out, or to edit them on your computer, that's great.

But to upload them on the web, it gets immediately more annoying.

Indeed, if a page has to load a dozen 8Mb images, your visitors better be connected to a fibre-optic network…

The best thing to do is to resize your images before sending them to your site. A 2000 pixels width is more than enough.

Any image editor can do it, but in the long run, I admit it can be tedious.

On WPMarmite, images are always 600 pixels wide in the articles (no need for 2000 pixels wide visuals). So I use the following code to make WordPress automatically resize the images sent :

/* Adding another image size
 * named "recipe-image" (600px wide)
 */

add_action( 'after_setup_theme', 'wpm_recipe_image' );
function wpm_recipe_image() {
    add_image_size( 'recipe-image', 600 );
}

/* Adding it to the list of image sizes
 */

add_filter('image_size_names_choose', 'wpm_image_sizes');
function wpm_image_sizes($sizes) {
    $addsizes = array(
    "recipe-image" => __( "Recipe Image")
    );
    $newsizes = array_merge($sizes, $addsizes);
    return $newsizes;
}
Place this code in your child theme's functions.php

The second part of the code allows you to add the generated image in the list of available sizes :

This little piece of code isn't much, but it'll save you precious seconds, that's for sure 😉

Choose the right file format

You are probably familiar with the two main image formats currently available:

JPG and PNG.

Do you know their difference? It's a bit technical, but it comes down to the way they're encoded.

In other words: it's about how the images are saved in the file.

This discrepancy means that some will be less heavy in JPG than in PNG and vice versa.

To help you choose the best format, keep in mind that :

  • JPG = photos, images with thousands of colors or shades of gray
  • PNG = diagrams, simple images, logos or images with transparency

See it for yourself: convert a picture taken with your phone to PNG format, and see how much it weighs.

Compress the images before sending them

Before sending images to a website, I always take care to compress them.

For example, after retouching an image in Photoshop, I always use File > Save for web to find the best compromise between weight and quality:

Save for the web in PhotoShop
My PhotoShop interface is in French, but you get it, right? 😉

Switch to 2 thumbnails mode and look at the final weight in the bottom left corner. You can play with the formats and settings at the top right (and possibly the size at the bottom right).

Of course, you must not degrade the quality too much, otherwise the rendering will be terrible.

If you're on a Mac, I recommend the ImageOptim tool to compress more, without losing any visual quality.

Your best WordPress projects need the best host!

WPMarmite recommends Bluehost: great performance, great support. All you need for a great start.

So much for the basic advice, right? And maybe you'll tell me: “Ok, but this process can be very tedious, in the long run!”. And you'd be right!

Also, how do you deal with files already in your media library?

That's where the plugin I want to tell you about comes in…

Imagify, the plugin that compress your images like never before

Imagify's homepage

If you're tired of doing constant manipulations, you'll like the rest of this article. You can even do without the 3 best practices mentioned above!

Indeed, the team behind the WP Rocket cache plugin has launched another service, called Imagify.

When you think about it, it's quite logical that WP Rocket launched this service. Instead of integrating image compression, their team preferred to develop an online service (SaaS).

Its big plus: the service can be used for any type of site (and even manually).

So you're going to tell me that this kind of thing already exists. Examples include TinyPNG, WP Smush and Kraken.

You're absolutely right. But since its release, Imagify has been designated as the best image compression service more than one time.

Which reminds me of a certain cache plugin 😉

How does Imagify work?

As I told you before, Imagify is a service. That is to say, it's not only a plugin, but a real platform. So anyone can use it.

The online service

To use it, just go to Imagify to start immediately. You'll need to create a free account to start off the Imagify experience.

The SaaS Imagify

Once on the site, you just have to choose a compression mode and then drag and drop your images in the area on the right.

For my test, you can see that the compression gain is :

  • 1.16% in normal mode
  • 18.49% in aggressive mode
  • 33.76% in ultra

After optimizing, you'll only need to download your images by clicking on the “Download” button on the right. You can also download them all in a .zip file by clicking on “Download all optimized files”.

The free Imagify WordPress plugin

The free Imagify plugin on WordPress' official directory

If you want the image compression to be automated, you will have to go for the plugin.

Thus, all the images sent to your site will be compressed on the fly, i.e. as soon as they are put online.

This is a significant time-saver, as there will be no need to deal with all the daunting tasks we talked about earlier.

To do this, simply install Imagify on the official WordPress directory.

With a free account, you will be entitled to 25MB of compression per month. If you blog from time to time, that will be more than enough.

For having installed two other similar plugins, I can tell you that getting started is much easier with Imagify.

What I like about this plugin, is that you are guided step by step (like on WP Rocket):

The plugin guides you through your initial settings

You need to create an account and enter your API key (in the API menu) to connect the plugin to your account.

Let's see what the settings look like:

Imagify Settings

The available options are quite simple. You will be able to:

  • Choose the compression strength (Normal, Aggressive or Ultra)
  • Enable automatic optimization (leave checked)
  • Backup original images (also leave checked)
  • Create webp versions of your images
  • Automatically resize images that are too big (2000 pixels will be fine but you can put a smaller width, depending on your website layout)
  • Keep EXIF data, i.e. the date of the picture, the camera used and other information (except in exceptional cases, do not check this box)
  • Select the image sizes to be compressed
  • Show or hide the Imagify menu in the toolbar

Regarding the image sizes to be checked, make sure to select thumbnail, medium, medium_large and large, in addition to the sizes you need.

Even if this consumes some of your compression credits, WordPress will be able to load these images onto small screens.

Now let's take a look at the bulk optimization mode. This functionality allows you to process all the images already uploaded to your site.

Go to Media > Bulk Optimization to view the following page:

Bulk optimization in Imagify

In this example, you can see that we saved 74% of the images' original weight!

I think the result could have been even better if my files had been optimized before uploading them.

The way to do this is simple as ABC. Select a compression mode and click “Imagify'em all“.

If you ever want to optimize images one by one, you can go to the Media Library and find the Imagify column.

You can manage your images' size and weight directly into your Media Library

You'll discover the compression statistics of each image, be able to optimize them in other modes or restore the original image (if you checked the option in the settings of course).

Now let's answer the question you're probably asking yourself.

How much does Imagify cost?

So far, I have told you that 25MB of compression is offered to you every month.

That's fine when you have a small blog. But if you need more resources, you'll have to opt for one of their offers. Here they are:

How much does the compression plugin Imagify cost?

As you can see, these are monthly subscriptions (it's possible to pay annually to get two free months).

If the subscription plan does not meet your needs, you can purchase a one-time plan, for 1Gb, 3GB or 10Gb.

These per-unit offers are interesting if you have a lot of images to process in your media library. 

To sum it all up

You may have realized it: I'm quite fond of this service, and I highly recommend that you install the Imagify plugin to optimize your website's images.

If you blog once or twice a week, the free offer will be more than enough for you (as long as you don't upload 5Mb pictures!).

In the worst case scenario, optimizing your entire library will cost you less than $10 (that's about 6000 images).

For the most greedy among you, go for a monthly subscription, and sleep soundly 😉

Have you ever paid attention to image compression on your site? If so, what do you think of Imagify? Which image compression plugin do you use on your website?