search

cshum / imagor

Fast, secure image processing server and Go library, using libvips
Apache License 2.0
3.46k stars 138 forks source link

Feature Request: Support separate base params for auto-avif/webp #395

Open mplibunao opened 1 year ago

mplibunao commented 1 year ago

Hello. First of all, thank you for all the work that you have put into imagor. It's amazing.

Currently, imagor supports IMAGOR_BASE_PARAMS for setting base params like filters:quality(60) for all requests.

However, quality for each format is not consistent as mentioned in https://www.industrialempathy.com/posts/avif-webp-quality-settings#quality-settings-for-a-range-of-jpeg-qualities

JPEG quality 50 60 70 80
AVIF quality 48 51 56 64
WebP quality 55 64 72 82

This means that if I set both IMAGOR_AUTO_WEBP and IMAGOR_AUTO_AVIF to true and set IMAGOR_BASE_PARAMS to filters:quality(56), I will not get a consistent image quality across devices.

Assuming I set the 56 value with avif in mind, users which only support webp or jpeg will get a much lower quality than what I had intended for them to receive.

Currently, my workaround for this is to skip using the auto-webp/auto-avif and instead use the picture element with separate sources for each format so I have better control over the quality of each format like

<picture>
  <source type="image/avif" sizes="(max-width: 639px) 45vw, (min-width: 640px) 65vw, (min-width: 768px) 33vw" srcset="http://localhost:8000/unsafe/480x0/smart/filters:quality(51):format(avif)/office-2.jpg 480w, http://localhost:8000/unsafe/640x0/smart/filters:quality(51):format(avif)/office-2.jpg 640w, http://localhost:8000/unsafe/768x0/smart/filters:quality(51):format(avif)/office-2.jpg 768w, http://localhost:8000/unsafe/1024x0/smart/filters:quality(51):format(avif)/office-2.jpg 1024w">
  <source type="image/webp" sizes="(max-width: 639px) 45vw, (min-width: 640px) 65vw, (min-width: 768px) 33vw" srcset="http://localhost:8000/unsafe/480x0/smart/filters:quality(64):format(webp)/office-2.jpg 480w, http://localhost:8000/unsafe/640x0/smart/filters:quality(64):format(webp)/office-2.jpg 640w, http://localhost:8000/unsafe/768x0/smart/filters:quality(64):format(webp)/office-2.jpg 768w, http://localhost:8000/unsafe/1024x0/smart/filters:quality(64):format(webp)/office-2.jpg 1024w">
  <source type="image/jpeg" sizes="(max-width: 639px) 45vw, (min-width: 640px) 65vw, (min-width: 768px) 33vw" srcset="http://localhost:8000/unsafe/480x0/smart/filters:quality(60):format(jpeg)/office-2.jpg 480w, http://localhost:8000/unsafe/640x0/smart/filters:quality(60):format(jpeg)/office-2.jpg 640w, http://localhost:8000/unsafe/768x0/smart/filters:quality(60):format(jpeg)/office-2.jpg 768w, http://localhost:8000/unsafe/1024x0/smart/filters:quality(60):format(jpeg)/office-2.jpg 1024w">
  <img src="/media/assets/office-2.jpg" alt="Woman walking while smiling in the office" class="max-w-full w-full" loading="lazy" fetchpriority="auto" decoding="async">
</picture>

Unfortunately, as you can see this results in more HTML (or JS if you are using SPA frameworks) especially if you are trying to serve responsive images.

It'd be great if we could add AUTO_AVIF_BASE_PARAMS and AUTO_WEBP_BASE_PARAMS for auto-avif and auto-webp to use then fallback to the original BASE_PARAMS if the Accept headers doesn't include those formats.

This way, instead of using separate source elements for each type, we can revert back to a single img element without the format and quality filters and let imagor set that based on AUTO_AVIF_BASE_PARAMS and AUTO_WEBP_BASE_PARAMS. This should result in 1/3 of the current HTML for each image like:

<img src="/media/assets/office-2.jpg" alt="Woman walking while smiling in the office" class="max-w-full w-full" loading="lazy" fetchpriority="auto" decoding="async" sizes="45vw, media(min-width: 640px) 65vw, media(min-width: 768px) 33vw" srcset="http://localhost:8000/unsafe/480x0/smart/office-2.jpg 480w, http://localhost:8000/unsafe/640x0/smart/office-2.jpg 640w, http://localhost:8000/unsafe/768x0/smart/office-2.jpg 768w, http://localhost:8000/unsafe/1024x0/smart/office-2.jpg 1024w">