From 25e8d5f69798df8d51555ff85160039e28f07cb1 Mon Sep 17 00:00:00 2001 From: Antoine <27826950+Antoine-lb@users.noreply.github.com> Date: Tue, 16 Aug 2022 15:17:29 +0200 Subject: [PATCH 1/4] copy template into rfcs folder --- rfcs/xxxx-template.md | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 rfcs/xxxx-template.md diff --git a/rfcs/xxxx-template.md b/rfcs/xxxx-template.md new file mode 100644 index 0000000..e9122e1 --- /dev/null +++ b/rfcs/xxxx-template.md @@ -0,0 +1,43 @@ +- Start Date: (fill in today's date, YYYY-MM-DD) +- RFC PR: (leave this empty) + +# Summary + +Description of the proposed feature or proposed changes. + +# Motivation + +Please make sure to explain the motivation for this proposal. +It means explaining the use case(s) and the functional feature(s) this proposal is trying to solve. + +Try to only talk about the intent, not the proposed solution here. + +# Detailed design + +Describe the proposal in detail: + +- Explaining the design so that someone who knows Strapi can understand and someone who works on it can implement the proposal. +- Think about edge cases and include examples. + +# Example + +If the proposal requires changes to the current API or the creation of new ones, add a basic code example. + +# Tradeoffs + +What potential tradeoffs are involved with this proposal. + +- Complexity +- Workload of implementation +- Can this be implemented outside of Strapi's core packages +- How does this proposal integrate with the current features being implemented +- Cost of migrating existing Strapi applications (is it a breaking change?) +- Does implementing this proposal mean reworking teaching resources (videos, tutorials, documentation)? + +# Alternatives + +What are the alternatives? + +# Unresolved questions + +Optional, but suggested for first draft proposals. What parts of the design are still TBD(To be defined)? From b8dca94603d8378b4483f9031ca12fd0f34c72b5 Mon Sep 17 00:00:00 2001 From: Antoine <27826950+Antoine-lb@users.noreply.github.com> Date: Tue, 16 Aug 2022 16:02:41 +0200 Subject: [PATCH 2/4] Summary + motivation --- rfcs/xxxx-template.md | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/rfcs/xxxx-template.md b/rfcs/xxxx-template.md index e9122e1..49f4a25 100644 --- a/rfcs/xxxx-template.md +++ b/rfcs/xxxx-template.md @@ -1,16 +1,37 @@ -- Start Date: (fill in today's date, YYYY-MM-DD) +- Start Date: 2022-08-16 - RFC PR: (leave this empty) # Summary -Description of the proposed feature or proposed changes. +Add the option to convert all uploaded images to WebP or AVIF instead of just resizing them. This would be done via a **opt-in** parameter in `./config/plugins.js`. # Motivation -Please make sure to explain the motivation for this proposal. -It means explaining the use case(s) and the functional feature(s) this proposal is trying to solve. +WebP and AVIF are superior formats for the web and are growing in support very fast. -Try to only talk about the intent, not the proposed solution here. +It got to a point where some projects could decide to only work with these formats to improuve the user experience without adding engeneering complexity or hosting costs. + +One could even argue that this could make your service more ecologically friendly, by reducing the data transfered on every page load. + +### How much better? + +"WebP typically achieves an average of 30% more compression than JPEG" -- [Google WebP FAQ](https://developers.google.com/speed/webp/faq#:~:text=WebP%20typically%20achieves%20an%20average,help%20make%20the%20web%20faster.) + +- [Comparative study of WebP, JPEG and JPEG 2000, September 2010 - by Google](https://developers.google.com/speed/webp/docs/c_study) +- [WebP Compression Study - by Google](https://developers.google.com/speed/webp/docs/webp_studyhttps://developers.google.com/speed/webp/docs/webp_studyhttps://developers.google.com/speed/webp/docs/webp_study) +- [WebP vs AVIF - by avif.org](https://avif.io/blog/comparisons/avif-vs-webp/) + +TLDR: WebP competes with JPEG on image size. AVIF can have a great image quality without being too heavy. + +### How good is browser support? + +Look for yourself: +- [https://caniuse.com/webp](https://caniuse.com/webp) +- [https://caniuse.com/avif](https://caniuse.com/avif) + +As of Agust 2022 of the major browsers that don't support it: +- WebP: Only IE does not support it +- AVIF: Edge and other smaller browsers have no support, and Safari desktop has partial support # Detailed design From 8dfce0061072d6fb45c2b1aef6213f6728bedd8d Mon Sep 17 00:00:00 2001 From: Antoine <27826950+Antoine-lb@users.noreply.github.com> Date: Tue, 16 Aug 2022 16:41:40 +0200 Subject: [PATCH 3/4] first full draft --- rfcs/xxxx-template.md | 38 ++++++++++++++++++++++++++++---------- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/rfcs/xxxx-template.md b/rfcs/xxxx-template.md index 49f4a25..ec6260c 100644 --- a/rfcs/xxxx-template.md +++ b/rfcs/xxxx-template.md @@ -25,27 +25,42 @@ TLDR: WebP competes with JPEG on image size. AVIF can have a great image quality ### How good is browser support? -Look for yourself: -- [https://caniuse.com/webp](https://caniuse.com/webp) -- [https://caniuse.com/avif](https://caniuse.com/avif) - As of Agust 2022 of the major browsers that don't support it: - WebP: Only IE does not support it - AVIF: Edge and other smaller browsers have no support, and Safari desktop has partial support +Sources: +- [https://caniuse.com/webp](https://caniuse.com/webp) +- [https://caniuse.com/avif](https://caniuse.com/avif) + # Detailed design -Describe the proposal in detail: +This could be done directly in [/packages/core/upload/server/services/image-manipulation.js](https://github.com/strapi/strapi/blob/master/packages/core/upload/server/services/image-manipulation.js) file. + +A member of the community already had a prototype (no affiliation with him): +https://github.com/devgar/strapi/blob/243d914efeebfdb44b236af76689c30b73fed646/packages/strapi-plugin-upload/services/image-manipulation.js -- Explaining the design so that someone who knows Strapi can understand and someone who works on it can implement the proposal. -- Think about edge cases and include examples. +Basically it would instruct `sharp` package to transform to `webp` or `avif`. This would **not** require an aditional dependency, not even a new import in the file. # Example -If the proposal requires changes to the current API or the creation of new ones, add a basic code example. +Something like this: +```ts +// path: ./config/plugins.ts + +export default ({ env }) => ({ + upload: { + config: { + convertAllImagesTo: 'webp' | 'avif'; // To be defined + }, + }, +}); +``` # Tradeoffs +Even if I'm pretty confident that is a good decision for many of us, it is **opinionated**. This could be mitigated by adding more formats as targets like `png` or `jpeg`. + What potential tradeoffs are involved with this proposal. - Complexity @@ -57,8 +72,11 @@ What potential tradeoffs are involved with this proposal. # Alternatives -What are the alternatives? +I guess this could be done in a plugin. But this would require replacing the official `strapi-plugin-update` for a community one. This plugin is quite big and important, I wouldn't recommend replacing it with a community-maintained plugin. + +If is not in the official one, I wouldn't bother doing it. # Unresolved questions -Optional, but suggested for first draft proposals. What parts of the design are still TBD(To be defined)? +- Should it support many different formats (e.g. `png` and `jpeg`) or just work with `webp` and `avif` which are the ones that should be used? More formats would make it less opinionated but would add more maintenance, and may not be that relevant. +- How should the `./config/plugins.ts` look like? From 6a368a6353d1d0a3aa01017d415133594bfc98bb Mon Sep 17 00:00:00 2001 From: Antoine <27826950+Antoine-lb@users.noreply.github.com> Date: Tue, 16 Aug 2022 16:53:11 +0200 Subject: [PATCH 4/4] small fixes --- rfcs/xxxx-template.md | 28 +++++++++++----------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/rfcs/xxxx-template.md b/rfcs/xxxx-template.md index ec6260c..3c2e286 100644 --- a/rfcs/xxxx-template.md +++ b/rfcs/xxxx-template.md @@ -7,9 +7,9 @@ Add the option to convert all uploaded images to WebP or AVIF instead of just re # Motivation -WebP and AVIF are superior formats for the web and are growing in support very fast. +WebP and AVIF are superior formats for the web and support is growing very fast. -It got to a point where some projects could decide to only work with these formats to improuve the user experience without adding engeneering complexity or hosting costs. +It got to a point where some projects could decide to **only** work with these formats to improuve the user experience without adding engeneering complexity or hosting costs. One could even argue that this could make your service more ecologically friendly, by reducing the data transfered on every page load. @@ -21,13 +21,11 @@ One could even argue that this could make your service more ecologically friendl - [WebP Compression Study - by Google](https://developers.google.com/speed/webp/docs/webp_studyhttps://developers.google.com/speed/webp/docs/webp_studyhttps://developers.google.com/speed/webp/docs/webp_study) - [WebP vs AVIF - by avif.org](https://avif.io/blog/comparisons/avif-vs-webp/) -TLDR: WebP competes with JPEG on image size. AVIF can have a great image quality without being too heavy. - ### How good is browser support? -As of Agust 2022 of the major browsers that don't support it: +As of Agust 2022 of the major browsers that don't support it are: - WebP: Only IE does not support it -- AVIF: Edge and other smaller browsers have no support, and Safari desktop has partial support +- AVIF: Edge and other smaller browsers don't have support, and Safari desktop has partial support Sources: - [https://caniuse.com/webp](https://caniuse.com/webp) @@ -37,11 +35,15 @@ Sources: This could be done directly in [/packages/core/upload/server/services/image-manipulation.js](https://github.com/strapi/strapi/blob/master/packages/core/upload/server/services/image-manipulation.js) file. -A member of the community already had a prototype (no affiliation with him): +A member of the community already had a prototype (no affiliation): https://github.com/devgar/strapi/blob/243d914efeebfdb44b236af76689c30b73fed646/packages/strapi-plugin-upload/services/image-manipulation.js Basically it would instruct `sharp` package to transform to `webp` or `avif`. This would **not** require an aditional dependency, not even a new import in the file. +It will of course still resizes images like before (e.g. `large`, `medium` ...). + +These changes being applied only at the upload phase, would not require all the images to be reformatted making it pretty safe for retro-compatibility. And it can be turned on and off without much consequences. + # Example Something like this: @@ -59,16 +61,8 @@ export default ({ env }) => ({ # Tradeoffs -Even if I'm pretty confident that is a good decision for many of us, it is **opinionated**. This could be mitigated by adding more formats as targets like `png` or `jpeg`. - -What potential tradeoffs are involved with this proposal. - -- Complexity -- Workload of implementation -- Can this be implemented outside of Strapi's core packages -- How does this proposal integrate with the current features being implemented -- Cost of migrating existing Strapi applications (is it a breaking change?) -- Does implementing this proposal mean reworking teaching resources (videos, tutorials, documentation)? +- Even if I'm pretty confident that is a good decision for many of us, it is **opinionated**. This could be mitigated by adding more formats as targets like `png` or `jpeg`. +- I don't know how computer intensive it is to do the transformation. # Alternatives