Learn how to remove srcset from wp_get_attachment_image() for WordPress, so you can display consistently sized attachment images every time.

wp_get_attachment_image() is WordPress’s built-in function to create an <img /> tag, so you can display a media file on your website. By default, it includes a srcset attribute that helps WordPress display responsive images on your website by telling it which size images to display at specific ranges of screen width.

srcset is the set of image sources (i.e. “src set”) used for rendering responsively-sized images. As in, the actual URL path to the actual images that are output from wp_get_attachment_image().

Why Remove srcset From wp_get_attachment_image()?

There are many reasons why you may want to remove responsive srcset attributes from wp_get_attachment_image() generated images. It’s quite possible you only need to display an image in a single size. Or perhaps, you want to display images in a way where they always fill their container. On its own, wp_get_attachment_image() doesn’t allow you to choose how your images are rendered, but by creating a short custom filter you can give yourself a choice.

Example of When to Remove srcset from wp_get_attachment_image()

Most of the time, rendering responsive image sizes is a desirable outcome. However, sometimes — like, if you need to create a uniformly sized grid of your company’s team members or employees and you don’t have consistently sized photos of everyone — it’s better to leave out the srcset attribute and afford yourself the opportunity to use a larger-than-necessary-image and apply a crop.

What you want: A grid of same-size images.

What you have: A bunch of images of not the same size.

The fix? Use the version of the image that is at least as large as you need.

How? You can pick a specific image size by removing the srcset attribute from wp_get_attachment_image().

Solution

In order to achieve the desired results, you can add a filter to WordPress. Essentially, the filter will return null for wp_calculate_image_srcset_meta().

Additionally, you need to remove the filter on-the-fly. Otherwise, the filter will be applied site-wide on all images, which is not what you want to do. Instead, the filter needs to be available on an as-needed basis.

WordPress Function Used:

• wp_calculate_image_srcset_meta – A hook that pre-filters the image meta to be able to fix inconsistencies in the stored data.
• wp_get_attachment_image() – Gets an HTML img element representing an image attachment.
• wp_get_attachment_image_without_srcset() – Our custom filter-function to temporarily return null for wp_calculate_image_srcset_meta.

PHP Code

Here’s the code for the wp_get_attachment_image() filter.

/**
 * Get a WordPress attachment image without a srcset attribute.
 *
 * @param int $attachment_id Image attachment ID.
 * @param string|array $size (optional)
 * @param bool $icon (optional)
 * @param string|array $attr (optional)
 *
 * @return string img element or an empty string.
 */
function wp_get_attachment_image_without_srcset($attachment_id, $size = 'full', $icon = false, $attr = '') {
    // Add a filter to return null for srcset.
    add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );
    // Get the attachment image sans-srcset attribute.
    $result = wp_get_attachment_image($attachment_id, $size, $icon, $attr);
    // Remove the null srcset filter, to avoid global application.
    remove_filter( 'wp_calculate_image_srcset_meta', '__return_null' );
    return $result;
}

Add the code to your active WordPress theme’s function.php file, so you can use it in your templates.

Usage

Using the new function wp_get_attachment_image_without_srcset() in your theme templates is essentially the same as using the original wp_get_attachment_image() function. Except, now you have a new function to call when you want to get an image without the srcset attribute: wp_get_attachment_image_without_srcset()

Example:

And, there you have it. Use WordPress and do cool stuff on your website.

echo wp_get_attachment_image_without_srcset($attachment_id, array(700, 700), false, array( 'class' => 'your-custom-image-class' ));