How to optimize WordPress images?

One of the reasons why website speed testing tools report slow loading pages is pictures. If you remove the pictures from a page and check its speed, the page that was loading slow will be fast. A blog post is incomplete without photos. You can’t remove images from a site but you can optimize them so that they don’t impact the loading speed of a web page or are transferred to the client’s device quicker. Here are the tips you can follow to optimize the images for your WordPress site:

WordPress image optimization tips

Don’t upload large pictures

Images captured with the camera of a smartphone can be of a few megabytes size. If you upload these photos and embed them in the blog post, the size of the page will increase considerably. The only way you can avoid this issue is by checking the size of a picture before embedding it in the blog post. If you want to use a large size picture, you can reduce its quality or dimensions to make it smaller.

Avoid image compression plugins

Plugins that compress pictures run a third-party image optimization tool in the background. The tools can be ImageMagick, Mozjpeg, etc. These command-line utilities may cause a spike in CPU usage when you run them. As several websites share the same CPU and memory, other sites may be affected by the sudden spike. This is the reason why many shared hosting companies don’t allow users to use an image compression WordPress plugin. Even if you use such a plugin and use it, the hosting company might send you a warning email. Instead of using a plugin, you can compress images offline on your PC with free software called GIMP.

Use GIMP to compress images instead of plugins

GIMP is a free photo-editing application. Although it is free, I find GIMP similar to Photoshop. I’ve been using GIMP to reduce the size of images since 2014. GIMP can not only rescale pictures but can also compress them.

To scale a picture, click on the “Image” menu and select the “Scale Image” option. Now, specify the new dimensions and click the “Scale” button. Once GIMP scales the picture, you can export the file to a format of your choice (File Menu>>Export As). If the photo dimension is already below 1368 x 768 pixels (average screen resolution), you can try reducing its quality while exporting the photo. The quality of the exported photo won’t be lost if the compression level isn’t very high. GIMP is available for Windows as well as Linux operating systems.

Use lazy loading feature

Although you’ll find many “lazy load images” plugins in the WordPress plugin repository, I would recommend you to use Jetpack’s lazy loading feature. Once you install Jetpack, all you’ve to do is activate the plugin, link the plugin with your WordPress account, and enable the Lazy Loading module. When lazy loading is active, only the picture that is in the viewport will load. Other photos of the blog will be called and displayed only when the website visitor scrolls down a page. The lazy loading feature has been built into the WordPress content management system’s latest version. If you’re using an older version of WordPress and you have a strong reason to not upgrade the WordPress core, you can use Jetpack. If the theme or plugins you’re using are compatible with the latest edition of WP, upgrade the WP CMS. When you do so, WordPress will automatically load all pictures on the website lazily.

Also see: How to choose a blog name?

Use Cloudflare/WordPress CDN

CDNs speed up the delivery of static files i.e. JS/CSS files, images, etc. Cloudflare, the free CDN service can serve static assets of your site from its server. Jetpack also offers a free CDN service for photos. Jetpack, unlike Cloudflare, will change the image URL. If you don’t want to enable the lazy load feature or use GIMP, you can use the WordPress Jetpack CDN or Cloudflare.

Make the browser cache images

Web servers can send a header called “Expiry header” that instructs the browser to store the pictures of a website on the client’s computer/laptop for a specific duration. The browsers may not set an expiry time for images by default. You’ll have to set this manually by editing the webserver configuration file e.g. Apache, Nginx. When you set an expiration time for the images, the browser will load the picture from the storage memory of the client’s computer instead of requesting the image from the server. The caching of images not only improves the loading time of pages but also saves bandwidth.

Final thoughts: As images can reduce page speed, you should compress them before embedding them on web pages. You can also serve images with a CDN or use a lazy loading plugin.