How to Remove the Width and Height Attributes From WP Image Uploader

If you upload images via the WordPress image uploader and insert it into your post, it will include the image width and height attribute in the html <img> tag. Here’s what it will look like.

<img src="path/to/your/image" width="123" height="456" class="aligncenter size-full" alt="" title="">

In most cases, this is absolutely alright. However, if you are using a responsive theme or are dealing with responsive web design, the “width” and “height” attribute will be a major roadblock that you need to get rid of.

Here’s how you can do it.

1. Open your theme’s functions.php file.

2. Copy and paste the following code:

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

3. Save the changes.

That’s it. Next time when you insert image into the post via the WP image uploader, the width and height attribute will no longer be there.

  • http://twitter.com/anandvip Vipul Anand

    This is really useful in fluid layouts. Thanks

  • http://blog.iws.com.ve/ Ciro Urdaneta

    Great tip. Perfect for responsive layouts!

  • http://bacsoftwareconsulting.com/blog/ Boutros AbiChedid

    I see your point on removing the attributes for some themes, fluid layouts, responsive design…. But I think that removing them will cause Markup validation warnings (probably errors).
    Good Hack.

  • Phil Harvey

    Awesome, thanks man, this was a super easy fix for my latest attempt at a responsive WP theme.

  • http://twitter.com/dennisterrey Dennis Terrey

    Works great! Thanks for the post!

  • http://anthonyabraira.com Anthony Abraira

    When I did this on my WP 3.8.1 / I lose my ability to have captions…