Optimize image that does not have an image style

Question

We are using the imageapi_optimize modules with the imageapi_optimize_resmushit. We are able to flush the caches for all the image styles and see an improvement. However, there are images that are loaded with background-image attribute that do not get optimized and their image styles are set to Original Image under Manage Display for the image field.

How can I set up the image who use the Original Image Styles setting under Manage Display to be optimized as well?

What we tried:

1. Enable imageapi_optimize
2. Enabled imageapi_optimize_resmushit
3. Setup image optimize pipeline and set it to resmushit
4. Clear all caches and especially the image style cache using drush if all
5. Observe all images where an image style is used other than Original Image is optimized after cache.
6. All images where image style is set to Original Image is not not optimized.

Answer 1

Assuming background-image refers to the example: <img src="" style="background-image: url(path/to/image);" />.

Background images are different when written as: style="background-image: url(path/to/image);", they do not necessarily use Drupal's render service.

A couple of options to try depending on your use case:

• Try preprocessing your image field URI and then printing out the Image Style image path.

use Drupal\image\Entity\ImageStyle;

$imagePath = 'public://images/image.jpg';
$variables['imageStyleURL'] = ImageStyle::load('style_name')->buildUrl($imagePath);

url({{ imageStyleURL }})

• Change the output format of the field to "URL to image", then just print out {{ image_field }} in the url().

url({{ image_field }})

The problem to your question, is how would Drupal (or contributed module) know that an image URL should be processed by an image style? It would not seem an issue with the modules, more they don't have a chance to do their thing.

Also, Twig Tweak, beyond being a great module for many cases, provides a Twig method for applying an image style in Twig:

{{ field_image_path | image_style('image_style') }}

*Note, manual image URL's that contain an image style path will use that image style: /sites/default/files/styles/image_style/public/pictures/2019-03/file_name.jpg_11