easy_lqp

This module supports Low Quality Placeholder(LQP) as the default option with a combination of the original Easy Responsive Images module image replacement functionality. This generates a `base64` encoded version of the image at the same aspect ratio as the image style, so it can be sent in the initial HTML markup and reduces the total number of images that are sent over the wire. This is similar to BlurHash or Symfony's LazyImage but built around Drupal's existing systems.

Easy LQP needs a minimum and maximum width in combination with a
preferred amount of pixels between each image style. An optional list of aspect
ratio's can also be defined. When the configuration is saved, the image styles
are automatically generated. For example generating image styles for a 4:3
ratio and 16:9 ratio will produce the following styles:

* responsive_4_3_50w
* responsive_16_9_50w
* responsive_4_3_150w
* responsive_16_9150w
* …
* responsive_4_3_1450w
* responsive_16_9_1450w

Usage

After generating the desired image styles for the different aspect ratio's,
create a media view mode for each aspect ratio. The Easy LQP
formatter can be used to select an aspect ratio for the image in the media
view mode. When using the media item in other content, render the media item
using the view mode needed for the specific display.

Twig

The module also provides a Twig filter to create URLs for the images styles
(including an optimized WebP version of the image when using
ImageAPI Optimize WebP).

Create a template for your media view mode, eg. `media--image--16-9.html.twig`
for a `16_9` view mode, containing the following code:

{#
/**
 * @file
 * Default theme implementation to display an image.
 */
#}
{{ attach_library('easy_lqp/resizer') }}

{% set file = media.field_media_image.entity %}
{% set src = file.uri.value|image_url('responsive_16_9_50w') %}
{% set srcset = [
  file.uri.value|image_url('responsive_16_9_150w') ~ ' 150w',
  file.uri.value|image_url('responsive_16_9_350w') ~ ' 350w',
  file.uri.value|image_url('responsive_16_9_550w') ~ ' 550w',
  file.uri.value|image_url('responsive_16_9_950w') ~ ' 950w',
  file.uri.value|image_url('responsive_16_9_1250w') ~ ' 1250w',
  file.uri.value|image_url('responsive_16_9_1450w') ~ ' 1450w',
] %}
<picture  class="easy-lqp-picture">
  <img
    src="{{ src }}"
    data-srcset="{{ srcset|join(',')|raw }}"
    alt="{{ media.field_media_image.alt }}"
    loading="lazy"
    width="50"
    height="50"
  />
</picture>

Each time media is displayed using the view mode, the JavaScript will check the
available width for the image container, and load the optimized image style over the LQP placeholder image.

The default width/height attributes are temporarily set
to make the browser render the image more efficiently. The width and height
will be updated by the resizer JavaScript.

SUPPORTED MODULES

This module works even better in combination with:
* Focal Point
* Image Optimize
* Image Optimize Binaries
* ImageAPI Optimize WebP
* Media Embed Container

It also supports external images via Imagecache External.

If you have setup cropping tools at specific aspect rations make sure you also set them on all the appropriate images styles and the LQP ones. This will make sure the LQP images are the correct ratios when needed

Notes on forking.

This module was originally a feature request on an Easy Responsive Images issue but it was never going to be merged in per the wishes of the developer. This module allows us to keep the functionality without maintaining an old MR.

Switching from Easy Respsonive Images

• Download and enable the Easy LQP module.
• Copy the settings for image width, step and aspect ratio from ERI to Easy LQP and save the config.
• Update the image display formatter to use Easy LQP instead of ERI.
• Uninstall ERI
• Export config, you should be good to go.