How to Call Images in WordPress to Optimize Page Speed

Published 04.11.2023

Maybe you’ve run Google Page Speed Insights on your WordPress site, and seen something like this:

If you’re not already using it, the WordPress wp_get_attachment_image function can come to the rescue.

I used to call images in my WordPress PHP templates with the wp_get_attachment_image_src function. I would save the link to the image from the media library in a variable, and put it directly in an image tag, like this:

  $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium');
  echo '<img src="'. $image_src[0] .'" alt="'. get_the_title() .'" />';

But I like the wp_get_attachment_image function better, because it does most of the work to optimize the site’s images and serve correctly sized images for you.

Here’s an example of how I use the wp_get_attachment_image function now:

  $featured_image = wp_get_attachment_image( get_post_thumbnail_id(), 'large', "", array( "class" => "featured-image", "alt" => get_the_title(), "loading" => "eager" ) );
  echo $featured_image;

The wp_get_attachment_image function uses four values: wp_get_attachment_image( $attachment_id, $size, $icon, $attr ); In the snippet above, I have get_post_thumbnail_id() as the $attachment_id value to call the featured image attached to the post. If you’re using the Advanced Custom Fields plugin to associate an image with your post, you could set the “Return Type” for your image field to “Image ID” and then use get_field( 'image-field' ) as the $attachment_id value.

The size is a standard WordPress thumbnail size, ‘large’, and the $attr value is an array that adds a class name and the HTML img tag ‘loading’ attribute. I have this image, since it’s at the top of the post, set to 'loading' => 'eager' so it loads right away—the default ‘loading’ attribute in the wp_get_attachment_image function is ‘lazy’, which defers image loading and helps speed up page loads.

When you use wp_get_attachment_image, it produces HTML that looks like this:

  width="1024" height="683"
  alt="Lights from speeding in a vehicle through a tunnel"
  srcset=" 1024w, 300w, 768w, 1536w, 2048w"
  sizes="(max-width: 1024px) 100vw, 1024px"

What I like most about this is that it adds the srcset attribute to the <img> tag for you—with links to different sized images that the browser will use depending on how big a screen the user is visiting the site on. Basically, smaller images can be served on smaller screens, optimizing and speeding up page load times.

This HTML also includes width and height attributes for the image, which reserve space on the page for the image while it loads (and reduces layout shift).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


About Me

I'm a Senior Front-End Web Developer at Bond Digital, a digital design and marketing agency in Chicago. I live in Oak Park, IL, with my wife, Madhurima, and my son, Kunal. When I'm not building websites, I'm playing guitar, playing video games, writing, or reading.

Contact Me