Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

How to significantly compress the images on a WordPress website

We all know that the speed of a website directly affects its success. If we click on a link and it takes too long to load, we click back, and that poor person that’s taken weeks to write that content never gets a chance to tell their story and showcase their content. This is why you must learn how to compress the images on a WordPress website.

We also know that Google changed its algorithm and introduced the Page Speed tester to test your website’s speed. When Google and other search engines start penalizing you for something, you need to take it serious, and they’re penalizing your website for its speed!

In this post, we’re going to run you through some of the different tools and strategies you can implement to ensure your images do not slow down your website and cause avoidable issues that negatively affect your website.

What affects the size of an image

DETAIL

The more details that’s in an image, the higher the file size is going to be as more information needs to be stored in the file. For example, if you have two photos that are of .jpg format and have the same dimensions in pixels, but one is a scenic landscape shot and the other is of the sky only, the shot of the sky will be a much lower file size.

Here’s why:

  • Tone and color range: The sky shot is only going to consist of blues and whites (maybe a cheeky bird), but in summary it’s going to have similar colours throughout the image. The scnic landscape shot, however, has a larger range of colours (greens and blues and browns and whatever else is in the photo) and also the different shapes of the trees and mountains and water. The landscape shot has a wider color range AND has more detail.
    More detail = more information that needs to be stored = a larger file size.
  • Dimensions: The larger the dimensions of your image, the larger the file size will be.

FILE FORMAT

The format you save an image in is going to directly affect the size of the image as each file format uses a different algorithm to compress images, and there are times that you should use one image format over the others.

Simple techniques you can use to compress the images on a WordPress website

1 – Export images with effects before you import them into WordPress or Beaver Builder. For example, don’t use the Row overlay feature in Beaver Builder if it can be avoided

Sure, this feature is incredibly useful and has its place, but it should be avoided when it can as it causes unnecessarily larger file sizes.

As we discussed above, the more detail that’s in an image, the higher the file size is going to be as more information needs to be stored in the file. Details include the range of tones and color.

If you compare the two images below, the first image in full color has the file size of 180kb and the second image with the black overlay (which we created in photoshop) has the file size of 86kb

The full color image of a landscape has the file size of 180kb

The full color image of a landscape has the file size of 180kb

The landscape image with a 70% black overlay has a file size of 180kb

The landscape image with a 70% black overlay has the file size of 86kb

This means that the black overlay image is 48% of the file size of the original. This is because it has less of a colour and tonal range (mostly blacks).

THE PROBLEM

Let’s say you’re wanting to produce this affect of a black overlay over this same landscape image using Beaver Builder’s row overlay feature.

You edit the row, set the full color landscape image (which we know is 180kb in file size) as the background, and then add the 70% black overlay over this row background image image. Just like below.

This animation shows you how you would normally set a Row overlay color using Beaver Builder.

This animation shows you how you would normally set a Row overlay color using Beaver Builder.

You’ve produced the same affect as what we did in photoshop above, but you’ve still made your user download the 180kb full color image whereas you could have added this black overlay to the image in photoshop, exported it and used this as the background row image and only made your visitor download the 86kb file.

WHEN TO USE THE ROW OVERLAY COLOR FEATURE

When we build websites for our clients, we export the images with the overlay in photoshop to minimize the file sizes. We also let our clients know that if they can, they should first create the overlay effect in an image editor and then export the image first. Not all our clients have access to image editors so we do an audit every so often to see see if the client would be interested in having us compress their images for them.

2 – Export your images into the appropriate format

Here’s a quick overview of when you should use each different file format:

  • JPG: Always use this for photos. NEVER use .png or .tiff for photos. The algorithm that a .jpg uses to compress an image is extremely good at compressing lots of tones and colours into a small file size.
  • PNG: Use .png for images that have blocks of solid color or images that need to have transparency. Great for icons.

TRANSPARENCY IS A TOPIC WE NEED TO DISCUSS HERE

Now, there will be times when your design has a full colour object that needs to have transparency. Consider the screenshot below of our BeWell child theme.

The picture of the tablet and desktop below needs to extend out of the row it’s in with the grey background and overlap the row with the white background above it.

Here's an example of where you might need to leverage .png's ability to have transparency but you also have a full-color object and you know the file size is going to be very large.

Here’s an example of where you might need to leverage .png’s ability to have transparency but you also have a full-color object and you know the file size is going to be very large.

Now, ideally we want to use a .jpg for this because the image of the desktop and tablet is full color and .png will be very large. BUT, we need the transparency of the .png file format to have the desktop overlap the two rows.

What we’d recommend in this case is to do the following (in the following order):

  1. Redesign this section to ensure there is no overlapping so that you can export the desktop and tablet image as a .jpg and keep the file size down.
  2. Scale the image down and export it at the exact dimensions which is what we did in the design. Originally, we had designed this image of the desktop and tablet to be much larger. We scaled it down to this size intentionally to reduce the file size.

3 – Compress your images at the appropriate quality before importing them into WordPress

To reiterate the above, export images as .jpg and compress them as much as possible using common sense. If the website is for a photographer, you’re going to need to export and compress images a lot higher than normal. If the website you’re designing does not rely on showcasing high quality images, we usually export our images in photoshop at 50%-75%, depending on what they’re being used for on the website.

compress the images on a WordPress website

We usually compress our images in Photoshop at about 50-75% quality, but it depends on the type of website we’re doing and what the image will be used for in the website.

