You should always keep trying to speed up your WordPress website. With added up speed, you keep getting benefits of better search ranking, faster page load time, more conversion and improved user experience.
WordPress Image Optimization involves two tasks in general: (a) Resizing images to best fit in visitors’ browser and (b) compressing images to reduce their file sizes. What goes inside the Image Optimization for WordPress is slimming down the images without compromising image quality and user experience.
WordPress Image Optimization
When you don’t scale images for different parts on your pages and posts, you’re basically trying the one size fits all. This might seem a quick fix that works, yet the consequences are ever unfavorable. For example, you shouldn’t load a full sized image to show a thumbnail. Instead, save a smaller copy resizing the dimension of the thumbnail. Once done, the whole image will never be downloaded again and again just to show a thumbnail version. You save images, images give back!
In WordPress Administration (wp-admin), when you upload image files to the media library, WordPress makes three different versions, each different in size, by default. It ensures your pages load right scaled images to speed up the page load time.
In previous articles of this series, you’ve learned the basics of WordPress Image Compression and Optimization. Now is the time to get started with practical Image Compression and Optimization in WordPress.
You’ll be familiar with numerous image editing software, image editing online tools and WordPress Image Optimizer Plugins. WordPress Image Optimizer Plugins are great to reduce the size of bulk images, almost in autopilot.
When learning new Image Optimization Plugins for WordPress, you should be careful to not to corrupt you original image files by mishandling or misunderstanding user interface, settings and options.
Compress Images
Unlike setting image compression ratio in WordPress Media Admin Dashboard, all image editing software let you manually set the quality. You can slide the Quality ratio from 100% to anywhere below. The end result may vary from image to image, but, on average, you can use 70%-85% quality ratio, without losing visual quality of images, for least file sizes.
How to Compress and Optimize Images for WordPress
Compressing and Optimizing images for WordPress isn’t rocket science. Usually the steps are straightforward as follows:
Create Size Varying Versions of Images for Different Purposes
Same images are used for different purposes on WordPress websites. An image used atop an article is hero image that deserves almost full width and at least half height of the screen. The same image could resemble a thumbnail when used in content archive pages like pagination. Even smaller thumbnails are required to put the image on sections like sidebar and footer.
Simply speaking, one side doesn’t fit all. For the sake of page optimization and site speed, you need different versions having different dimension and file size to best suit the purpose on sections on pages on sites.
Remove Exif and Other Capturing Device Data from Images
Capturing devices like cameras add metadata like Exif (Exchangeable Image Format) to the original captured photograph and stores the same in the image file. Exif data contains both sensitive and bulk unnecessary data. Copyright, location, date-time along with White Balance Information, EV information, ISO information, etc are stored in the image file. It’s wise to strip those Exif data from image files before using on the web.
Save Images for the Web
The “Save for Web” option as found in Photoshop and many other image editing software is a macro of many things that ultimately prepares an image to be used on the Web. Images suitable for the Web usually require sRGB for vibrant color display. Such images also require to maintain a certain DPI (Dots per Inch). Well, you don’t need to understand them, but you probably need them all. The “Save for Web” exactly does the job for you.
While preparing images for WordPress and for the Web at large, you need to take some precautions. Always save and keep backup of original files, unedited. You only use edited and copied or “Save as …” images on the web.
Automatic Image Compression with WordPress
WordPress compresses JPEG files automatically when you upload them. Before version 4.5, WordPress used to compress images up to 90% of image quality retention. From version 4.5 onwards, the default settings are now 82% of image quality retention. This reduces image file size considerably better, however, at the expenses of distorting image quality.
Auto piloting image compression is great, but it needs to be tuned up first. You might not like the default 82% compression ratio. Fortunately, you can change that number simply tweaking the functions.php file as follows:
//add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );
add_filter( 'jpeg_quality', create_function( '', 'return 90;' ) );
//add_filter( 'jpeg_quality', create_function( '', 'return 80;' ) );
This tweak won’t affect the already uploaded image files. To retouch previously uploaded images, you need to install plugins like Regenerate Thumbnails. It will retouch your existing image files in media library.
Aside, the simplest tweaks, you need to use Image Compression and Optimization Plugins for WordPress to automate almost the whole process of image editing and serving.
Resize Images with Built-in WordPress Features
WordPress Media Library is the quickest solution when you need to resize images as fast as possible. Go to the Media; select your image; Edit Image and chose new dimensions. You’re all done when you save it.
Resizing images has its own advantages over choosing image format and compression algorithm. Resizing images makes multiple physical files, each having its own size and dimension. Compression optimizes a single file no matter what dimension you want to put the image in – it’s always the same file size.
Remember the Rule of Thumb: resize images for both flexible reduced file size and variable speed.
Compress WordPress Images with Software
When it comes to compressing images for WordPress or any website on the web, the first thing that comes along is desktop image editing software, followed by online image editing tools.
Adobe Photoshop, Adobe Lightroom and GIMP are a few notable mentions of image editing software. Professional image editing software like Photoshop and Gimp are very effective to manage your images and prepare them for the web. The learning curve, the caveat, is however too steep.
Compress WordPress Images with Online Tools
Online Tools for WordPress Image Compression are every popular. It comes handy when you don’t have options to install image editing software in your PC or server. These online image editing tools lets you edit images as well as let you save processed images at their cloud space.
JPEG Optimizer and JPEG.io have a reduction percentage of around 60%, while TinyPNG (if you choose to work with PNGs) of around 70%. Kraken is good for both formats, returning files of around 70% smaller via lossy compression.
By default, both JPEG.io and JPEG Optimizer offers a reduction percentage of 60%. TinePNG offers 70%. Kraken also has such default options. You can change them to suit your goals.
TinyPNG and Kraken became famous as online image editing tools. There are many others that you’ll know lately.
Compress WordPress Images with Image Optimizer Plugins
Unanimously, this is the most popular option among WordPress Designers, Developers, Webmasters, Administrators and site owners. Plugins do repetitive tasks of compressing and optimizing images for the web. Once installed, plugins keep doing their job unattended, behind-the-scene. You get benefits and credits for setting up automation to some extent! WP-Smush-It (WP Smush and Smush Pro), Imagify note worth noting for the time being. You will learn extensively about many more soon.
Optimize WordPress Images Manually Before Uploading
Compressing and optimizing images manually is helpful in cases when:
- i) you don’t consider plugins first
- ii) you have only a handful of images to work on
- iii) you’re familiar with image editing desktop software or online tools
When compressing images with software or online tools, duplicate the files first so that, you’ll always have the original at your disposal if things go wrong.
Scale images down to your desired size or crop it to reduce the scale of the image. Depending on the image editing software you like to use, you may need to follow different series of steps to compress images with a favorite image editing software.
You should resize or crop images having bigger enough resolution than you need on your site, for special purposes, before you upload them. You save disk space and you keep your site flyweight.
While compressing manually, you can get you the best results with tools specially designed for compressing images for the web. Kraken.io, TinyPNG and Smush.it are examples.
Compressing and Optimizing Images before Uploading
You already know, JPG files are lossy and PNGs compression is lossless. Use JPEG format or lossy compression to strip unnecessary data, resulting in a much smaller file. Use PNG format or lossless compression in case where quality is of prime importance, no matter how fat the file size gains.
Compressing Images is actually an iterative Trial and Error process. Keep trying out compressing and compare the image quality until the quality and the image file size both satisfies you. This way you produce the best results – I mean – you produce the smallest possible file size while maintaining the best quality possible.
Compressing and Optimizing Images after Uploading
You can do several things to compress your images after you’ve uploaded them to WordPress. You can choose one of the preset media file sizes before you insert the image into a piece of content like page or post. Select from Full Size, Medium, and Thumbnail.
There are numerous image compression and optimization plugins available that make things easier for you and offer greater flexibility.
WP Smush.it allows for many different types of compression, image format conversion and dumping unused colors from indexed images (PNGs). Upon installing and activating this plugin, it will compress all images you upload automatically, including those already on your site.
EWWW Image Optimizer is also robust at compressing and optimizing your images at the very moment upload them. It works by reducing file size and doesn’t affect image quality. Upon activation, the plugin optimizes old images as well.
Lazy Load is a plugin that aids to load images Just in Time as they’re needed. This reduces load times. However, it doesn’t compress or optimize images. You will know many such plugins. Soon.
Set Image Compression and Optimization on Autopilot in WordPress
Automation is bliss – well, until things go awry.
To automate the image optimization process on WordPress, all you need is either using existing plugins or make one of your own. Plugins in WordPress do all the things that we talked about earlier. There are several solutions for image optimization on autopilot in WordPress.
Compressing and Optimizing Images in WordPress is a great. It bolsters up the WordPress site speed and performance.
APPENDIX I – Articles of the Series on “WordPress Image Compression & Optimization”
Chapter 1: WordPress Image Compression & Optimization
Chapter 2: WordPress Image Compression & Optimization Fundamentals
Chapter 3: Getting Started with WordPress Image Compression & Optimization
Chapter 4: WordPress Image Compression and Optimizer Plugins, Software and Tools
