search

apostrophecms / uploadfs

Store files in a web-accessible location. Includes S3, Azure, and local filesystem-based backends. Can also scale and autorotate image files. Additional storage and image-processing backends are easy to create.
MIT License
50 stars 32 forks source link

Adding the option for conversion to WebP-format #62

Open bramdeba opened 3 years ago

bramdeba commented 3 years ago

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 commented 3 years ago

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 notifications@github.com 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 https://github.com/apostrophecms/uploadfs/issues/62, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAH27PTNI5CHMUIHI4VVO3SVFJJHANCNFSM4U6Z3LXA .

--

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

boutell commented 3 years ago

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 tom@apostrophecms.com 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 notifications@github.com 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 https://github.com/apostrophecms/uploadfs/issues/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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 https://github.com/apostrophecms/uploadfs/issues/62#issuecomment-830006766, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAH27M5N67DNKQHORZAUI3TLKCKBANCNFSM4U6Z3LXA .