Add webp image conversion to core's install profile's image style

I think we can do this now that Catalina is out of support, but I've asked other committers what they think too.

Note that #3213491: Add fallback format support to responsive images would make OSX Catalina a non-issue, but I'm not sure we should block this issue on that one. It'll still be useful later on for AVIF and other formats.

Discussed this with @lauriii and he also thinks we should go ahead here despite Catalina - given it's been out of support since November, Apple's not supporting it so neither should we.

The core change won't prevent sites reverting back to png or using the contrib webp module with fallback support if they still want to, it's just making defaults (much) faster/smaller for everyone else.

Untagging now there's been a +1 from a front end framework manager, and looking at things like fermilab dropping support has also reassured me it should be fine. Also anecdotally I know one person who was still on OS Catalina last year, and I asked them last week if they still are, and they're not any more. We can't get proper usage data because Safari reports Big Sur as Catalina, but there's every other sign that people are getting off it.

It probably needs to CR and upgrade path but let;s start from all places I can find with git grep 'png gif jpg jpeg'

Probably it makes sense to convert images in Demo umami from jpeg as each file becoming smaller more the 15KB

find . -type f -name "*.jpg" -exec sh -c 'convert "$1" "${1%.jpg}.webp"' _ {} \;

$ ls -la core/profiles/demo_umami/modules/demo_umami_content/default_content/images 
-rw-rw-r--    1 web-user web-grou     66852 Jun 15 01:07 borscht-with-pork-ribs-umami.jpg
-rw-r--r--    1 web-user web-grou     45164 Jun 15 01:14 borscht-with-pork-ribs-umami.webp
-rw-rw-r--    1 web-user web-grou    100481 Jun 15 01:07 chili-sauce-umami.jpg
-rw-r--r--    1 web-user web-grou     80054 Jun 15 01:14 chili-sauce-umami.webp
-rw-rw-r--    1 web-user web-grou     30431 Jun 15 01:07 chocolate-brownie-umami.jpg
-rw-r--r--    1 web-user web-grou     16326 Jun 15 01:14 chocolate-brownie-umami.webp
-rw-rw-r--    1 web-user web-grou     62307 Jun 15 01:07 crema-catalana-umami.jpg
-rw-r--r--    1 web-user web-grou     42422 Jun 15 01:14 crema-catalana-umami.webp
-rw-rw-r--    1 web-user web-grou     36097 Jun 15 01:27 heritage-carrots.avif
-rw-rw-r--    1 web-user web-grou     36372 Jun 15 01:07 heritage-carrots.jpg
-rw-r--r--    1 web-user web-grou     16888 Jun 15 01:14 heritage-carrots.webp
-rw-rw-r--    1 web-user web-grou    114984 Jun 15 01:07 home-grown-herbs.jpg
-rw-r--r--    1 web-user web-grou     97352 Jun 15 01:14 home-grown-herbs.webp
-rw-rw-r--    1 web-user web-grou     70160 Jun 15 01:07 mediterranean-quiche-umami.jpg
-rw-r--r--    1 web-user web-grou     50504 Jun 15 01:14 mediterranean-quiche-umami.webp
-rw-rw-r--    1 web-user web-grou     49938 Jun 15 01:07 mojito-mocktail.jpg
-rw-r--r--    1 web-user web-grou     30354 Jun 15 01:14 mojito-mocktail.webp
-rw-rw-r--    1 web-user web-grou     92740 Jun 15 01:07 mushrooms-umami.jpg
-rw-r--r--    1 web-user web-grou     72760 Jun 15 01:14 mushrooms-umami.webp
-rw-rw-r--    1 web-user web-grou     76171 Jun 15 01:07 oatmeal-fruit-syrup-topping.jpg
-rw-r--r--    1 web-user web-grou     55288 Jun 15 01:14 oatmeal-fruit-syrup-topping.webp
-rw-rw-r--    1 web-user web-grou     81301 Jun 15 01:07 pizza-umami.jpg
-rw-r--r--    1 web-user web-grou     59940 Jun 15 01:14 pizza-umami.webp
-rw-rw-r--    1 web-user web-grou    100645 Jun 15 01:07 supermarket-savvy-umami.jpg
-rw-r--r--    1 web-user web-grou     78198 Jun 15 01:14 supermarket-savvy-umami.webp
-rw-rw-r--    1 web-user web-grou     38674 Jun 15 01:07 thai-green-curry-umami.jpg
-rw-r--r--    1 web-user web-grou     22930 Jun 15 01:14 thai-green-curry-umami.webp
-rw-rw-r--    1 web-user web-grou     30490 Jun 15 01:07 umami-bundle.png
-rw-rw-r--    1 web-user web-grou    261638 Jun 15 01:07 vegan-brownies-hero-umami.jpg
-rw-r--r--    1 web-user web-grou    234494 Jun 15 01:14 vegan-brownies-hero-umami.webp
-rw-rw-r--    1 web-user web-grou    109982 Jun 15 01:07 vegan-chocolate-nut-brownies.jpg
-rw-r--r--    1 web-user web-grou     87512 Jun 15 01:14 vegan-chocolate-nut-brownies.webp
-rw-rw-r--    1 web-user web-grou     65650 Jun 15 01:07 vegan-chocolate.jpg
-rw-r--r--    1 web-user web-grou     49282 Jun 15 01:14 vegan-chocolate.webp
-rw-rw-r--    1 web-user web-grou    225830 Jun 15 01:07 veggie-pasta-bake-hero-umami.jpg
-rw-r--r--    1 web-user web-grou    289676 Jun 15 01:14 veggie-pasta-bake-hero-umami.webp
-rw-rw-r--    1 web-user web-grou    102082 Jun 15 01:07 veggie-pasta-bake-umami.jpg
-rw-r--r--    1 web-user web-grou     77416 Jun 15 01:14 veggie-pasta-bake-umami.webp
-rw-rw-r--    1 web-user web-grou     65418 Jun 15 01:07 victoria-sponge-umami.jpg
-rw-r--r--    1 web-user web-grou     46326 Jun 15 01:14 victoria-sponge-umami.webp
-rw-rw-r--    1 web-user web-grou     31072 Jun 15 01:07 watercress-soup-umami.jpg
-rw-r--r--    1 web-user web-grou     15878 Jun 15 01:14 watercress-soup-umami.webp

