Grow your CSS skills. Land your dream job.

Last updated on:

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;
}

Reference URL

Comments

  1. 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. I ended up remove the suggested code above and switching to the CSS solution recommended here: http://wordpress.stackexchange.com/a/37768/17599

  3. 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 – http://wordpress.org/support/topic/editing-featured-image-size-in-the-editor?replies=5#post-3109119

  4. 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’:

    https://snipt.net/dnnsldr/remove-image-height-and-width-for-responsive-design-in-wp/

  5. Michael
    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. Craig
    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 : http://justintadlock.com/archives/2011/07/01/captions-in-wordpress to alter the output of the shortcode to remove the width from the caption div amoung other things.

    • Craig
      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] );
          }
      }
      extract(shortcode_atts(array(
          '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. 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: https://gist.github.com/4557917

  8. Mike
    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.

    -Mike

  9. Vincent
    Permalink to comment#

    Thanks for this! Worked right out of the gate.

  10. 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. 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.

    • 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.

    • 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 :-/

    • 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.

    • 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. Permalink to comment#

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

  13. Ayub

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

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

    My [CSS] fix https://twitter.com/ldexterldesign/status/346656591480762369

    Best regards,

  15. Permalink to comment#

    This can also be accomplished with jQuery:

    Remove IMG height and width attributes with jQuery

    http://www.redbridgenet.com/how-to/remove-img-height-and-width-attributes-with-jquery/

  16. Permalink to comment#

    Worked perfectly as is! Thank you!

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

  18. Dano
    Permalink to comment#

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

  19. Elizabeth
    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. Dante
    Permalink to comment#

    Helped me SO much, thanks!!!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".