10 Tools to Optimize WordPress Images for a Better User Experience

Optimizing Images For Online Use

If your images are causing your site to load slowly, there are a few ways to fix the problem. You could:

Change the format.
Try a smaller file type. Online images are typically in one of two formats: PNG (.png) or JPEG (.jpg). JPEGs, generally, are photos; whereas PNGs are usually used for web elements, logos, or anything with transparency. PNG files are larger than JPEGs, so sometimes simply changing the format is enough to speed up load times.

Resize your image.
One of the easiest ways to speed things along is to merely make images smaller, via compression, before uploading them to your WordPress site. The ideal image size is under 200KB with a resolution of 72 dpi, which is often doable when saved as a PNG or JPEG.

Use a WordPress Image Compression Plugin.
Many plugins make it easy to optimize your images. A WordPress Image Compression Plugin can not only resize your images but also ensure that your images stay optimized over time.

Lossy vs. Lossless Compression

Many tools offer a choice between lossy or lossless compression. The difference basically comes down to quality. Lossless compression is ideal for preserving the quality of a photo, whereas lossy compression removes some data to make a file smaller, ultimately impacting the final result.

When an image is first created, it begins as a RAW file. Unfortunately, RAW files are huge and not suitable for online use. Therefore, all images are converted into either GIF, JPEG, PNG, or BMP files before they are uploaded. This initial process removes some of the original data, but not so much that most people would notice. JPEG files use a lossy process, while PNG files use a lossless process. However, when you compress further, you risk losing even more data, so it is a good idea to use lossless whenever possible.

10 WP Image Optimization Tools and Plugins

Regardless of the method you choose, you will likely need one of these tools to get it done. Here are 10 of our favorite online image optimization tools and WordPress plugins!

Tools

Online tools are a perfect way to prepare your images for WordPress. Use these tools to compress an entire batch of images or a select few to help increase upload speeds, save space, and optimize your UX!

Compressor.io
If you have a JPEG file that you already know is too large, try Compressor. Compressor also works for PNGs, however, it is incredibly effective with JPEG files. Not only is it free, but it also does both lossy and lossless compression. One main drawback with Compressor is its lack of a bulk upload, meaning you’ll be stuck compressing one image at a time.

Optimizilla
If you are more concerned about PNGs or you need to upload multiple files at once, Optimizilla is a much better option. With as many options as Compressor and a comparable JPEG compression, many would argue that overall, it is the best image optimization tool online!

ImageSmaller
Sometimes you may have a file that is too large for most online compressors. In this case, you should use ImageSmaller. This tool lets you upload up to 50MB. Unfortunately, similar to Compressor, you will have to upload one file at a time.

TinyPNG
As the name suggests, TinyPNG will make your images smaller, but it may not be the best at doing so. The reason TinyPNG is still so popular is its simplicity. It also allows bulk uploads of up to 20 images and has a 5MB upload limit, so it’s perfect for quickly resizing batches of average-sized images.

Kraken
For a better user interface, variety of options, and good results — Kraken is a popular enterprise solution. In addition to image compression, it features a WordPress plugin, cloud storage, and API access. If you need a bit more than the simple (free) online tool, this $5/month (and up) solution might be the perfect fit for you.

Plugins

The easiest way to optimize your images for WordPress is to use a WordPress image compression plugin. These built-for-WordPress options are perfect for resizing images after they’ve been uploaded to the site.

EWWW
EWWW is one of the most popular WordPress image optimizer tools, although it may not be the most attractive. In addition to JPEG and PNG, EWWW will also optimize GIF and PDF files. It also has no size limits and is free!

WP Smush
WP Smush also offers a free version; however, this version will not compress images larger than 1MB and is limited to lossless compression. A small upgrade removes these limits, making this plugin incredibly useful for bulk image optimizations.

Optimole
For overall image optimization with the least amount of effort, Optimole is a wonderful option. In addition to resizing and compression, this app also has mobile optimization features and monitors your images to ensure they remain optimized. Optimole is available in free and paid versions.

Imagify
Boasting plenty of features and a great price, Imagify provides multiple levels of optimization (both lossy and lossless) and an attractive user interface. You can even automate many of its features, saving you precious time. The free version has a 1GB monthly limit.

TinyPNG
TinyPNG is already well-known as an image compression tool, but it is also available as a WordPress plugin! Much like the online tool, the app is fairly basic. However, it is simple to set up and can be used to automate your WordPress image optimization tasks. It also has no file size limits and very competitive pricing.

Don’t Forget… Mobile Optimization

If you are designing for mobile websites, (and frankly, you should be) image optimization is especially important. Why? Because large images cause websites to load slower and very few people have the patience to wait for a website to load on their phone, which leads to poor user experience.

Combine this with the fact that more people access the internet from their phones than a desktop computer and you begin to understand why every website should be concerned about mobile optimization. In fact, Google reports that nearly 60% of users do not return to sites that took too long to load.

In other words, a website that isn’t optimized to load faster will have significantly less traffic than one that does.

Images are Key to Mobile Optimization

Although mobile optimization typically refers to responsive themes, image optimization is an essential aspect of it. If a site takes too long to load due to images, the layout will not matter. You’d also need to focus on speeding up your site.

Here’s how to speed up your mobile site using image optimization:

• Reduce the images before uploading.
• Remove unnecessary images; A/B test to determine which stay.
• Compress remaining site images.

You should also make sure that your images are responsive. However, since you are using WordPress, that’s already handled for you!

Get Lazy With Your Loading

Byron Trzeciak, director of PixelRush tells us that reducing the size of the images on your site can do a great deal for mobile optimization, but sometimes it is not enough. You can also alter how pictures load, in an effort to improve the user experience.

One way to do this is with a plugin designed to delay image loading. The BJ Lazy Load Plugin uses JavaScript to delay loading until the user has scrolled to where the picture should be. That means the site will continue to load without the images, allowing the user a chance to consume, at least some of its content instead of abandoning the site while waiting.

If you are designing a user-focused website, it’s important to consider all aspects of the content — from your choice of words to the size of your image files. It all helps to create the experience!