Background Image Lazy Loading RegEx Issue

Hey,

There’s an issue in the regex and str_replace calls used for lazy loading background-images.

If an element contains the background-image URL in a separate attribute, the str_replace on line 985 of the autoptimizeImages class fails to add the data-bg attribute.

For example, given the following element:

<div data-url="https://example.org/cat.jpg" style="background-image:url(https://example.org/cat.jpg");></div>

The regex gives the following matches:

0: <div data-url="https://example.org/cat.jpg" style="background-image:url(https://example.org/cat.jpg"
1: <div data-url="https://example.org/cat.jpg"
2: https://example.org/cat.jpg

The first str_replace call on line 983 assigns the $out varaible a value of:

<div data-url="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20500%20300%22%3E%3C/svg%3E" style="background-image:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20500%20300%22%3E%3C/svg%3E)"

The second str_replace call on line 985 then looks for $matches[1] within the $out variable to append the data-bg attribute to it, however, $matches[1] (<div data-url="https://example.org/cat.jpg") is no longer present because the image URL within the data-url attribute has been replaced with the placeholder.

This means the data-bg attribute does not get added and therefore the blank placeholder image does not get replaced.