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.

Comments

  1. This is the only solution I’ve found that actually works, and it’s a lot simpler too. I finally have responsive images. Thank you!

  2. 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 🙁

  3. I didn’t have any luck with a JS solution since width and height were being added to the images inside my custom HTML widgets after the page was ready, and I couldn’t get jQuery to fire at a later time. Even if I had, the user experience would have been clunky as the images visibly resize several times.

    In the end I got around the problem by adding width and max-width directly to the IMG tag’s style attribute, which prevents WordPress from resizing them in the first place, though I appreciate not everyone has that flexibility when working with images other than those in custom HTML widgets.

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.