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:
<?php
$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:
<?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;
?>
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:
<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).
Leave a Reply