#2635, #3290: Add WebP conversion step to all included image styles.

[joeparsons]

Description

Adds webp conversion step to all included image styles, similar to how Drupal core updated all of its included image styles. See: https://www.drupal.org/node/3421405

Release notes

This release adds a WebP conversion step to all image styles provided by AZ Quickstart and [Drupal core](https://www.drupal.org/node/3421405). A [patch for Drupal core](https://www.drupal.org/project/drupal/issues/3310963) has also been included that the adds a directive to the `.htaccess` file included with Drupal core to ensure the WebP image MIME type is supported.  Sites hosted on Apache web servers may need to [update their .htaccess files](https://www.drupal.org/node/3456338) to take advantage of this improvement.

Related issues

#2635
#3290

How to test

Media images / image fields should be rendered as WebP files.

Types of changes

Arizona Quickstart (install profile, custom modules, custom theme)

• Patch release changes
  • Bug fix
  • Accessibility, performance, or security improvement
  • Critical institutional link or brand change
  • Adding experimental module
  • Update experimental module
• Minor release changes
  • New feature
  • Breaking or visual change to existing behavior
  • Upgrade experimental module to stable
  • Enable existing module by default or database update
  • Non-critical brand change
  • New internal API or API improvement with backwards compatibility
  • Risky or disruptive cleanup to comply with coding standards
  • High-risk or disruptive change (requires upgrade path, risks regression, etc.)
• Other or unknown
  • Other or unknown

Drupal core

• Patch release changes
  • Security update
  • Patch level release (non-security bug-fix release)
  • Patch removal that's no longer necessary
• Minor release changes
  • Major or minor level update
• Other or unknown
  • Other or unknown

Drupal contrib projects

• Patch release changes
  • Security update
  • Patch or minor level update
  • Add new module
  • Patch removal that's no longer necessary
• Minor release changes
  • Major level update
• Other or unknown
  • Other or unknown

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[trackleft]

LGTM, I tested to see how much this reduced the size of certain pages as well but didn't see a drastic improvement.

[HenryzGreenberg]

I want to run a comparison between JPG and WEBP Versions of the same page:
JPG: https://7b5e2985-cedf-4a13-ab91-3a35916c835d--pr-3418.probo.build/pages/photo-galleries
WebP: https://7b5e2985-cedf-4a13-ab91-3a35916c835d--pr-3418.probo.build/pages/photo-galleries-webp

However, when i upload images they still render as .jpg. Please Advise. What can we do here?
//H

[joeparsons]

Possibly related Drupal core issue: https://www.drupal.org/project/drupal/issues/3413632

[joeparsons]

I want to run a comparison between JPG and WEBP Versions of the same page: JPG: https://7b5e2985-cedf-4a13-ab91-3a35916c835d--pr-3418.probo.build/pages/photo-galleries WebP: https://7b5e2985-cedf-4a13-ab91-3a35916c835d--pr-3418.probo.build/pages/photo-galleries-webp

However, when i upload images they still render as .jpg. Please Advise. What can we do here? //H

Hi @HenryzGreenberg. Thanks for testing! It looks like there is an issue with the web server configuration on ProboCI that is preventing the correct MIME type for WebP images from getting sent to web browsers.

I've applied this PR's changes to a dev version of an existing site (I'll DM you the details) where this issues doesn't seem to exist.

[joeparsons]

Found an Apache-specific RTBC core issue/patch for the mime type issue:
https://www.drupal.org/project/drupal/issues/3310963

[joeparsons]

2024-05-17

• We should test on IIS somehow
• We should verify that there aren't other Apache edge cases (e.g. different Apache module names) that aren't covered by the htaccess patch
• We should also do some lighthouse testing to see how much difference this change makes

[HenryzGreenberg]

page with jpg.pdf
page with webp.pdf

I ran both sites through Lighthouse as a rudimentary test: JPG vs. WEBP

Performance Metrics

Metric	JPG	WEBP	Difference
Performance Score	67	74	+7
First Contentful Paint	2.7s	1.7s	-1.0s
Largest Contentful Paint	2.8s	2.4s	-0.4s
Speed Index	3.9s	3.3s	-0.6s
Total Blocking Time	0ms	0ms	0ms
Cumulative Layout Shift	0.003	0.021	+0.018

General Observations

• Performance: The WEBP version shows improvement in performance metrics, particularly in First Contentful Paint and Largest Contentful Paint.
• Accessibility: Both versions score equally high, indicating robust accessibility.
• Best Practices: Slightly lower for WEBP, (potentially due to differences in handling resources)
• SEO: Both versions perform equally well.

While the test was only looking at jpg vs Webp performance it did move the needle slightly. It looks like there are other recommendations from Lighthouse that would further move the needle:

1. Prioritize performance optimizations identified for both versions, such as eliminating render-blocking resources and minifying JavaScript.
2. Leverage the WEBP format for its better performance metrics, particularly for reducing initial load times. <-- In Progress
3. Reduce unused CSS and JavaScript for the WEBP version to further enhance performance.

Grain of Salt
I do think this is a step in the right direction but also I want to be sure development time is used wisely. I ran the test multiple times and each time got difference performance scores for both websites. In some cases, the Jpg version out performed the Webp version. I know there are tons of variables that can impact score such as network conditions, server performance, and the device used during the test. Even slight differences in these factors can lead to varying scores. I'd be interested to see what scores other see and perhaps get an average vs relying on just the report here.

[trackleft]

Possibly update https://github.com/az-digital/az-quickstart-pantheon/blob/master/web/sites/default/settings.upstream.php#L62 with webp files

[joeparsons]

Possibly update https://github.com/az-digital/az-quickstart-pantheon/blob/master/web/sites/default/settings.upstream.php#L62 with webp files

Good idea 👍🏻