Adding the option for conversion to WebP-format

[bramdeba]

The problem to solve

When uploading images to a content platform, I might want imagemagick to automatically convert them to Google's image format, WebP for faster loading times.

Proposed solution

I would love to have the option to let imagemagick convert a file to another format, preferably WebP.

Add a targetFormat-option to the imageSizes-array to allow setting a target format (jpg, webp) for automatically resizing and converting the image in one go. That way, we would be able to use 2 image sizes for the WebP-converted image, and 2 image sizes for the JPEG-original (but resized) format to use as fallback for older browsers who do not yet support WebP.

Alternatives

Perhaps it is easier to use a postprocessor? Would love someone's opinion on this.

Additional context

Trying to fit all pieces together that are (imo) necessary for turning ApostropheCMS into the best possible JS-powered digital experience platform.

[boutell]

Interesting! WebP is pretty great but does not work in IE11 which does unfortunately still have a couple points of market share. I'm not sure what the right fallback strategy would be. What does that markup look like, if you know? Meanwhile it sounds like AVIF is coming up as the replacement for WebP, although it is currently only turned on in stable builds in Chrome. (Firefox has it as a developer option.)

…

On Wed, Dec 16, 2020 at 7:55 PM Bram De Backer ***@***.***> wrote: The problem to solve When uploading images to a content platform, I might want imagemagick to automatically convert them to Google's image format, WebP for faster loading times. Proposed solution I would love to have the option to let imagemagick convert a file to another format, preferably WebP. Add a targetFormat-option to the imageSizes-array to allow setting a target format (jpg, webp) for automatically resizing and converting the image in one go. That way, we would be able to use 2 image sizes for the WebP-converted image, and 2 image sizes for the JPEG-original (but resized) format to use as fallback for older browsers who do not yet support WebP. Alternatives Perhaps it is easier to use a postprocessor? Would love someone's opinion on this. Additional context Trying to fit all pieces together that are (imo) necessary for turning ApostropheCMS into the best possible JS-powered digital experience platform. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#62>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAH27PTNI5CHMUIHI4VVO3SVFJJHANCNFSM4U6Z3LXA> .

-- THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

[boutell]

We might have to do something where the JPEG or PNG always exists, but markup that is "smart" can know the .webp also exists in each case. Markup that hasn't been upgraded to deal with the issue could still offer JPEG/PNG without a bc break.

…

On Fri, Dec 18, 2020 at 8:51 AM Tom Boutell ***@***.***> wrote: Interesting! WebP is pretty great but does not work in IE11 which does unfortunately still have a couple points of market share. I'm not sure what the right fallback strategy would be. What does that markup look like, if you know? Meanwhile it sounds like AVIF is coming up as the replacement for WebP, although it is currently only turned on in stable builds in Chrome. (Firefox has it as a developer option.) On Wed, Dec 16, 2020 at 7:55 PM Bram De Backer ***@***.***> wrote: > The problem to solve > > When uploading images to a content platform, I might want imagemagick to > automatically convert them to Google's image format, WebP for faster > loading times. > Proposed solution > > I would love to have the option to let imagemagick convert a file to > another format, preferably WebP. > > Add a targetFormat-option to the imageSizes-array to allow setting a > target format (jpg, webp) for automatically resizing and converting the > image in one go. That way, we would be able to use 2 image sizes for the > WebP-converted image, and 2 image sizes for the JPEG-original (but resized) > format to use as fallback for older browsers who do not yet support WebP. > > Alternatives > > Perhaps it is easier to use a postprocessor? Would love someone's opinion > on this. > Additional context > > Trying to fit all pieces together that are (imo) necessary for turning > ApostropheCMS into the best possible JS-powered digital experience platform. > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > <#62>, or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAAH27PTNI5CHMUIHI4VVO3SVFJJHANCNFSM4U6Z3LXA> > . > -- THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

-- THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

[bramdeba]

AVIF seems like a future-proof choice indeed.

We should use content negotiation. If user agent lets us know that WebP is supported, we check for the .webp-version. If not, it should fall back to JPEG/PNG.

I've been using a Wordpress plugin that does exactly this. The image URL you're using is always a jpg/png-link, but there's a PHP-script behind the link which is dynamically checking and returning the right supported format. Works great really.

The only question I'm asking myself at the moment: do we convert on upload? Or instantly when the file is request? I'm not really sure what the best (or the most scalable) solution would be.

I'm willing to spend some time on this, if the above sounds good to you?

[stepanjakl]

Hi,

Any update on this matter? It would be great to have WebP image format alongside others as it is slowly becoming an industry standard.

@boutell IE11 will soon be no longer supported (🎉)

This is how it can look like in the end (including native lazy loading).

<picture>
   <source srcset="./images/image.webp" type="image/webp">
   <source srcset="./images/image.png" type="image/png">
   <img alt="image" src="./images/image.png" loading="lazy">
</picture>

[boutell]

It is certainly something we want to do. PRs are of course welcome.

…

On Fri, Apr 30, 2021, 6:40 AM stepanjakl ***@***.***> wrote: Hi, Any update on this matter? It would be great to have WebP image format alongside others as it is slowly becoming an industry standard <https://caniuse.com/?search=webp>. @boutell <https://github.com/boutell> IE11 will soon be no longer supported <https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#62 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAH27M5N67DNKQHORZAUI3TLKCKBANCNFSM4U6Z3LXA> .