How to Add width/height to Images in WordPress

Last updated:

Here's how to add the width and height attributes to images in your posts in WordPress. From an explanation of the width and height attributes to the benefits and caveats, you'll also find the code to add image size in WordPress.

Specify the size of the image

By adding the width and height attributes to the img element in HTML, you can specify the display size of the image.

The width and height attributes

The width and height attributes
AttributeDescriptionvalue
widthSpecify the width of the imagePixel (px) or Percent (%)

Ex. width=”300″
Ex. width=”30%”
heightSpecify the height of the imagePixel (px) or Percent (%)

Ex. height=”300″
Ex. height=”30%”

Example

<img src="xxx.png" width="300" height="250">

Supported browsers

The width and height attributes are supported by the following browsers.

Benefits of adding width and height

This section explains the benefits of adding the width and height attributes to an image.

Layout shift can be avoided

Major browsers such as Firefox and Chrome allow you to specify the width and height attributes of the img element to calculate the size of the image before the image is loaded to ensure the layout.

If you are using lazy loading of images, you need to specify the size of the image, otherwise the layout may move after the image is loaded.

The layout can move, which can induce users to click unnecessarily and cause the anchor links to scroll out of position.

Preventing the loss of page ratings

Google’s Core Web Vitals include three metrics, LCP, FID and CLS.

CLS stands for Cumulative Layout Shift and indicates how much the layout moved during page loading.

It has been announced that Core Web Vitals will be a factor in search rankings from 2021 onwards.

Specifying the size of the image leads to a reduction in CLS.

Points to note when specifying width and height

This section explains what to pay attention to when adding the width and height attributes to an image.

Specify the proper size

If you specify a value greater than the actual size of the image for width and height, the image will look rough and It will be displayed.

Specify the actual size of the image you want to display.

Also, if the size of the original image is larger than you want it to be, the amount of data required to load it will increase.

Use image editing software to resize it to the appropriate size.

Keep the proportions of the image intact

If the ratio of the original image size to the specified width and height is different, the image will be distorted and displayed It will be. Do not break the ratio.

Does WordPress not come with image sizes?

When inserting an image within a post in the block editor, the img tag does not have the width and height attributes.

However, the width and height attributes may be added in future versions of WordPress.

How to Add Image Size in WordPress

When you insert an image in a post in WordPress, there are two ways to add width and height to the img tag.

Make it a classic editor

If you install the Classic Editor plug-in, you can change to the Classic Editor.

Classic Editor

If you enable Classic Editor, the img tag will have width and height when inserting images.

Previous posts before enabling the Classic Editor will need to be manually modified.

Customize your theme and add it automatically

By customizing your template file, you can automatically add width and height attributes to images in your post.

Add the following code to functions.php in the theme. Please make a backup copy of the code before you customize it.

function add_img_size($content){
  $pattern = '/<img [^>]*?src="(https?:\/\/[^"]+?)"[^>]*?>/iu';
  preg_match_all($pattern, $content, $imgs);
  foreach ( $imgs[0] as $i => $img ) {
    if ( false !== strpos( $img, 'width=' ) && false !== strpos( $img, 'height=' ) ) {
      continue;
    }
    $img_url = $imgs[1][$i];
    $img_size = @getimagesize( $img_url );
      
    if ( false === $img_size ) {
      continue;
    }
    $replaced_img = str_replace( '<img ', '<img ' . $img_size[3] . ' ', $imgs[0][$i] );
    $content = str_replace( $img, $replaced_img, $content );
  }
  return $content;
}
add_filter('the_content','add_img_size');

Find the img tag in the post and if it doesn’t have width and height, get the size from the image URL and add the size by replacing the code.

go to top