No one likes a slow-loading website. Long load times aren’t just horrible for the user experience; they can also negatively impact a website’s SEO. For many WordPress sites, long load times are due to unoptimized images. This content, literally, bogs down traffic and potential profits. However, large files aren’t the only reason your UX could tank. You also need to choose the right images for conveying your message.
This guide will explain how to use image optimization tools to modify images for faster load times. Meanwhile, use our Slickplan Content Planning tool to ensure your images stay synced to the rest of your content!
🎬 Learn what Slickplan can do!
We filmed a short video to show you exactly how to use Slickplan
Why You Should Be Optimizing
Before we get to the “how”, we should start with the “why”. Just like any other piece of content on your site, images are a part of your user’s experience (UX for short). That means that as a UX designer, you should be optimizing them!
However, you shouldn’t forget that optimizing, at its core, means ensuring images impact the user experience — positively.
Designers can do this by:
- Using appropriate images.
- Ensuring that images load fast.
- Adjusting images for screen size and platforms.
When you take the time to focus on these things, your WordPress site will not only deliver a better user experience, but it could also significantly improve search results and lower website costs. As you plan your content, stay focused on how your images could influence the user experience and be ready to optimize at will.
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!
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!
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.
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!
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.
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.
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.
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 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 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.
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.
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 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!
Visualize ideas with diagrams
Build intuitive user flows, stronger customer journeys and improve information architecture.
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.
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!
That's one informative blog i will say, quite helpful to WordPress developers.
Awesome... Glad you were able to take away some new tips Adam!