Increase your website’s SEO ranking, number of visitors and ultimately your sales by optimising any image or PDF document on your website. ShortPixel is an easy to use, lightweight, install-and-forget-about-it image optimization plugin that can compress all your past images and PDF documents with a single click. New images are automatically resized/rescaled and optimized on the fly, in the background. The goal of this ShortPixel Settings Guide is to get you up and running with the optimal settings for image optimization, as quickly as possible.
Why is it Important to Optimize Images?
It’s more important than scripts and fonts. And ironically, a good image optimization workflow is one of the easiest things to implement, yet most bloggers completely overlook it.
Why ShortPixel is better than Smush, Imagify, Ewww, Optimole, and more
ShortPixel consistently has better image compression rates along with more features, backup support and has very affordable one-time or monthly credit plans.
ShortPixel is my tool of choice, simply because it’s pretty much automated – I just let it do its thing every time I add new images to posts or pages, automatically, without me having to do anything.
ShortPixel has built-in support for next-gen image formats like WebP.
What is WebP? Why does it matter?
WebP is an image format created by Google, and it takes your JPG images and squishes them at least another 25%, sometimes up to 50% more. WebP isn’t supported by all browsers yet – but, it’s the preferred image format for Chrome, the most popular browser in the world.
Also, serving images by WebP will help your PageSpeed Insights metrics, as well as on GTmetrix and others.
Get the best of both worlds and use ShortPixel image Optimization plugin. It creates WebP images alongside your compressed images.
Then it serves the WebP images to those browsers that support it. The main one being Chrome. So have your cake and eat it too!
Google holds a lot of power over the success of our blogs, best to follow their recommendations and serve your images via WebP.
How to Set Up ShortPixel Image Optimizer Plugin
**Note If you have any other Image Optimization / Compression plugin installed, go to Plugins, find their name and click the Deactivate link and then Delete. Having multiple installed will create a conflict.
ShortPixel is free to download from the WordPress.org plugin directory. From your WordPress Admin Dashboard, click on ‘Plugins‘, then “Add New“. In the Keyword Search Box, type in ShortPixel Image Optimizer. Click on the ‘Install Now‘ button, then click the ‘Activate‘ button. You’re now ready to set up the plugin.
Sign-Up for your ShortPixel API code
- Sign-up for your ShortPixel API code >>
- Next, you’ll be displayed your actual ShortPixel API code. Go ahead and copy this and keep it in a Google Drive doc with all your other website info, start one if you don’t have one, where it’ll remain safe even if your computer crashes. Keep it handy, we’ll need to access it soon.
- Click on the ‘Login to Your Account‘ button to continue.
Purchase a One-Time ShortPixel Image Credit Pack
- Click on ‘Pricing‘ and then ‘ShortPixel Image Optimizer‘ in the dropdown menu.
- Purchase an Image Credit Pack to get your blog started optimizing images. You do get 100 image credits per month free. That’s fine for each month going forward, but you’ll need thousands of credits to get your blog optimized the very first time. WordPress makes 5 to 7 image thumbnails for every photo you upload.
I recommend the 30K or 50K credit packs, you’ll burn through the 10K fairly quickly, especially if you’ve already had your blog for a while.
- Click on the BUY button for your chosen size.
- Complete the Checkout for the image credit pack. Then return to your WordPress Admin area.
Configure ShortPixel General Settings
- Return to the WordPress admin area.
- After activating the plugin, you were taken to the ShortPixel Plugin Settings configuration screen.
- Retrieve the ShortPixel API Key you put aside previously. Paste it into the API Key form field.
General Settings & When/Why to use them
Compression Type: Glossy – compresses but doesn’t make images blurry
I have found Glossy to perform the best for speed and quality. If you change the Compression type to the more aggressive Lossy type, your images will become blurry and need to be replaced.
Also include thumbnails: Check the box. The bulk of your image credits will be spent on optimizing thumbnails, that’s a good thing. These 5-7 different-sized image-thumbnails created by WordPress will be delivered to your site visitor depending on the device that they use.
Image backup: Check the box. I only leave this on for a short time. Long enough for me to evaluate if the ‘Glossy‘ version of the images that I’ve made will look good on my blog and not too low quality and blurry.
Remove EXIF: Check the box. This setting strips away unnecessary image data that is only relevant to photographers and news columns.
Resize large images: If you know specifically you have a bunch of old super huge images, this can save you a lot of time. If you don’t, then you’re better off manually resizing them prioritizing your top Traffic posts first.
Click on the blue button ‘Save Changes‘ in the lower left bottom of the screen.
Configure ShortPixel Advanced Settings
Advanced Settings & When/Why to use them
Additional Media Folders: If you had a separate folder on your server with images that’s outside of the WordPress file system, then you’d use this. 99.9% Don’t.
Convert PNG images to JPG: Since we now are being mindful of our image formats and that we should be using JPG rather than PNG, except when we need transparency or the image is super detailed text-heavy, we don’t need to check this as our PNG use now is purposeful, we don’t want to transform them to JPG.
CMYK to RGB conversion: Ok to check. Will slightly adjust the picture colors to the format that websites and phones use. Must-have if you use stock photos.
Next Generation Images: *Solves the GTmetrix and PageSpeed Insights warning about using next-gen images. WebP is the preferred image format of Chrome.
- Check the box ‘Also create WebP versions of the images…‘
- Check ‘Deliver the next-gen versions in the front-end‘
- Click ‘Using the <PICTURE> tag syntax
- Click ‘Online via WordPress hooks‘
*Note: AVIF images are too new to be adopted by bloggers right now, patience, will update when a fair amount of popular browsers support it. Also, don’t use the .htaccess method for serving WebP’s. Unless you’re a developer, you have no business tweaking your .htaccess, there’ severe ramifications. Plus serving the WebP images through WordPress Hooks & the Picture tag is compatible with more themes.
Optimize Retina Images: Only check if you’re using a plugin to create separate very large Retina images.
Optimize other Thumbs: Good to check to capture some hidden theme & plugin thumbnails.
Optimize PDFs: If you upload or share any PDFs for download through your site, this is a must-enable setting.
Exclude Patterns, HTTP Auth Credentials: Skip over. Not applicable to blog sites.
Optimize Media on Upload: Check to enable the Automatic processing of your images as you upload them to WordPress. Basically, Set-it and Forget-it.
Process in Front-End: If you have forms that allow visitors to upload their own images, or allow images to be uploaded into your post comments, check this. Otherwise, skip over.
Exclude Thumbnail sizes: Most of the time I don’t check anything here to exclude. But, if you know for sure that you Never upload images that are 1500px or larger, than you can check the last two to disable. If you run Woocommerce, or certain plugins, you’ll see more image sizes here too. Best to not exclude any thumbnail sizes and just optimize all of them if in doubt. Always err on the side of optimization.
Click on the blue button ‘Save & Go To Bulk Process‘ in the bottom left.
Bulk Process Optimization Dashboard
Important to mention here, DO NOT close this window while it’s optimizing the images. If you have to step away, be sure to click on the Pause button first. Then when you come back, you’ll see a Resume button.
If you have a lot of images to optimize at once, this could literally take hours to complete. But it’ll be totally worth it!
Configure ShortPixel Cloudflare API Settings
After you’ve finished your Bulk Optimization of your images, time to go back to the ShortPixel Plugin settings area and click on the Cloudflare API tab to integrate your Cloudflare account with ShortPixel.
Why? Doing so will then purge that image from Cloudflare’s cache any time it is updated and then the new version will be cached instead.
Jump over to the Cloudflare Settings Guide to set this up >>
Want to know how well your images are compressing? How many credits you have left in your monthly allowance? Or how many one-time credits you have left? Those answers and more found here.
How to Get Unlimited FREE images/month* If you run multiple blogs or have friends that don’t use ShortPixel yet, refer them to use ShortPixel and you’ll be rewarded with 100 Free Image Credits / month for each referral. This adds up fast!
Click on the ‘Join Our Friend Referral System‘ from the Statistics page to be taken directly to your ShortPixel account dashboard where you’ll find your referral link.
ShortPixel Troubleshooting Image Quality
How to Fine-Tune the Image Optimization of a Photo
Have a few images that look a little blurry? Want to just revert those specific images and keep the rest? You can fine-tune the optimization level for each image as needed.
- Go to the Media Library and select the list view, click on the blue list icon underneath the Media Library title.
- Find the image you want to change the Image Compression level on.
- Look to the far right side of the image name for the three-bar menu box.
- Click on the menu box for the ShortPixel menu. You have the following options, or similar too, based on the initial optimization level. I have Glossy.
- Compare: Compares the Optimized version with the Original version.
- Re-optimize lossless: Re-optimizes the Original image in the Lossless setting instead of Glossy. (Makes it less Blurry!)
- Re-optimize lossy: Re-optimizes the Original image in the Lossy setting instead of Glossy. (Makes it more Blurry!)
- Restore backup: Restores the Original image from the backup.
Extremely Large Images Can Hang During the Optimization process
If you’re regularly seeing this, that means you need to manually resize your images following our Image Optimization Guide, and then re-upload them to use in WordPress. ShortPixel is amazing but it isn’t a miracle-cure for Huge images that weren’t sized appropriately to begin with.