Remove Image Size Attributes for Responsive Images in WordPress

WordPress, by default, will add the width and height attributes to image elements. These attributes will override CSS width and height properties. Making images with these dimension attributes responsive is a bit of a hassle, or in some cases cannot be done at all.

Strip Image Dimension Attributes from Inserted Images

Stripping out the image size attributes will make sure that you will have complete control over the image size in CSS. You can use the following code to remove these attributes:

/**
* Removes width and height attributes from image tags
*
* @param string $html
*
* @return string
*/
function remove_image_size_attributes( $html ) {
return preg_replace( '/(width|height)="\d*"/', '', $html );
}

// Remove image size attributes from post thumbnails
add_filter( 'post_thumbnail_html', 'remove_image_size_attributes' );

// Remove image size attributes from images added to a WordPress post
add_filter( 'image_send_to_editor', 'remove_image_size_attributes' );

Just be aware that this code will only strip the site attributes from image tags when an image is a featured image or when an image is added to a post. Existing images that have been uploaded to a post will be unaffected.

Remove width and height attributes via JavaScript

For existing posts, you will have to go and remove the width and height attributes manually, or you can resort to using a bit of jQuery to solve the problem:

jQuery(document).ready(function ($) {
$('img').removeAttr('width').removeAttr('height');
});

It is very likely that you may want to scope the jQuery selector for your specific use-case, but this will do the trick quite nicely. If you are working on a non-WordPress project, this solution will work as long as jQuery is loaded.

Plugin Solution for Stripping Image Size Attributes

If you aren’t the coding type, or prefer to use a plugin and not add the code to your project, just install the Image Size Attributes Remover plugin.

Advertisements
    1. You can put it in your active theme’s functions.php file, but any updates to the theme would cause that to be overridden. Ideally, it would go into a custom WordPress plugin or a custom child theme.

  1. Hi,
    thanks for this solution – but this also removes the image caption. Is there a solution to keep the image caption to 100% and just remove width/height from the img itself?

    1. yes, but it’s a little more complicated.

      First, you have realize that WP core hooks `image_add_caption()` into `image_send_to_editor`, but does so with priority 20. `image_add_caption()` refuses to output the `[caption]` shortcode if the image it is passed does not specify a width 🙁

      So, you have to remove the width & height attributes from the image **after** `image_add_caption()` is called. You can do this by hooking into `image_send_to_editor` with a higher priority number than 20, e.g.,

      `add_filter( ‘image_send_to_editor’, ‘remove_image_size_attributes’ , 21 );`

      However, the function which processes the `[caption]` shortcode (`img_caption_shortcode()`) will not output the caption if the shortcode does not have a `width` attribute 🙁

      So, you have to modify `remove_image_size_attributes()` so that it only strips the attributes from the “ tag and not the `[caption]` shortcode.

      There’s probably a single regex (using lookaheads) but I’ve never bothered to spend the time to find one, so I just do it as follows:

      “`
      function remove_image_size_attributes( $html ) {
      // Find the tag
      preg_match_all( ‘!<img [^>]+>!i’, $html, $matches, PREG_SET_ORDER );
      if ( ! empty( $matches ) ) {
      $html = str_replace( $matches[0][0], preg_replace( ‘/(width|height)=”\d*” /’, ”, $matches[0][0] ), $html );
      }

      return $html;
      }
      “`

      Finally, getting back to the core function which processes the `[caption]` shortcode (`img_caption_shortcode()`), wants to set the width of the generated HTML via an inline `style=”width: xxx”;` HTML attribute…which totally defeats all the work we’ve gone to to make things responsive 🙁

      Luckily, there’s a filter you can hook into to tell it not to output that inline style:

      `add_filter( ‘img_caption_shortcode_width’, ‘__return_false’ );`

      As I said, it’s complicated 🙁

        1. Thanks! I knew it wasn’t entirely correct… thanks for posting the gist. I’ve also updated the comment you left now that I know what the regex should be.

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.

Up Next:

Tweaking WordPress Image Quality

Tweaking WordPress Image Quality