Speeding Up WordPress With the Free WP Smush Image Compression Plugin

[ad_1]

Image compression is a key factor in keeping your site speed fast. After all, if your pages are filled with large, unwieldy images, they will take a really long time to load – and nobody likes a slow website.

Website speed has become an increasingly important search engine ranking factor, so much so that Google has made it one of the more important factors in its ranking algorithm.

So how exactly do you optimize your images and, in turn, speed up your site?

Our image optimization plugin WP Smush strips hidden, bulky information from your images, reducing the file size without losing quality. It’s by far the most popular image compression plugin for WordPress, with more than 300,000 active installs using our dedicated Smush servers.

In this post, we’ll explore everything you need to know about image compression and how to set up WP Smush to reduce your image file sizes, improve the performance of your website and boost your SEO.

Image Compression: What You Need to Know

Image compression is the process of minimizing irrelevancy and redundancy within image data that is (hopefully) imperceptible to the human eye. It enables you to store and transmit images more efficiently. Image compression can also dramatically reduce image sizes and it is an essential step in site optimization.

With image compression, you have to achieve a balance between the highest possible image quality and lowest possible file size. We’ll discuss that in detail for different image formats in the next section.

How Image Compression Works

Image compression is achieved algorithmically; there are several compression algorithms out there that each have their own working mechanism. The simplest algorithm, called run-length encoding, analyzes each and every “bit” of the image and searches for patterns.

To put things into perspective, a single kilobyte has nearly 8,000 bits, and most images we use are typically tens (or hundreds) of kilobytes in size.

A dock with sun setting in the horizon.
Image size pre-compression: 245 KB. Image size post-compression: 199 KB.

Images can be converted to matrices of numbers. When the image compression algorithm identifies a pattern – such as ten zeros in a row – the entire pattern is replaced by 10:0 to denote the row of ten zeros. Although this method of image compression isn’t as effective as others, it gives you a fair idea of how compression can be achieved.

Why Image Compression Is Important

Image compression has been important since the advent of the internet. Let’s take a look at specific scenarios in which smaller images are always better.

1. Speed: According to the HTTP Archive, images are the main cause of average web page sizes weighing in at the 1.25MB mark (followed by JavaScript exploitation). Bloated and oversized images negatively affect the loading time of your site because they contend with other resources for bandwidth.

2. Mobile Users: According to Kissmetrics, 73% of mobile internet users say that they have encountered a website that was too slow to load.

3. Conversion Rates: Uncompressed images result in slow websites, and research shows that a 1 second delay in page loading time can cause a 7% loss in conversions and 11% fewer page views.

4. Search Engine Rankings: Google considers site speed to be an official ranking factor in their algorithm. Compressing the images on your site’s pages will improve its chances of scoring a better ranking.

Lossless Compression vs. Lossy Compression

If you’ve ever used an image compression tool then you’re probably familiar with the terms ‘lossless compression’ and ‘lossy compression’. Ever stopped to wonder what the difference between both types was? Let’s find out.

Lossless Compression

When you select lossless compression for your image, it means that every single bit of the image can be recovered after the file is uncompressed – the image’s data is completely restored. An example of a lossless file type is PNG.

WP Smush uses multiple methods to squeeze every last byte out of your images for the best possible lossless compression.

Lossy Compression

As opposed to lossless compression, lossy compression works on a mechanism by which the image’s data is permanently removed during compression. Decompressing the image will only restore some of the original data. Images saved as JPEG files typically employ lossy compression.

Un-compressed and compressed image of the New York skyline merged.
The image on the right is compressed (lossy) and ~100 KB less in size.

Compressing Online Image File Types

There are many different image file types available and they can be categorized as either “raster graphics” or “vector graphics.” For the purpose of this article, we’ll limit our focus to raster graphics – all three of which are smushable.

Raster graphics have attained universal acceptance and are supported on almost any browser you’ll find. But in terms of optimization, they’re not as friendly as vectors.

  1. GIFs (Graphics Interchange Format) have small file sizes, support for transparency mode and a limited color palette. Their lossless compression basis allows for little optimization.
  2. JPEGs are used to display photographic images that have a large range of colors. They can undergo heavy optimization due to their lossy compression basis.
  3. PNGs (Portable Network Graphics) are known for their excellent image quality and full transparency support. These file types provide lossless compression.

Image Compression with WP Smush

We the adopted WP Smush plugin (previously known as WP Smush.it) back in March 2013 from Yahoo! After Yahoo! shut down its Smush.it API earlier this year, our developers quickly got to work redesigning WP Smush from the ground up. We built a new Smush API and a brand new cloud config for bigger and better smushing.

Check out the live stats since the relaunch:

  • 1,066,682,813

    images smushed since we re-launched WP Smush

  • We’ve saved users a total of
    4,562

    . That’s

    4,898,435,402,737

    image bytes Google is no longer penalizing websites for

  • We smush images for
    17,866

    different WordPress sites each day

  • At peak times, we often handle smushing 200+ images per second with no major slowdowns
  • 8.80

    average lossless compression overall (WP Smush Pro average is even higher due to multi-method optimization)

  • On average, Super-Smush (lossy compression) has a real-world compression rate of
    17.88

    (but we often see it beat lossless by 2-10x as a lot of images coming through from members have been previously compressed). For example Super-Smush savings for all PNG files yesterday was 33%.

To put it simply, WP Smush works better than before. It automatically – and reliably – compresses every single image you upload to your WordPress site once you install the plugin. The plugin works great on HTTPS sites and enables you to smush your media library in batches of 50 attachments.