Probably duplicate #3282679: Allow user-uploaded WebP images everywhere in Drupal by default: image fields, media library, text editors

fix cspell

Change looks good.

Would be nice to see this get into 10.2 early.

I searched for "jpeg", excluding tests and "webp", and found a few other places we might want to consider adding webp while we are here - I haven't checked any of these in detail and not sure it should be added, but we should at least consider these:

core/assets/scaffold/files/gitattributes:*.jpeg    -text diff
core/assets/scaffold/files/robots.txt:Allow: /core/*.jpeg
core/assets/scaffold/files/robots.txt:Allow: /profiles/*.jpeg
core/lib/Drupal/Core/File/file.api.php:  $cdn_extensions = ['css', 'js', 'gif', 'jpg', 'jpeg', 'png'];
core/modules/ckeditor5/ckeditor5.ckeditor5.yml:          types: ["jpeg", "png", "gif"]
core/modules/ckeditor5/src/Controller/CKEditor5ImageController.php:      'file_validate_extensions' => ['gif png jpg jpeg'],
core/modules/editor/src/Form/EditorImageDialog.php:        'file_validate_extensions' => ['gif png jpg jpeg'],
core/modules/file/src/Upload/FileUploadHandler.php:  const DEFAULT_EXTENSIONS = 'jpg jpeg gif png txt doc xls pdf ppt pps odt ods odp';
core/modules/image/src/Plugin/Field/FieldType/ImageItem.php:    $extensions = array_intersect(explode(' ', $settings['file_extensions']), ['png', 'gif', 'jpg', 'jpeg']);
core/modules/media/media.install:  $files = $file_system->scanDirectory($source, '/.*\.(svg|png|jpg|jpeg|gif)$/');

Actually I see #3282679: Allow user-uploaded WebP images everywhere in Drupal by default: image fields, media library, text editors covers some of these.

I think it's worth leaving the image derivative issue (this one) and the upload issues separate, unless they really need to be combined - just to have less things to to worry about in each.

OK, let's just land this here, and leave the other one open to handle the remaining cases.

Committed and pushed a87a72fa063 to 11.x (10.2.x). Thanks!

Crossposted with the bot.

Added a release notes snippet, don't think there's anything else to mention so leaving a CR. Also tagging for 10.2.0 release highlights since this will be a nice performance improvement on new sites. Also not sure how many site admins actually know the webp option is in core.

Great to see this merged into Drupal core!

I noticed that the Lighthouse Stack Pack for Drupal for the `modern-image-formats` audit point to this documentation : https://www.drupal.org/docs/core-modules-and-themes/core-modules/image-m... which makes no mention of WebP or how to enable modern image formats. Should we update the documentation here, or is there a better place we can link the Stack Pack message? Since the Stack Packs are open source we can proposes changes for the link or recommendation text directly on the repository.

Even if i've been waiting for real webp support for a long time, I sadly think doing so without fixing at least Add fallback format support to responsive images is not a really a news, as lot of old mac users cannot update their os (eg. lots of artists still use macbook pro 2012, not mentioning poor people). It means that doing this we'll collectively enforce Apples programmed obsolescence by providing massivelly degraded web experience for people not able to change their computer every 6 years as Apple now forces people to to). In a more general way we should provide a more robust out of the box fallback methods to ease adopting new images and video formats like avif.
Do you think there is a chance to see fallback issue embedded in 10.2 too ?

This issue didn't actually add webp conversion to core's shipped image styles at all, just as an option for upload to image fields (which is fine, but not what the issue was originally for) I've opened #3406267: All core shipped image styles should include webp conversion to do that bit.

Untagging from 10.2.0 release highlights, hopefully we can get the follow-up into 10.3/11.x