How to improve the quality of images in WordPress

Images can highly reduce readership, especially if they are not used properly and if their quality is not up to par. That’s a fact, and there are dozens of articles written on this particular topic. The truth is that people skip websites that display images with low quality or that aren’t aligned to a bigger content strategy. Even the image placement can make visitors stop reading your content.

However, there are some cases in which the image quality has to be great to send a clear message and attract the right kind of attention. Maybe you’re showcasing your business, or your recipe, or your photography session. These images need to stand out and be a good mix of quality and size.

Before diving into the nitty-gritty, let’s establish some ground rules when it comes to images:

Employ a JPEG-first attitude: when transparency is not necessary, always go with a JPEG file with a decent compression ratio of 7 or 8. The scale is from 1 to 10, 1 being the highest compression, and ten the least amount. If you need transparency, then go for PNG;
Use images with a maximum dimension of 2000 x 3000 pixels but always strive for lower than that. Sure, 4000 x 5000px images are looking great, but that size is suited for print and not for the web;
Choose the smallest image size: when you insert an image in WordPress, you have the option of choosing its size. These sizes are the original uploaded size (Full) or one of WordPress’ thumbnail sizes (e.g., Large, Medium, Small). We recommend to go with the smallest one that fits that particular page or post, but almost never with Full.

You should also dive deeper to understand what happens with your images once they are uploaded to your WordPress website. You will understand how images are processed once they are uploaded, the differences between different image formats (.png, .jpeg, etc.), and how browsers serve images to your visitors.

Now, if the images you uploaded to WordPress are blurry, there are some common causes:

You uploaded a blurry image — it happens to all of us. It might’ve been an image that appeared nice on your mobile device, but it lost its beauty on desktop screens.
WordPress resized the image — most of the time, your images are resized to improve performance, decreasing their quality. That’s because WordPress offers responsive images, which means that it automatically creates several sizes of each image uploaded to the media library to ensure performance for all devices.

To solve these issues, we suggest to try out the solutions below:

Increase WordPress’ default JPEG image compression limit. By default, WordPress compresses your images at about 82% quality to improve site performance for mobile users. If that causes your problems, you can disable image compression or lower it a bit more.
Resize the default thumbnail size and regenerate them using a plugin like Regenerate Thumbnails or Simple Image Sizes. Most of the time, this issue shows up when you switch from one WordPress theme to another. Usually, new images uploaded after activating your new theme look good, but all the old thumbnails are ugly and distorted. The two mentioned plugins should do the trick.
Alter the sharpness of resized images with the help of a plugin.
Use the RGB (screen) color space, regardless of the file format. The CMYK color space is only used in print media. This plugin automatically converts your images to JPEG and RGB.

Of course, there’s always a delicate balance between image quality and website speed. Images are the most resource-demanding type of content you could publish online, and the top reason for slow websites. Fortunately, with a bit of care and attention to each uploaded image, you can continue to use images and keep a speedy website.

Additional readings:

Want to learn more about image optimization?

Download our free ebook on WordPress website performance and benefit from our almost 9 years of experience in creating WordPress products.

Download the free ebook

Updated on August 30, 2021