How WP Smush Can Boost Your Site’s Load Time

WP Smush is fully loaded with powerful functionality that can boost your site speed while maintaining your image quality.

Smush Now button in the Media Library.
One-click automated smushing.

Automated Smushing

If never optimized an image in your life (no one’s judging!), you can finally get around to it with WP Smush’s Automated Smushing feature.

The plugin enables you to optimize all those images that have happily been nesting on your website for years with just one click.

Lossless Compression

WP Smush uses multiple algorithms to achieve lossless compression while retaining impressive image quality. Upload images up to 1MB and smush every last byte out of your images.

Sunflower image depicting WP Smush's advanced techniques for lossless compression.
Advanced techniques for lossless compression.

The advanced lossless compression techniques produce amazing results without compromising on image quality or compression speed.

Get rid of all that extra image data and see the difference for yourself (which, in this case, won’t be noticeable).

Lossless compression will save you a ton of space and you’re highly unlikely to notice a difference in the quality of the image. You can even see how much space you’ve saved in both size and percentage. The plugin also enables you to create backups of your original images in case you want to restore them later on.

Bulk Smushing

If you’ve got hundreds of uncompressed images stored on your server then it’s time to compress them and reclaim some extra space. Don’t we all want a little extra server real estate?

WP Smush’s Bulk Smushing feature enables you to compress existing images on your server as well as any new images you upload in batches of 50 attachments in one go.

WP Smush vs WP Smush Pro

At the same time we relaunched WP Smush, we released WP Smush Pro, a premium version that offers even more horsepower:

  • Super Smush for double the compression – With our intelligent multi-pass lossy compression, you can get 2-10x more compression than lossless with almost no noticeable quality loss
  • Smush up to 32MB – WP Smush offers smushing up to 1MB, but with our premium plugin you can compress images up to 32MB
  • Backup All Smushed Images – You can backup every image you smush and restore unsmushed files at a later date.
  • Bulk Smush in One Click – Do you have more than 50 images in your media library? No worries, WP Smush Pro can smush the lot in one click. You can even set automated smushing so your images are automatically compressed when they are uploaded to your website

If you’re ready to take things to the next level then WP Smush Pro is just a few clicks away. It goes the extra mile and really puts image optimization through its paces. It’s smushing awesome! (Yeah, I went there.)

How to Setup WP Smush

First thing’s first, you need to install and activate WP Smush plugin.

You can access WP Smush from the Media menu.
You can access WP Smush from the Media menu.

WP Smush is available to download at WordPress.org

You can also search for “WP Smush” in the backend of your site (Plugins > Add New).

Once you’ve activated the plugin, go to Media > WP Smush to access the settings page.

Choose to smush images on upload will save you having to manually compress your images.
Choose to smush images on upload will save you having to manually compress your images.

The first option you will see on the Settings page is “Smush images on upload,” which gives you the ability to automatically smush images when you add them to your site.

If you leave this setting unchecked, you will need to manually smush any images you wish to optimize.

Lastly, click Save Changes.

And that’s all you need to do to set up WP Smush! Let’s move on to using WP Smush’s other features.

Smushing Single Images

WP Smush enables you to individually compress images from within your Media Library. To start smushing your images here’s what you need to do:

Open your Media Library.

Click "Smush Now!" to optimize your image.
Click “Smush Now!” to optimize your image.

If your Media Library is set to List view, you’ll see a new column labeled WP Smush and a Smush Now button next to every unoptimized image. Select the images you want to compress.

WP Smush will then do its thing. When done, stats will be displayed detailing how much has been trimmed from your image.

Click “Smush Now!” on the individual image to optimize it.
Click “Smush Now!” on the individual image to optimize it.

If your Media Library is set to Grid view, select the image you want to optimize and click on Attachment Details. Then click Smush Now to smush the individual image.

WP Smush will start compressing the image and then output stats on how much you’ve saved, both in kilobytes and percent.

Bulk Smushing Images

The Bulk Smushing feature enables you to compress images in batches of 50 attachments in one go. To use this feature:

  1. Go to Media > WP Smush
  2. Click Bulk Smush 50 Attachments
  3. WP Smush will then begin smushing 50 unoptimized images in your Media Library
Bulk smushing with WP Smush.
Bulk smushing with WP Smush.

While bulk smushing images, you will need to keep the page open while the plugin compresses the batch of images. If you need to halt the compression process, you can close the page and resume where you left off next time you open it. Super convenient, right?

Why Use WP Smush Pro?

WP Smush is a great place to start if you have a small website with only a few hundred images, but if you’ve hundreds of image and need to compress large images, WP Smush Pro might be a better fit for your needs.

Let’s compare the two plugins based on the features they provide:

WP Smush WP Smush Pro
Image compression limit 1 MB 32 MB
Bulk smush limit 50 attachments All images
Process JPEG, GIF and PNG image files Yes Yes
Auto-Smush your attachments on upload Yes Yes
Advanced lossless compression techniques Yes Yes
Intelligent multi-pass lossy compression No Yes
Backup of your original un-smushed images No Yes
Customer support No Yes

Smush Your Images With WP Smush

WP Smush is an excellent image compression solution for optimizing server space and improving your site’s performance.

In this post, we covered the plugin’s full functionality and you should now be in a good position to take things further yourself.

WP Smush is a great place to start if you want to quickly and easily set up image optimization on your site, and WP Smush Pro is an upgrade when you want to take your compression game to the next level.

Do you use WP Smush? Let us know in the comments section below!

Image credits: Unsplash, PNG Img.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *