WordPress image optimization makes for quicker, more powerful websites

Getting the most out of your WordPress site can take some work. You want a site that looks great, loads quickly, and provides a good user experience for visitors. Unfortunately, WordPress sites often struggle with optimizing images, which can cause significant delays in load time and produce sub-optimal experiences for users on mobile devices. With a little effort, you can create responsive images and drastically improve your site’s performance, both for users and search engines.

WordPress and images

WordPress is well understood to be the most prolific platform on the web. Much of its success is due to its simplicity and gigantic ecosystem of plugin developers, but especially the ability for site owners to manage their own site. With the right plugins and a few clicks, it is possible for even non-developers to create beautiful and complex websites.

However, the ability to self-manage a website comes with a price. To serve everybody's needs, WordPress has to offer generic solutions that may not be well suited for all cases. A good example is how standard WordPress templates and plugins manage images. Unfortunately, most themes and plugins do not optimize the images to appear on the screen. In most cases, they use high-resolution and largest-possible images to provide the best image quality. Image quality is critically important, but not every screen needs high-resolution images. If your customers are using your site on their phones with lower bandwidth, the best picture quality isn’t going to make up for the frustration they experience when the page takes forever to load. Optimizing the images on your WordPress site is strongly recommended if you care about the performance and usability of your website. 

Performance tests show significant improvement following image optimization

We recently saw evidence of this firsthand. A client complained about their WordPress site performance. Even after implementing some website improvements, some pages were much too slow, especially the homepage. We identified that one of the problems was the high-resolution images inserted on some banners and cards -- an area where high resolution was not needed nor desired. All the infrastructure optimization done was not enough to overcome the problems caused by using images that are too big. For larger sites, going in and resizing images across the full site would be an onerous task. Image optimization at the template level was a more efficient solution and would ensure that the issue wasn’t a recurring one as future content was added to the site. Consider the numbers below:

Web page performance test | 4G speed connection

Reducing the size of the images on the homepage reduced 80% the largest contentful paint time. Moreover, the document's complete size was reduced to 30% of its original size. This is compelling evidence of how implementing image optimization helped our client maintain a fast and powerful WordPress website.

How to optimize images on WordPress

First, you need to determine the image sizes you will need on your website. Having some default and common sizes that can be reused on several pages will help.

Then, you can create image sizes on WordPress. Use the add_image_size function to create them. In functions.php, add your new image sizes:

// add SliderItem image size
add_image_size( 'slider-item-size-xs', 280, 280, true );
add_image_size( 'slider-item-size-md', 600, 390, true );
add_image_size( 'slider-item-size-lg', 920, 540, true );

With the new image sizes in place, whenever you upload a new image, WordPress will resize it to the dimensions specified in the image size configuration.

Fetch the image size on your templates with wp_get_attachment_image_src.

You can also use a <picture> HTML tag to load the proper images on each screen size, which is an important consideration. Accounting for responsiveness on different mobile devices will help ensure that your customers are getting the same quality experience no matter how they access your site.

<?php
// fetch the image sizes
$imgXS = wp_get_attachment_image_src($attachment_id, 'slider-item-size-xs');
$imgMD = wp_get_attachment_image_src($attachment_id, 'slider-item-size-md');
$imgLG = wp_get_attachment_image_src($attachment_id, 'slider-item-size-lg');
?>
 
<picture>
   <source srcset="<?php echo $imgLG[0]; ?>" media="(min-width: 920px)">
   <source srcset="<?php echo $imgMD[0]; ?>" media="(min-width: 600px)">
   <img src="<?php echo $imgXS[0]; ?>">

Additional optimization tools, and tips for regenerating existing images

Some plugins can create image sizes that can be reused. You can check all the image sizes available in your WordPress instance using the WordPress Command Line Interface (WP CLI).

wp media image-size
 
+---------------------------------------+-------+--------+------+---------+
| name                                  | width | height | crop | ratio   |
+---------------------------------------+-------+--------+------+---------+
| full                                  |       |        | N/A  | N/A     |
| et-pb-post-main-image-fullwidth-large | 2880  | 1800   | hard | 8:5     |
| 2048x2048                             | 2048  | 2048   | soft | N/A     |
| 1536x1536                             | 1536  | 1536   | soft | N/A     |
| slider-item-size-lg                   | 920   | 540    | hard | 920:540 |
| et-pb-image--responsive--desktop      | 1280  | 720    | hard | 16:9    |
| et-pb-post-main-image-fullwidth       | 1080  | 675    | hard | 8:5     |
| et-pb-portfolio-image-single          | 1080  | 9999   | soft | N/A     |
| large                                 | 1024  | 1024   | soft | N/A     |
| slider-item-size-lg-parallax          | 1000  | 540    | hard | 50:27   |
| et-pb-image--responsive--tablet       | 980   | 551    | hard | 980:551 |
| medium_large                          | 768   | 0      | soft | N/A     |

Earlier, I mentioned that the demonstrated solution will make WordPress generate the appropriate new image sizes when you upload a new image. That means the existing images already on the site still need to be resized. WP CLI can be an important ally in this venture. Use media regenerate to generate the existing images in the appropriate dimensions:

wp media regenerate [<attachment-id>] [--image_size=<image_size>]

Get more out of your WordPress site with Mugo

Image optimization is a simple and powerful solution to reduce image weight on your website’s pages. You can have a super powerful infrastructure to host your site that delivers content quickly with low latency and high availability. But that is not sufficient if the user experience is poor due when phone browsers attempt to load five or six small seemingly small images that are actually full-sized HD resolution. For your customers' sake, less is more. However, less is never more when it comes to support for your website. If you’re looking to get the most out of your WordPress site, it helps to have a dedicated team that can help optimize your performance and build custom solutions to fit your needs when the generic WordPress options aren’t cutting it. Want to see the full potential of what your WordPress site can do? Contact us today!