Automatically add width and height to img tags

14 Jul 2024

If you set the width and height attributes for your img tags, the browser can allocate the correct amount of space for the image before loading it. This prevents content below the image from shifting around as the page loads. The layout becomes stable, which means that:

• your users won’t accidentally click a wrong button because of layout shift;
• the performance is better because the browser doesn’t have to recalculate the layout as the images load;
• page load feels smoother and faster.

That’s why Google recommends setting the width and height attributes in your HTML code.

If you have a lot of images, it may take some time to specify their dimensions. With Aba Search and Replace, you can do it automatically.

The typical case

Please use this search pattern to capture the image file name in the first subexpression:

<img src="([^"]+)"

The [^"]+ regex matches everything except for the closing quotation mark and parentheses mark the first subexpression.

If you have absolute paths like <img src="/images/someImage.png"> in your HTML code, use the following replacement:

\0 \{ File(Aba.searchPath() \1).meta('ImgTag') }

Here, we insert the whole match \0, which is the img tag and its src attribute. Then, we insert width and height via the meta function. The Aba.searchPath() function returns the directory that you selected for the search, then the image filename \1 is added to it.

Relative paths

If your paths are relative to the html files (e.g., <img src="someImage.png"> or <img src="../banner.png">), then use a simpler replacement:

\0 \{ File(\1).meta('ImgTag') }

Replacing existing width and height attributes

If you have existing width and height attributes and you want to replace them, the regex becomes more complex. For example, if the width and height always follow the src attribute:

<img src="([^"]+)" width="\d+" height="\d+"

And the replacement should be:

<img src="\1" \{File(Aba.searchPath() \1).meta('ImgTag')}

Matching tags without existing width and height attributes

More often, you need to skip the tags that already have the width or the height attribute. Our previous regular expression also has these disadvantages:

• If another attributes like alt precedes src, the regex won't match.
• If there are line breaks or multiple spaces between <img and src, the regex won't match.
• You need to choose between absolute paths and relative paths manually.
• If the file name contains encoded spaces, for example, Fancy%20logo.png, Aba won't be able to open the image file.

The following regular expression fixes these problems:

<img\s+(?:alt="[^"]*?"\s+)?src="([^"]+)"(?!\s+width|\s+height)

And the replacement should be:

\0 \{ File( if \1[0] == '/' { Aba.searchPath() } else {''} \1.decodeUrl()).meta('ImgTag') }

We use alt="[^"]*?" to match an optional alt attribute. If you use other attributes, you can add them here. Instead of spaces, we use \s+ to match any number of spaces or line breaks. The regular expression includes a negative lookhead (?!\s+width|\s+height), so it skips the tags that already have width or height attributes.

The replacement checks if the first character of the file name is a slash /; if yes, it uses the absolute path. Finally, the decodeUrl function replaces %20 with spaces.

This regular expression works in most cases and it's included into favorites by default. Note that regex matching is textual, so the program does not really understand HTML. You may need to modify the regular expression to match your specific case.

Conclusion

You can preview the replacements and check that the img tags are matched correctly. If Aba cannot find an image file, it will display an error message with the src attribute and the HTML filename. Then, just press the Replace button and test the result in your browser. If anything goes wrong, you can always undo the replacement.

Aba can help you to ensure that all of your pages use width and height attributes, which improves performance, prevents layout shifts, and makes your website more visually appealing for the users.

Stop jumping between browser tabs and random online tools. Aba Search and Replace is your Swiss army knife for fast, safe text updates across multiple files and data conversions, with all your data staying on your computer. Built for developers, testers, and analysts.