It would be nice to have a Twig filter that takes an image path or URI, reduces the colors of that image to the most occuring one and returns that as a valid css color. You can set that color as a background of the image, so when the image is still loading, the background color resembles the image color. This improves the perceived performace of the website.
An optional variation would be to reduce the image to a horizontal gradient, pick the left and right color, and return those to make a CSS gradient.
An example of how such a filter would be applied:
<img src="{{ item.image }}" style="background-color: {{ item.image|main_color }}">
It would be nice to have a Twig filter that takes an image path or URI, reduces the colors of that image to the most occuring one and returns that as a valid css color. You can set that color as a background of the image, so when the image is still loading, the background color resembles the image color. This improves the perceived performace of the website.
An optional variation would be to reduce the image to a horizontal gradient, pick the left and right color, and return those to make a CSS gradient.
An example of how such a filter would be applied:
<img src="{{ item.image }}" style="background-color: {{ item.image|main_color }}">