4 – Export your images at the exact size they’ll be used for

If you’re adding an image into a column that is 500px wide, export your image at 500px wide, not 1200px wide.

TIP! Think about how the image needs to work responsively, also. For example, if an image is going to be 500px wide in its column on desktops, but at medium sizes will be full width at 1000px, you’ll need to export the image at 1000px.

Always think responsively when exporting images!

You should also carry this through to when you’re using any of the Beaver Builder modules. For example, if you’re using a call-out module, you should select the image size that is appropriate for the width of the column and NOT just the full size image.

5 – Blur parts of the image

When you blur an image, it reduces the detail of the image and subsequently reduces the file size. A great use of this is when you have a main image up the top of the page. By blurring the image a little, you can significantly reduce the file size of the image AND also make any text over the image a bit easier to read.

To show an example, if we consider the above landscape image with the black overlay, we know it is 86kb in file size. If we blur the image as per below, the final image size  of the blurred image is 16kb – extremely small.

You can blur an image to decrease its file size.

You can blur an image to decrease its file size.

Tools and WordPress plugins you can use to compress your images

1 – Adobe Photoshop

adobe-photoshop-screenshot

We use Adobe Photoshop and export all our compressed images from there before we import them into WordPress.

See the Adobe Photoshop page

2 – Optimus.io

optimus-io-screenshot

We’ve paid for the pro version of Optimus.io and have no regrets. When you upload an image to WordPress, WordPress takes that image and crops it to all the image sizes that you’ve defined in your plugins and themes, some examples being thumbnail, medium and large. When we upload our already compressed images to WordPress, Optimus.io takes each version of this image (so if we upload the scenic landscape image we’ve used in this post, it takes the thumbnail, medium and large versions of the image that WordPress has cropped and created on import) and compresses them individually again.

In the media library Optimus.io provides an overview of how much it compressed the original version of the image, as indicated on the right in the green circles.

Optimus.io uses the green circle on the right as an indication that it successfull compressed the image. The % inside the green circle is how much Optimus.io was able to compress the original image by.

Optimus.io uses the green circle to the right of the media item as an indication that it successful compressed the image. The % inside the green circle is how much Optimus.io was able to compress the original image by.

We install Optimus.io on all our client websites. You can purchase it here.

3 – Imsanity

imsanity-screenshot

This plugin is great for use on client websites where the client is managing the website. Using Imsanity, you can set a maximum width that images can be, for example 1200px. If your client uploads into their media gallery an image that is 2000px wide, Imsanity will take this image and scale it down and crop it proportionately to 1200px wide which significantly reduces the file size.

Click here to visit the Imsanity plugin page.

4 – EWWW Image Optimizer

ewww-image-optimizer-screenshot

We played around with this briefly a while ago and it’s definitely worth checking out. It’s free and has some great reviews! It does the exact job Optimus.io do. We went with Optimus.io over EWWW because EWWW Image Optimizer is free. As weird as that may sound, paying for a plugin (we feel) contributes towards ensuring the plugin remains around (someones coding these things so how and why would they stay around if they’re not getting paid?) and won’t cause us headaches with our client websites in the future.

Click here to visit the EWWW Image Optimizer plugin page.

Wrapping it up

Search engines like fast loading pages as they can provide people using their service with answers faster. Thats a search engines goal after all, and one of the reasons you must learn how to compress the images on a WordPress website.

But don’t just optimize your images for Search Engines. Focus also on your users and the experience they have on the website. Would you want to browse a slow website? Optimize for user experience!

BUT DON’T BE BLACK AND WHITE

There will be times when the website you’re designing / developing will require high quality images (maybe a photography or art website) and you can’t sacrifice the quality as this is a requirement of the website – to showcase work. That’s ok. Don’t compress the images if it is going to render the website less useful.

EDUCATE YOUR CLIENTS

Sometimes you’ll export an image and your client will request the image be exported at better quality. Let them know this will slow down their website and possibly affect their ranking in search engines and that it’s your recommendation that they do not increase the size of the image. Some clients will listen and others will persist. That’s ok. You’ve done your best.

BALANCE IMAGE SIZE AND QUALITY

We mentioned that we export our images at between 50%-75% quality, but if you have some room to move on image size (maybe it’s the only image on the page and the 50% quality is only producing 40kb) push up the image quality a bit if the image permits. Use your best judgement on an image-by-image case but also consider the other content on the pages.

THINK RESPONSIVELY

Consider how the image needs to work responsively.

LEVERAGE LAZY LOAD

wp-rocket-screenshot

Lazy-load is a technique where images are downloaded only when they are needed. For example, when a page loads, only the images that are immediately visible in the screen are downloaded and the rest of the images further down the page and (out of the viewpoint) are delayed. As the user scrolls down, the images are downloaded as they come into view. By not downloading all the images on the page at once and only downloading the images as they come into the view, your page loads much faster!

Lazy-load is a feature included in WP Rocket, the caching plugin we use for all our client websites. We highly recommend WP Rocket when using Beaver Builder.

Please leave a comment below

Please share any other techniques or tools / WordPress plugins you’re using to compress your images.

2 Comments

  1. Athlone on August 16, 2016 at 3:52 pm

    Excellent article with great breakdown for even a relatively new user to keep a page as light as possible. Keep up the good work.

    • Beyonder #1 on August 17, 2016 at 1:15 am

      Thank you very much! Glad to help.

Leave a Comment

You must be logged in to post a comment.