Finding images in the HTML using PHP

Before you can add missing width and height attributes to images in the HTML on existing pages automatically, you will need to scan the HTML to find the images that needs to be updated. To do that, you can use the preg_match_all function.

It is easier if you create a function that can be called and reused, but for simplicity I will first give some examples with plain procedural PHP.

The following piece of code can return all of the img elements in the HTML:

$html = get_html_code_from_somewhere();
if (!preg_match_all('/(<img([^>]*)>)/iu', $html, $matches, PREG_PATTERN_ORDER)) {
  exit();
}

The elements themselves are stored in the $matches[1] array, and can be traversed using a simple foreach loop:

foreach ($matches[1] as $element) {
  echo $element . "\n";
}
exit();

This example is just to show you how the regular expression works; but from this point, you just need to extract the src value of the images, and obtain the dimensions using getimagesize — you can even replace the images on-the-fly from the same loop.

You also need to be careful, and make sure you account for failures. If the getimagesize fails, for any reason, the image should just be left untouched in the source.

Extracting attributes from img elements

To obtain the path of images, and avoid loosing existing attributes, you should extract them and re-insert them together with the width and height attributes before replacing the original images in the source.

The most challenging part at this point, is how to extract existing attributes from the img element — for this you should probably create a function, since it will make your code easier to read. As a bonus, you will also be able to call this code in other places where you might need to obtain the attributes of an HTML element. I created the following:

function get_element_attributes(string $element): array {
  if (false !== preg_match_all('/([a-z0-9]+)=[\"\']{1}(.*?)[\"\']{1}/sui', $element, $found_attrs, PREG_PATTERN_ORDER)) {
    $i = 0;
    $attributes = [];
    foreach ($found_attrs[1] as $name) {
      $attributes["$name"] = $found_attrs[2]["$i"];
      ++$i;
    }
    return $attributes;
  }
  return [];
}

The challenging part about making this function, was that the matched attribute names are stored in the $found_attrs[1] array, while the attribute values are stored in $found_attrs[2] — to beat this challenge, I included a counter, $i, and used it to obtain the attribute value from the other array.

If an image does not have any attributes, an empty array is returned instead, and the image is left untouched in the source. This is of course unlikely, but it can happen in cases where people manually edit their HTML. An img element should at least include a src attribute for you to be able to obtain the dimensions of the image. If the image source is updated with JavaScript, this function will not work.

Create the new img element, if needed

If an img already has dimensions applied, or if the src attribute is empty, we leave the image in the source without touching it.

The below code should be placed inside the first loop we created — note that the full code is included last in the article:

$attributes = get_element_attributes($element);
if (
  (!empty($attributes['src'])) &&
  (isset($attributes['width'])) &&
  (isset($attributes['height']))
) {
  // Skip the current iteration of the loop
  continue;
}
// If everything was as desired, subsequent code will get executed

Assuming that everything is as we want, we can now check if the file exist in the local file system; we should perform this check before attempting to use getimagesize on the file.

You can check that the file exists with file_exists:

if (!file_exists($path)) {
  continue;
}

Finally, you should try to obtain the image dimensions:

if (false === ($img_details = getimagesize($path))) {
  continue;
}

This will also elegantly define the $img_details variable while testing if getimagesize was successful.

Now we can add new attributes, and create a new element to replace the old element in the source:

$attributes['width'] = $img_details[0];
$attributes['height'] = $img_details[1];
$attributes['loading'] = 'lazy';

To create the replacement element:

$new_element = '';
foreach($attributes as $key => $value) {
  $new_element .= ' '. $key . '="' . htmlspecialchars($value, ENT_QUOTES) . '"';
}
$new_element = '<img' . $new_element .'>';

And finally, the original element in the HTML is replaced with the new element:

$html = str_replace($element, $new_element, $html);

The full code:

function img_add_dimensions(string $html, string $site_directory) : string
{
  if (!preg_match_all('/(<img([^>]*)>)/iu', $html, $matches, PREG_PATTERN_ORDER)) {
    return $html;
  }
   
  foreach ($matches[1] as $element) {
    $attributes = get_element_attributes($element);
    if (
      (!empty($attributes['src'])) &&
      (isset($attributes['width'])) &&
      (isset($attributes['height']))
     ) {
      continue;
    }
    $path = $site_directory . ltrim($attributes['src'], '\\');
    if (!file_exists($path)) {
      continue;
    }
    if (false === ($img_details = getimagesize($path))) {
      continue;
    }
    $attributes['width'] = $img_details[0];
    $attributes['height'] = $img_details[1];
    $attributes['loading'] = 'lazy';
            
    $new_element = '';
    foreach($attributes as $key => $value) {
      $new_element .= ' '. $key . '="' . htmlspecialchars($value, ENT_QUOTES) . '"';
    }
    $new_element = '<img' . $new_element .'>';

    $html = str_replace($element, $new_element, $html);
  }
  return $html;
}

function get_element_attributes(string $element): array
{
  if (false !== preg_match_all('/([a-z0-9]+)=[\"\']{1}(.*?)[\"\']{1}/sui', $element, $found_attrs, PREG_PATTERN_ORDER)) {
    $i = 0;
    $attributes = [];
    foreach ($found_attrs[1] as $name) {
      $attributes["$name"] = $found_attrs[2]["$i"];
      ++$i;
    }
    return $attributes;
  }
  return [];
}

Tell us what you think: