Speeding Up WordPress With the Free WP Smush Image Compression Plugin
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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:
Go to Media > WP Smush
Click Bulk Smush 50 Attachments
WP Smush will then begin smushing 50 unoptimized images in your Media Library
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!
No comments:
Post a Comment