WordPress Image Optimization – things you need to know

Long gone are days when websites consisted mostly of blocks of text with only a few simple images placed here and there. As average broadband speed increases every year, so does the amount of data-heavy media content on the web. This is why image optimization has become so important nowadays – too many large media files will always negatively affect loading speed and potentially drive the users away from your website.
We want to focus specifically on WordPress image optimization in the following article. WordPress remains the most popular site builder in the world and provides its users with dedicated tools for optimizing images. Read on to find out more.

What is WordPress image optimization?

In short, it is a process of ensuring the images visible on the website are of the highest possible quality and the smallest possible size. The main goal of image optimization is to reduce loading times and make sure the uploaded images are a perfect fit for their purpose.

There are several ways to optimize images in WordPress and we will discuss them in detail shortly. But first, it is always a clever idea to check if your website needs WordPress image optimization at all. With tools like Google’s PageSpeed Insights, you can diagnose the responsiveness of your website and pinpoint its main drawbacks, also in the image optimization department. The PageSpeed Insights’ measures are based on the Core Web Vitals and provide detailed recommendations for increasing website performance. Similar information can be as well obtained with tools like GTMetrix and Pingdom.

How to optimize images for WordPress?

The answer is – as quickly as possible. Most of the WordPress image optimization activities should take place before images are uploaded to a live website. We know it is not always possible though. But with plenty of tools available at your disposal, it is never too late to patch image optimization issues and cut those loading times.

Choose the right image file format

Currently, out of tens of image formats, five are commonly used for website images across the Internet. Each has its own characteristic and should be used accordingly:

• JPEG – by far the most popular photographic format on the web; capable of displaying millions of colors at once, used mainly for photos and multicolored graphics. JPEG is a lossy file format, which means the image details decrease when the file is compressed. Setting the compression level to 70% ensures the optimal balance between the image quality and the size of the file.
• PNG – a lossless format; images saved as PNG are usually bigger but, unlike JPEG, retain all the details on the compression. PNGs are best used for simple graphics, logos, screenshots, and transparent images.
• GIF – a lossless format supporting only 256 colors. Not suited for photographic or detailed images but remains a most popular choice for animated banners, ads, and icons.
• SVG – a lossless, vector image format; it is scalable, and does not lose the quality even when zoomed. A viable choice for 2D charts, icons, and infographics. By default, SVG is not supported by WordPress, though it can be enabled with the dedicated plugin.
• WebP – a relatively new image format introduced by Google. It supports both lossless and lossy compression. WebP offers a much better compression rate than JPEGs and produces files smaller by 26% compared to PNG while keeping the same level of detail and transparency. Despite its clear technical edge, it is not considered an obvious choice as of yet. Only 4.3% of all the websites use WebP, and the format is not supported by older versions of popular browsers.

Choosing the right format should always be your first step towards efficient WordPress image optimization. There is no such thing as a format perfect for everything, it is better to just mix and match. For photo galleries, you may want to use JPEGs; animated banners and icons are a natural habitat for GIFs, while everything else would look best if displayed as PNG. If your website contains a lot of infographics and charts, you should also consider SVG, and for those who strive for maximum efficiency, there is WebP with its impressive compression rates. Mind that though some users will not be able to view the WebP images at all due to browser compatibility issues.

Resize and crop your images

A smaller image size always means a smaller file size, regardless of the format. Pictures imported directly from the camera are good for printing on paper but, as such, are much too big for websites. A typical full-width image that covers your whole desktop screen from left to right would have no more than 2400×1600 pixels. A camera on your mobile phone is able to produce a photo at least 4 times bigger. A single image of this size would take ages to load. Resizing an image to fit the dimensions required on a website can reduce the size of a JPEG file by as much as 95%.

Cropping an image is also a practical option often used for WordPress image optimization. If you want to present a single detail to your audience, there is no need to upload the full image if the rest of its content is irrelevant.

You know
that you can change your business.

Let's start now

contact us

Compress images

