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 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:
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.
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 a 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 system.
Use lazy loading feature
Although you’ll find many “lazy load images” plugins in the WordPress plugin repository, I would recommend you to use the 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 will be built-in the WordPress content management system’s future releases. Till then, you can use Jetpack.
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 server static assets of your site from its server. Jetpack also offers free CDN service for photos. Jetpack, unlike Cloudflare, will change the image URL. If you don’t want to enable 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.
Conclusion: As images can reduce the page speed, you should compress images before embedding them in web pages. You can also serve images with a CDN or use a lazy loading plugin.