Remove Width and Height Attributes From Inserted Images

When you upload an image through the WordPress media uploader and then insert it into the editor, it comes with width and height attributes. These are normally desirable, as it assists the browser in making the appropriate room for the image during layout. But if you want to remove the insert action from adding these attributes, you can add this code to you functions.php file or a functionality plugin of your own making:

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
   $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
   return $html;


  1. User Avatar
    Drew Geraets
    Permalink to comment#

    For me, this also seems to strip out the caption when I go to insert an image into a post. That happen for anyone else?

  2. User Avatar
    Drew Geraets
    Permalink to comment#

    I ended up remove the suggested code above and switching to the CSS solution recommended here:

  3. User Avatar
    Permalink to comment#

    Hey guys, this is similar to what I need but I need to remove the attributes from images shown in the Featured Image box, how can I change this to suit that? Here’s what I posted over at the WordPress Forums –

  4. User Avatar
    Permalink to comment#

    I was using this but then realised then when editing an image (adding a caption) to an image from within the post itself (as opposed to within the Media Uploader) WordPress was re-applying the widths and heights. Found a fix here by adding a filter to ‘the_content’:

  5. User Avatar
    Permalink to comment#

    This came in very handy while working with Twitter Bootstrap, where it needed images to dynamically resize for the carousel.

    Thanks Chris!

  6. User Avatar
    Permalink to comment#

    Thanks for this! Exactly what I was looking for, but I still needed the shortcode for the captions to work. I found by changing the priority from 10 to something larger than 20 allowed the caption shortcode filter to execute first and still be created.

    ex. addfilter( 'image_send_to_editor', 'remove_width_attribute', 50 );

    I then modified this : to alter the output of the shortcode to remove the width from the caption div amoung other things.

    • User Avatar
      Permalink to comment#

      Apparently, I spoke too soon. That solution works as long as the user never switches between the ‘visual’ and ‘html’ tabs on the editor.

      So…I ended up using this:

      function remove_img_dimensions($html, $id, $caption, $title, $align, $url, $size, $alt) {
          $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
          if ( !$caption ) {
              return $html;
          } else {
              $output = '[no_width_caption id="' . $id . '" align="align' . $align    . '"]' .         $html . ' ' . $caption . '[/no_width_caption]';
              return $output;
      add_filter('image_send_to_editor', 'remove_img_dimensions', 10, 8);

      and making a my own caption shortcode

      add_shortcode('no_width_caption', function ($atts, $content = null) {
      if ( ! isset( $attr['caption'] ) ) {
          if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
              $content = $matches[1];
              $attr['caption'] = trim( $matches[2] );
          'id'    => '',
          'align' => 'alignnone',
          'caption' => ''
      ), $attr));
      if ( empty($caption) )
          return $content;
      if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
      return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '">'
      . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
  7. User Avatar
    David Sleight
    Permalink to comment#

    To keep these changes from being reverted by edits or updates to the post, apply the function as a filter to the_content rather than send_to_editor.

    I made a quick gist that bundles this up along with a few other changes that help squash hardcoded image width and height attributes across the board in WordPress:

  8. User Avatar
    Permalink to comment#

    Does it matter the spot where I paste it on? I’ve posted it on various locations in functions.php but it still doesn’t work. Thanks for any info.


  9. User Avatar
    Permalink to comment#

    Thanks for this! Worked right out of the gate.

  10. User Avatar
    Permalink to comment#

    I know I’m commenting a bit late, but there’s a better way to do this, and it provides an opportunity to do much more than just remove the width and height attributes. AFAIK, nobody else has proposed a way of doing it like I’ve written about here:

    Rebuilding Image Tags When Adding Media

    The interwebs hosts plenty of blog posts that are doing it your way, but my way is different because instead of trying to alter an existing image tag, your getting a chance to build a new one, just the way you want it.

  11. User Avatar
    Permalink to comment#

    Well… i can find a code like these everywhere in the web. but i have with all the same problem.

    [caption id="XXX" ...] … description[/caption] will be removed too.

    And that’s not what i want. how can i just remove Width and Height informations? nothing more, nothing less. would be nice if anybody could give me a solution which works.

    • User Avatar
      Permalink to comment#

      Use SimpleXML. The link I put in my first comment shows how to use it. You can customize the function to rebuild your image tag just the way you want it.

    • User Avatar
      Permalink to comment#

      Sorry Brain but i can’t follow you. Have i to add your script to the script with preg_replace or have i to replace the “preg_replace” script with yours? (i think secound right?) and than your script would rebuild only the img-tag, right?

      well on my server is SimpleXML activated but it still not working, i had copied your script 1:1, just for testing. Have i to create a XML file? shouldn’t work it with HTML(5) files (generated with PHP) too?

      can you make an example how i can only remove the width / height? i think i didn’t understood your script right :-/

    • User Avatar
      Permalink to comment#

      derElch, if you put my code directly into your functions.php file, instead of what is proposed by this blog post, and if SimpleXML is enabled, that should be all you have to do.

    • User Avatar
      Permalink to comment#

      Well thats what i thought too, but it happens nothing, exactly the same code like before, beginning with

      [caption id="XXX" width="XXX" (i know this still isnt removed)]< a …>< img src=”XXX” … width=”XXX” height=”XXX”/>< /a>Description[/caption]

      I tried to modify the result img-tag to can see differences better, nothing happend, still exactly the same code like before inclunding (and the “preg_replace”).. Any idea?

  12. User Avatar
    Permalink to comment#

    Why remove them when you can easily overwrite these attributes with plain css? width: whatever; height: auto;

  13. User Avatar

    If i want to remove the html what would i need to modify?

  14. User Avatar
    Lewis Dexter Litanzios
    Permalink to comment#

    I guess it could be useful to have the height/width attributes

    My [CSS] fix

    Best regards,

  15. User Avatar
    Permalink to comment#

    This can also be accomplished with jQuery:

    Remove IMG height and width attributes with jQuery

  16. User Avatar
    Permalink to comment#

    Worked perfectly as is! Thank you!

  17. User Avatar
    Grant Price
    Permalink to comment#

    Are there any ways to do this other than using jQuery or a CSS hack?

  18. User Avatar
    Permalink to comment#

    An oldie but a goodie! This should be a default option in the functions …Especially for RWD. Thanks, Chris!

  19. User Avatar
    Permalink to comment#

    I’ve ran into an issue with iframes to I just revised my regex to work only on images alone.

    Here’s what I have used:

        function theme_remove_image_attributes( $html ) {
           $html = preg_replace('/(?:<img.*)((width|height)="\d*"\s)(?:\/>|>)/', "", $html);
           return $html;
  20. User Avatar
    Permalink to comment#

    Helped me SO much, thanks!!!

  21. User Avatar
    Skyler Young
    Permalink to comment#

    It appears that this stopped working as of WordPress 3.9? Is anyone else having that problem? Too bad as it is a cornerstone of my responsive solutions.

  22. User Avatar
    Permalink to comment#

    What if I have a graphic designer that gives me a nice and clean responsive layout, with a single simple class for the image? I am really trying everything in order for the image to appear as “ but so far I just couldn’t do it.

    I thought that using something like the_post_thumbnail('full', array('class' =&gt; 'img1')); would have made the trick, but I was mistaken.

  23. User Avatar
    Permalink to comment#

    CRAIG, your solution is a lifesaver.
    Thank you man!!!!

  24. User Avatar
    Permalink to comment#

    The outer div of the image with caption also contains the width. Why on earth does wordpress insist on doing this?

  25. User Avatar
    Permalink to comment#

    hi,how can get width and height attr form external image?
    i create meta box and add image in to it.[].
    i want show this image to post with auto attr height and width.
    < img src=”” width=”” height=”” >

  26. User Avatar
    Permalink to comment#

    If you use the latest version of Jetpack (v3.8.0 as of this writing), you’ll find that it adds back in the width and height attributes on images in JavaScript as the page is loading even if you use the above code. Jetpack is packaged with devicepx which supports images for high DPI displays, but it adds back width/height attributes that break responsive layouts.

    To fix the issue, just add the following to functions.php:

    function remove_jetpack_devicepx() {
          wp_dequeue_script( 'devicepx' );
    add_action( 'wp_enqueue_scripts', 'remove_jetpack_devicepx', 20 );
  27. User Avatar
    Hemang Rindani
    Permalink to comment#

    Thanks for the information everyone. WordPress is one of the easiest enterprise web content management service that allows developers to have complete control over any website. With increasing importance of graphics over website, it is important to define the image in a way that fits the screen and does not occupy too much space. This code will help in managing the display of the image. Make sure that you are using responsive design, which is now a ranking factor and that also adds value to the user experience.

  28. User Avatar
    Cody Sechelski
    Permalink to comment#

    Sweet! Just what I needed!

  29. User Avatar
    Jaakko Lehtonen

    This snippet breaks TinyMCE:s image caption functionality in WP 4.7.5

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.