Once you are done with resizing and cropping, you can further decrease the size of your image files by compressing them. Practically all photo editing apps give you an option to set the level of compression for saved images. The compression can be lossless or lossy – the former keeps all the details intact, while the latter allows for a more significant file size reduction. With lossy compression, it is better not to go under 60 – 70% of the original quality, as below that threshold the loss of details usually becomes noticeable. Mind that though some apps have better compression algorithms than others, and with some, you can get impressive results even with a 50% compression rate.
We will cover the programs and plugins recommended for WordPress image optimization in the final paragraph of this article.

Use lazy loading of images

Up until this point, we have discussed the WordPress image optimization techniques that can be applied before the files are uploaded to your dashboard. Lazy loading allows you to directly optimize the way images are presented on your website to the guests. The premise is straightforward – with lazy loading enabled, the website prioritizes the images visible at the top of the page. These are loaded first, while the ones placed further down the site get loaded only when the user scrolls down to them. With properly resized and compressed image files, lazy loading can significantly boost the loading speed of your website, thus making it an essential WordPress image optimization method.

Use Content Delivery Network (CDN)

With CDN you get to store your images (as well as other static files, e.g., JavaScript or CSS) on a number of servers across the world. The users visiting your website are served directly from a data center that is geographically closest to them, which means the data travels shorter distances and the assets are delivered much faster to the browser. Some CDN providers also offer on-the-fly image compression and on-the-fly image resizing. The latter option even allows for using different image sizes depending on the device type (mobile or desktop) used by the visitor.

WordPress image optimization – recommended software and plugins

As we mentioned before, a large part of the image optimization process can be performed before the images are uploaded to the server. Using the external image editing software (paid or free) can be useful, especially for perfectionists, who like to review and fine-tune each image manually. For simple resizing and compression tasks, any image viewer will do just fine, but for better effects, you may want to consider using:

• Adobe Photoshop – a real powerhouse of commercial image editing software, the app offers a great compression quality and a convenient way for saving images automatically optimized for web purposes. Steep pricing of Photoshop will deter the majority of users interested only in basic features, but for graphic designers and other professionals, there is no better choice than Adobe’s flagship.
• GIMP – an open-source software, considered a free alternative to commercially acclaimed Photoshop. It is slightly less user-friendly but offers plenty of image editing options and very efficient compression.
• JPEG Mini – a commercial desktop application with a free website version; it offers extremely effective lossless compression and allows users to compare the quality of original and compressed images on-the-fly.
• TinyPNG – a web-based app, great for casual users. You can compress up to 20 images in one go for free, a paid PRO version removes this limitation. TinyPNG offers additional integration with Photoshop and a simple drag & drop interface.

A comprehensive WordPress image optimization can be also achieved with the help of dedicated plugins. There is a major advantage here – plugins allow WordPress users to automate the image optimization process and save a lot of time when compared to manual image editing. The downside is that every other plugin eats up precious space on your WP server and the compression efficiency is not always on par with external software:

• Smush – a complete tool for WordPress image optimization, Smush allows for image resizing and compression, it also comes with a lazy loading feature and an incorrect image size detection. Its paid version (Pro) adds support for WebP image format.
• ShortPixel Image Optimizer – another massively popular plugin, with similar functionality to Smush. It boasts its own “glossy” JPEG compression algorithm designed for photographers. The plugin will not cost you anything if you plan to optimize less than 100 images a month.
• Optimole – slightly less popular than the previous two, but almost unanimously rated with 5 stars by the users. Its optimization is cloud-based, the plugin supports lazy loading and WebP format with no additional charge. A free version is fully functional, and you can use it if your website gets up to 5000 visitors a month.

Conclusion

Image optimization can make a world of difference when it comes to speeding up your WordPress website. Very often images are the main culprit responsible for slow loading times. And nobody likes slow websites – neither visitors nor Google. Search engines promote fast-loading sites, and unoptimized images may negatively affect your SERP ranking, increase bounce rates and drag down your conversion rates.