There are many benefits to ensuring your site is as fast as it can be. Image Optimization is just 1 part of that but often a part that is overlooked. Most people will tell you that you should use Caching plugins for WordPress, or CDN networks like Fastly or Cloudflare to ensure your website is fast. They are not wrong, but there is more to speed than just caching.
In practical terms making your site faster often means understanding your site and web host capabilities and performance. Fast sites keep visitors happy and Search Engines like Google happy. Fast sites translate to better SEO, better search rankings, and more traffic. Of course, you need great content too. Speed was “a nice to have” a few years ago, but Google is officially using Core Web Vitals as a ranking factor now. So speed is vital.
Regarding Site Speed, of course, the basics are always the same
- Fast Web Host
- Only a few Plugins
- Fast Theme
- Caching and or CDN
Core web technologies like HTTP/2, QUIC, Brotli, etc. will get you 80% of the way to a fast site. Image optimization will get you past that.
Keep in mind that when you visit a website, you really don’t just view it, you download its content. So if you have an image-rich blog or business site, like an e-commerce store image optimization is key.
What is image optimization and why do I need it?
Firstly Image Optimization is the compression of image files, this can sometimes be done simply by changing the file size (Megabytes and Resolution). If you take a picture with a decent camera you could have a 12 MegaPixel image or bigger. 12MP is 4000 pixels x 3000 pixels, by contrast, your laptop or computer resolution is probably 1920 x 1080, Mac users often have a higher resolution like 2880 × 1800. Then of course there are 4K and above. But I digress….
Anyway back to the point, a 12MP image file size is around 3.6 MegaBytes. So if you have just 4 images on your site that is about 17MB of data that someone has to load just to see the pictures, the rest of your web content may only be 900kb. Now some themes may display a smaller more manageable version of that file, by simply changing the viewable resolution, but it’s still going to be a big file.
These are some ways of improving your site load time by making changes to your images.
1. Have multiple sizes of each image, Someone browsing your site with a smartphone can be served a smaller image than someone with a 4K monitor.
2. Use optimal image formats, convert PNG files to JPG, AVIF, or WebP.
3. You can also optimize GIF’s including animated GIFs and optimize PDF documents. Perfect if you host PDF manuals or informational books.
4. Downscale your images so that they have a smaller file size, but be careful, you don’t want to lose too much image quality.
5. Do this for every image on your site. it might take a very long time but it’s worth it, right?
6. There is a better way of doing all of the above and more, and it’s Free? Well, kind of free.
This is where ShortPixel comes in.
Firstly the ShortPixel WordPress plugin is easy to use. It’s also feature-rich. The software supports JPG, PNG, GIF, PDF, WebP, and AVIF. WebP and AVIF are quite new and not all browsers support these formats, but with ShortPixel it will serve the image best suited to the browser. It also automatically creates multiple image sizes, allowing you to automatically serve the image that is best suited to the device that is browsing the site. You can also set if you want your images to be Lossless, Glossy, or Lossy.
Lossless | Glossy | Lossy |
Lossless optimized images are pixel-by-pixel identical with the originals, but they offer a smaller size reduction compared to either Lossy or Glossy processed files. If you want your images to remain untouched, then select this option. | Glossy is the best choice if you still care about Google Insights but you believe that a slight loss of page speed is an acceptable compromise for top-notch image quality. | Lossy is the best option for most users. The images processed with Lossy algorithms are the smallest optimized images you can get. So, if the speed of your site is paramount and you want the best balance between optimization and picture quality, we recommend you continue to use Lossy optimization. |
A sample of 3 Images below and the savings.
How to use ShortPixel in WordPress
As with most WordPress plugins that use the cloud, the basic workflow looks like this:
- Upload your image to your site’s WordPress Media Library, as normal you always have.
- The ShortPixel WordPress plugin will then send your images to their cloud servers (this will happen automatically when you upload an image, or you use the bulk optimization option perfect for images you already have in your Media Library).
- Based on the settings you’ve chosen in the plugin’s settings, ShortPixels cloud service does the heavy lifting. Not your web host. This is important as it has no impact on your site performace while the images are being optimized
- Once done the plugin puts your image back into your site’s WordPress Media Library. Replacing the existing unoptimized version that’s there. This is non-destructive though, as you can always revert to your original image.
The advantage of doing this image crunching on their servers is that firstly, you don’t need to install special utilities on your server. If you are hosting on a shared server platform, many web hosts wouldn’t let you do that anyway. Secondly, it doesn’t consume any resources like CPU and RAM on your server. It also means that you don’t have to do any of this manually using Photo Editing software.
The only negative is that you can’t control the exact level of optimization and compression, but from a time-saving perspective that’s a good thing. Before you start rolling this out to all the images on your site, you can test 3 or 4 existing images and see which settings work best for you.
As the original image is never removed you can process the image, then revert to the original. This is fantastic if you want to see the difference between Lossy and Glossy for instance.
As seen in the image on the left, in our testing we reduced image sizes as much as 21% from the original to the Lossless version. The plugin also automatically creates 8 thumbnails.
It’s also possible to reprocess any image in your Media Library from Lossless to Glossy, to Lossy. This is priceless for testing.
In the WordPress Settings area of ShortPixel, there are a number of options available:
Compression Type – Lossy, Glossy, Lossless
Image Backup – Important if you want to keep the original.
Remove EXIF – This reduces a little image space. It can also add to your privacy, as it will not give image data like GPS location. It may be useful to disable this if you are a photographer though. EXIF includes image data like Camera, ISO, etc.
There are many additional options under the Advances Tab.
Convert PNG images. Automatic conversion of PNG files to JPG when possible, i.e. so that it doesn’t impact transparent PNG’s.
CMYK to RGB conversion. CMYK is for print, Web used RGB, by converting a CMYK image the file size can be reduced.
Next Generation Images. This is for WebP and AVIF. WebP images can be up to three times smaller than PNGs and 25% smaller than JPGs. AVIF can be 50% smaller than WebP. Crazy I know.
Optimize PDFs, Exactly what it says,
Optimize media on upload. You can disable this option if you only want to optimize some images and save credits.
Although I focused on the uses, features, and benefits of ShortPixel for WordPress. You can use ShortPixel with other CMSs and websites.
The ShortPixel Website Optimizer does offer an easy-to-use web interface to their API, it is available to any PHP website (Magento, Joomla, Drupal, custom brew, etc) and allows the optimization of the site’s image folders.
Lastly, you can also use the API, although it will involve some coding on your part, or your developer’s part to make use of the ShortPixel Developer API.
Ok, So how much does it cost?
The Short Pixel WordPress plugin is free. The plugin won’t do anything by itself though, not without connecting it to the ShortPixel cloud service.
The service also starts Free, just sign up to ShortPixel for FREE and get 100 Images optimized per month for FREE. It’s that easy.
There is a free plan for the cloud service, but it’s limited to only 100 images a month. That may not be enough for you to start with, or it could be the perfect git if you are just starting out.
If you need to process more than 100 images a month, you’ll need to buy credits. You can either buy credits through a Monthly Subscription or with a One-Time purchase of a credit bundle.
It’s important to keep in mind that images processed apply not just to the image you upload, but also to all of the derivative versions, or scaled versions that WordPress creates for thumbnails, etc. ShortPixel does however include the option not to include these derivative thumbnail versions in the processing. However, by not processing them, you are excluding the images that WordPress is most likely showing on the web. So to really get the most benefit from the optimization, you want to include the derivative thumbnails.
You can also use ShortPixel on multiple sites with a shared API key and Credit Pool. Check their documentation for details.
Unless you are constantly uploading hundreds of pictures per month, I would suggest the One-Time bundles. They never expire. We have literally processed thousands of images in our testing and have not exhausted the 30000 image bundle that we bought 2 months ago. If this is for a site that adds 50 to 100 images per month, it is quite possible that $19.99 will cover you for a year or more. That is a great deal. ShortPixel’s One Time pricing can be seen here.
Are you a photographer and upload thousands of images a month? Or do you run an image intense site like a photo-sharing site? Then the monthly subscription is for you. The monthly plans start at $4.99 for processing 7,000 images per month. If you would like to save a little more you can be billed annually. With ShortPixel it is really easy and affordable to grow as you need. From 100 Free image optimizations per month to a crazy 16 million image optimizations per month. ShortPixel’s full monthly pricing can be seen here
But wait, there is more! Image delivery via CDN, including a Free Tier!
So not only does ShortPixel reduce load times by compressing and resizing images automatically, but it also converts images to new formats for the browsers that support them, saving even more bandwidth and speeding up content delivery. They also offer you 500MB of free CDN traffic. The ShortPixel Adaptive Image Plugin for WordPress deserves its own article.
ShortPixel Adaptive Images replaces all your website’s pics with properly sized, smartly-cropped, optimized images and offloads them onto ShortPixel’s global CDN. Their CDN also caches and serves CSS, JS and fonts. If you are using an exiting CDN it may be best to test them side by side to see if which gives the better performance. Also using 2 CDNs may not increase your performance. So if you already use Cloudflare or Fastly etc. you may have to make some changes or choices on which CDN works better for you. We have added the Pricing below so that you can see what the costs are.
ShortPixel vs Kraken.io and Optimus
Shortpixel isn’t the only game in town when it comes to optimizing images in WordPress. Two other options that have similar features are cloud-based and have similar costs and pricing models are Optimus and Kraken.io.
All three offer lossless and lossy optimization options. They all have batch automation and have WordPress plugins that handle the optimization in the background. They are all very easy to use too. Even the output file sizes and quality are similar from a compression ratio perspective.
But there are some important differences.
ShortPixel’s pricing model is based on a number of images processed and can be a once-off bundle.
Optimus’s pricing structure is a flat-rate price for an annual license, you can process an unlimited number of images. For $29 per year you get unlimited images processed but a maximum file size of 10MB.
Kraken.io is based on the amount of data processed. As an example, $9 per month gets you 2GB of pictures processed.
All of them have a Free plan.
ShortPixel gives you Full Functionality and 100 Images per month.
Optimus.io has some limitations, only 100kb images, and no WebP support.
Kraken.io Offers 100MB of image processing.
But Optimus and Kraken.io don’t process GIFs or PDFs, whereas ShortPixel does. And Optimus has a maximum file size of 5MB per image, and Kraken.io has a maximum file size of 16MB, whereas ShortPixel has no file size limit.
One downside of Kraken.io is that it doesn’t have the option to leave the originally uploaded image untouched. Both ShortPixel and Optimus have that option.
All three services perform well. Ultimately it will come down to your personal preference, costs for features, and each one’s ease of use. Personally, ShortPixel makes more sense, with Kraken coming in a close second.