Optimizing your images manually would involve a lot of resizing, a fair bit of coding, and heaps of time. Luckily, Smush does all the hard work for you and plenty more besides, all of which you will find covered in this guide to help you get the most out of the plugin.
Smush offers an abundance of features to help you get your images under control.
For example, whilst Smush may be best-known for compressing images (without losing quality), it can also help defer your offscreen images with its lazy-load feature, convert your images to next-gen formats (WebP), and serve your images from our super-fast CDN.
Luckily, you don’t need to dedicate much time or effort to your images when you have Smush installed. Most features can be activated with one click.
Whether you’re a new user or just hoping to uncover some cool features you might have missed, this guide will help you get the most out of this plugin.
We look at how to:
So without further ado, here’s how to get the most out of Smush:
1. Smush All Your Images in Bulk
When you first install Smush, chances are you’ll have a backlog of images that need your attention.
The Bulk Smush feature scans your site for any images that would benefit from being compressed.
All you have to do is click the button – Smush does all the hard work for you and lets you know when the job is complete.
Much faster than compressing them yourself.You can exclude certain image sizes from Bulk Smush if required. However, as Smush compresses without sacrificing quality, it may be beneficial to smush them all.
Remove the ticks from the images sizes you want to exclude from being compressed.2. Automatically Compress New Uploads
Once you have used the Bulk Smush feature to catch up on your backlog of image compressing, you will seldom need to use it again.
This is because of the handy Automatic Compression feature. If you enable this, Smush will compress images as soon as you upload them to your site.
The days of routine image pruning can easily be a thing of your past.3. Super-Smush For Double the Compression
If your main focus is on your site’s speed, you may want to take image compression a step further.
Super-Smush offers twice the compression of regular smushing by stripping out every bit of unneeded data, without reducing the quality of your images.
Give it a try – we challenge you to notice a difference in quality!If you don’t want to take it as far as Super-Smush, you can instead strip the unnecessary metadata from your images, leaving only what is needed for SEO purposes. Photos often store camera settings in the file such as focal length, date, time and location – removing this will reduce your file size.
If you’re a photographer, you might want to keep this information, but it serves little purpose on most sites so is generally safe to remove.
4. Display Your Full Size Images
If you upload an image that is larger than 2560px in either width or height, WordPress will automatically scale it down to generate a ‘web-optimized’ maximum image size.
If you are purposefully adding larger images and want to override this, you can use the image resizing option.
You can set your own new maximum image size.Bear in mind that your theme may also have its own maximum image size – you will need to check this before enabling this feature.
If you are uploading full-sized images, you can also choose whether or not these will be included in Bulk Smush.
Another couple of simple one-click features.Make sure you enable the bottom selection if you want to store a copy of all your full-size images, in case you ever wanted to return them to their pre-smushed forms.
Learn more about how WordPress handles images by checking out this blog.
5. Convert Your PNGs to JPEGs
There are some circumstances where one of these two file types is more suitable than the other. However, if your main concerns for your site are memory usage and speed, then using JPEGs instead of PNGs should be beneficial.
If you upload your images as PNGs, Smush can check to see whether converting them to JPEGs will reduce the file size.
The files will remain as PNGs if there is no reduction in the file size.You can, of course, make the same conversion outside of WordPress. However, using Smush removes the hassle and converts all your files in one swoop.
If you would prefer to select individual images for compression, look no further than your own media library.
Here, you will find a new column labelled ‘Smush’.
You can compress your images one-by-one.If you have auto-compression turned off, any photos which you upload should be ready to smush from within your media library.
You can smush your images individually, or alternatively single out images to be ignored from bulk smushing.
7. Lazy Load Your Images For a Boost of Speed
If you have pages with lots of photos, displaying them all at once can put a lot of pressure on the server.
Deferring your off-screen images is a good way to allow the server to concentrate on loading the elements of your site above the fold so that your visitor can get stuck straight in.
It takes one click to deactivate if you find it’s not right for your site.If there are certain types of images or certain output locations you wish to exclude from lazy loading, you can easily add them here.
Remove the ticks from any of the options that you don’t wish to include.You can also exclude certain various post types, specific URLs, and CSS classes and IDs.
Basically, if you want to enable lazy loading, you can fine-tune exactly how and where it is enabled.
Once you have chosen which images will lazy load, you can then decide how you want the pre-loading images to appear.
If you don’t want any form of animation, simply select ‘None’.8. Utilize Smush’s CDN
The closer you are to the server that is providing your content, the faster it will load. A CDN (Content Delivery Network) is a series of servers which are spread around the globe, and when a browser makes the HTTP request, the content is served from the closest server to its location.
Smush Pro boasts a 45-point CDN, with a few extra tricks up its sleeve. It can automatically resize your images as well as convert them to Google’s own next-gen format, WebP.
If all you want is for your images to be served from the CDN, you do not need to delve any further into these.
However, there are a few useful tools that can be of benefit to your site, so they are worth checking out.
To activate the Smush Pro Image CDN, From Smush Pro in your websites dashboard, go to the CDN tab and click the blue button.
Once you have activated the CDN, you will see more options within Smush.This will store and serve copies of all your JPG, PNG, and Gif images from the Smush edge servers – drastically improving speed.
Don’t Leave Your Background Images Out
As standard, only images used on your posts and pages will be served through the CDN
If you want your background image to be served from the same speedy CDN as the rest of your images, Smush has you covered.
Your background images will reach your visitor quicker if served through our CDN.You will need to ensure that your background images are properly declared with CSS in your theme’s files.
9. Serve the Correct Image Sizes
Ideally, you should never serve an image larger than what will be displayed on the user’s screen. Using original or full-size images when a smaller image will do makes your pages take longer to load while your browser waits for the images to render.
Smush’s CDN houses a handy feature to resize your image to fit the container, without needing to touch a line of code.
As the resizing is done from the CDN, your original images will remain full size.10. Convert Your Images to Next-Gen Formats
JPEG 2000, JPEG XR, and WebP are modern image formats with superior compression capabilities. This means they produce much smaller image files so you can greatly improve your page speed.
Images served in the WebP format can benefit from more than 25% compression, and when you think about the number of images on your site, that’s a tonne of space that can be saved.
Smush’s CDN offers the option to convert your images to WebP in just one click.
All the legwork is taken care of by Smush.Not all browsers support next-gen formats, which is something you would usually have to bear in mind when deciding to make the switch.
However, if you enable the WebP Conversion feature, Smush will automatically check whether or not a browser supports this format, and if not, will serve it in the original one. This ensures that none of your visitors are compromised.
Support at Your Fingertips
Now you know the ins and outs of this little plugin, it’s time to get stuck in and see how your site can benefit.
Smush is a very user-friendly plugin, so you should have no trouble managing your images.
If, however, you find yourself in need of some friendly advice, members should look no further than our awesome support team who are available 24/7.
You can also check out the plugin documentation and view new updates and features coming soon in our roadmap.
Free Video
Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch)
Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.
Keep reading the article at WPMU DEV Blog. The article was originally written by Kirstan Norman on 2020-07-05 21:10:35.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.