Every time you upload images into WordPress from the image uploader directly in your post or through the media uploader, it will automatically add the height and width of the image into the html tag.
<img src="path/to/your/image" class="alignnone size-full wp-image-1234" alt="Meet my cat Walter" title="Meet my cat Walter" width="600" height="400">
Most of the time it’s fine that the image tag has the width and height but, if you’re like me and are working with a responsive theme and need to remove it…here are the steps to follow.
Remove height and width attributes from image tag
1. Open your theme’s functions.php file. (Access this file via FTP or through the Dashboard → Appearance → Editor)
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.
All done! Now, when you upload a new image using the WP media uploader, the width and height attribute will no longer be added to the image tag.
<img src="path/to/your/image" class="alignnone size-full wp-image-1234" alt="Meet my cat Walter" title="Meet my cat Walter">
Please note: if you are new at this, make sure to backup the file before you change anything. The functions.php file is a highly sensitive file and you want to have a backup just in case something goes wrong!
<?php existing code your new code ?>
If you are unsure where to add this code within the functions.php file, the only thing to remember is to be careful not to add it inside another function…it is best to add it at the bottom of the file. If your file does not have a php closing tag that’s fine, just plop the code in and save.