How to Optimize and Scale Your Images

“What gets measured, gets managed.”

Moving on to the next step, we’re going to take a look at the one thing that, with 20% of your focus, will provide 80% of your performance boosts – I’m talking about image optimization. Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. Thus, optimizing images can often yield some very large byte savings and performance improvements for your website. The fewer bytes a prospective client/customer has to download in their web browser, the faster it can download and display useful content on their screen.

Part 2 – How to Optimize and Scale Your Images

Before we touch on any tools, let’s establish some basic guidelines for using images on websites. The most important points are:

• Image Format – There’s a reason to use .jpeg or .png. If you’re looking to use photos where maximum resolution, clarity, and color are not important, use JPEG. If it requires a transparent background, use PNG.
• Quality Settings – If using high-resolution images, there’s nothing wrong with using “Save for Web” (in Photoshop) or exporting images at 60-70% of quality.
• Scale Images – Whenever possible, scale the size of your images before uploading them. Using code to resize images is not efficient.

Now that we’ve gotten that out of the way, here at Momentum, we have several image optimization plugins for WordPress that we like to employ for our site and our clients.

Imagify is a relative newcomer to the WordPress image optimization plugin game. It was created by the developers of WP Rocket, a well-known caching plugin. Like the other plugins tested, an API key was required to begin using the features. The Imagify interface is relatively straightforward, maybe even a little sparse compared to some of the options offered by their competitors. Depending on your knowledge level this might be good or bad.

Imagify optimizes the popular image formats including JPG, PNG, and GIF. They offer a variety of price points:

• Free Plan– This plan offers lifetime usage upon registration which includes a 2MB Max file size and 25MB/month of optimizations. These limits apply across all websites
• Monthly Plans – With 5 price points there is something for everyone. Lite plans start at $4.99/month for 1GB optimizations and unlimited file size. At the top of the range is the Enterprise plan which costs 69.99/month for 50GB/month. There are annual discounts available as well.
• One Time Plans – These plans are great for one-off projects. Price is set at $5.99, $9.99, and $19.99 for 500MB, 1GB, and 3GB respectively.

ShortPixel

ShortPixel splits the difference between features and simplicity. Their dashboard provides both settings and statistics for your current plan. Optimizable image formats include PNG, JPG, GIF, and PDF.

Features included with ShortPixel:

• Compression – Available compression includes both lossless and lossy and both are available with the free version
• Image Sizes – All thumbnail image sizes can also be compressed but each one counts toward your monthly image limit
• EXIF Data – You can opt to remove all EXIF data but not individual elements
• Resize Images – All uploaded images can be resized to a maximum width or height

ShortPixel offers a variety of pricing options including:

• FREE – One of the best free plans available. You can optimize up to 100 images with lossy or lossless compression and no file size limit.
• Paid Plans – Starting at just $4.99/month for 5000 images (no size limit) with their Short plan and moving up to $29.99/month for 55,000 images on their XXL plan.

WP Smush

Probably the most popular but least effective image optimization plugin.

A few of the most important features include:

• Bulk Smush – You can bulk optimize up to 50 images with a free account and an unlimited number as a pro user
• Images Sizes – Decide which image sizes you want to optimize
• Exif Data – You can opt to preserve EFIF data, however, you can’t select exactly which data to keep as with Kraken.io
• Resize Images – Original images can be resized based on a maximum width or height
• Conversions – PNG images can be converted to JPEG. Images with transparencies are ignored where EWWW will also convert transparencies and enable a user-specified background-color
• Super Smush – This allows you to compress images up to 10x more than the free version with minimal degradation (lossy).

Price points are as follows:

• Free – The free account offers limited functionality that includes lossless compression, 1MB max file size, resizing and EXIF preservation.
• WP Smush Pro – This option is included as part of the WPMU subscription plan at $49/month. You’ll be able to smush images up to 32MB in size across unlimited websites.