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_attachement_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:
<?php $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium'); echo '<img src="'. $image_src .'" 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:
<?php $featured_image = wp_get_attachment_image( get_post_thumbnail_id(), 'large', "", array( "class" => "featured-image", "alt" => get_the_title(), "loading" => "eager" ) ); echo $featured_image; ?>
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
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:
<img width="1024" height="683" src="https://www.krisstokes.com/wp-content/uploads/2023/04/mathew-schwartz-P-WWHRF7qe0-unsplash-1024x683.jpg" class="featured-image" alt="Lights from speeding in a vehicle through a tunnel" decoding="async" loading="eager" srcset="https://www.krisstokes.com/wp-content/uploads/2023/04/mathew-schwartz-P-WWHRF7qe0-unsplash-1024x683.jpg 1024w, https://www.krisstokes.com/wp-content/uploads/2023/04/mathew-schwartz-P-WWHRF7qe0-unsplash-300x200.jpg 300w, https://www.krisstokes.com/wp-content/uploads/2023/04/mathew-schwartz-P-WWHRF7qe0-unsplash-768x512.jpg 768w, https://www.krisstokes.com/wp-content/uploads/2023/04/mathew-schwartz-P-WWHRF7qe0-unsplash-1536x1024.jpg 1536w, https://www.krisstokes.com/wp-content/uploads/2023/04/mathew-schwartz-P-WWHRF7qe0-unsplash-2048x1365.jpg 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).