Remove Automatic Dimensions from WordPress Image Attachment

Images are one of the most important element in the web world. 65% of people who visit websites are visual learners. Blog posts with image receive 94% more views than those without. So it is an important task to manage the images in your Websites. When any image is added to WordPress post and post thumbnails, the image gets dimensions automatically. However the auto dimensions by WordPress is not responsive. So in order to create responsive images we have to remove inline height and width attributes from WordPress image. This article shows different ways to remove automatic dimensions from WordPress image attachment.

Remove Automatic Dimensions from WordPress Image Attachment

 By default WordPress adds height and width attributes which look something like this.

Remove Automatic Dimensions from WordPress Image Attachment

The height and width attribute added by WordPress overrides the CSS width and height property which makes the image unresponsive. So you have to remove the default image size attribute to gain complete control over image through CSS. Here are a the few techniques you can follow to solve this problem.

Remove Automatic Dimensions with Functions File

All you need to do is copy the following lines of codes and paste it to functions.php file in your theme folder.

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

// Remove image size attributes from post thumbnails
add_filter( 'post_thumbnail_html', 'remove_img_attributes', 10 );

// Remove image size attributes from images added to a WordPress post
add_filter( 'image_send_to_editor', 'remove_img_attributes', 10 );

Once you save it, the code will remove the dimensions from the images that will be uploaded in the future. However this solution fails to remove dimensions from older images which are already uploaded. If you have only a few images uploaded till now then you can re-upload those images manually. However, for websites with large collection of image this solution is incomplete. So, you may need to try other methods mentioned here.

Remove Image Dimension with JavaScript

For complete removal of image dimensions from all your past and future images, you can try this method. This is one of the best solution for this problem. Here all you need to do is find the footer.php file in the themes folder. The easiest way to reach the footer.php file is through dashboard. Navigate to Appearance >> Editor.

Also Read:   How to Create Custom Permalinks in WordPress

In footer.php file you should copy and paste the following jQuery code just before the closing body tag </body> at the very end. Make sure you include these tag between the opening and closing script tag (<script></script>)

jQuery(document).ready(function ($) {

After you update the file the image dimensions forced by WordPress will be gone.

Remove Image Dimensions with Plugins

If both of the above solutions failed to give you satisfying result, then do not worry you still have a safe option to install a plugin to do this task. Lots of plugins are available in WordPress repository. Just find a plugin that meets your requirement and works right for you.  You can try Image Size Attributes Remover plugin.

Remove Automatic Dimensions from WordPress Image Attachment

The plugin do not have any configuration and will start working as soon as you activate it. After implementation of these methods, check the image dimensions from the source code again, the height and width attribute should be gone by now.

The following two tabs change content below.

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post