Optimize about page images

[peterwilsoncc]

Replaces the about page images with optimized versions.

Caution

For testing purposes, I've deployed the about page images to my server. These will be deleted so do not commit until these have been deployed on to the WordPress.org CDN

Trac ticket: Core-65854

For testing purposes, force RTL versions of the headers by running document.documentElement.setAttribute( 'dir', 'rtl' ); in your browser console or document.documentElement.removeAttribute( 'dir' ); to force LTR versions.

Optimization details

Squoosh settings: WebP, Effort 6 (max), Quality 80
SVGO: Defaults used on https://jakearchibald.github.io/svgomg/

When comparing the webp images in Squoosh, I was viewing the images at 50% size on a retina screen as that's the way they will be viewed on the page as they are generated at 2x.

The size references refer to the amount of data transferred rather than the raw size of the image.

Image Name	Previous size	New size	Optimizer
about-feature-01.webp	488 kB	26 kB	squoosh
about-feature-02.webp	288 kB	61 kB	squoosh
about-feature-03.webp	139 kB	11 kB	squoosh
about-feature-04.webp	294 kB	15 kB	squoosh
about-header-credits-rtl	308 kB	1.2 kB	webp -> SVG, SVGO
about-header-credits	375 kB	1.2 kB	webp -> SVG, SVGO
about-header-default-rtl	308 kB	1.6 kB	webp -> SVG, SVGO
about-header-default	308 kB	1.57 kB	webp -> SVG, SVGO
about-header-freedoms-rtl	308 kB	1.1 kB	webp -> SVG, SVGO
about-header-freedoms	386 kB	1.1 kB	webp -> SVG, SVGO
about-header-get-involved-rtl	308 kB	1.0 kB	webp -> SVG, SVGO
about-header-get-involved	162 kB	1.0 kB	webp -> SVG, SVGO
about-header-privacy-rtl	358 Kb	1.0 kB	webp -> SVG, SVGO
about-header-privacy	356 kB	1.0 kB	webp -> SVG, SVGO
about-release-badge	3.65 kB	2.38 kB	webp -> SVG, SVGO

Use of AI Tools

Nope.

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props peterwilsoncc, wildworks, mukesh27.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[mukeshpanchal27]

@peterwilsoncc Since the majority of the images are downloaded from the s.w.org server rather than the local WordPress installation, it's better to use an optimized version so they load faster.

I think it would be better to land the optimized version.

[t-hamano]

It seems that it is recommended to place these SVG images locally.
https://make.wordpress.org/core/handbook/about/release-cycle/preparing-the-about-page/#:~:text=The%20following%20are%20exported%20as%20SVG%20and%20saved%20locally.

Alternatively, we could inline the CSS, as was done for the 6.8 and 6.9 releases.

• https://github.com/WordPress/wordpress-develop/blob/6.9/src/wp-admin/css/about.css#L582
• https://github.com/WordPress/wordpress-develop/blob/6.8/src/wp-admin/css/about.css#L579

[peterwilsoncc]

@t-hamano I've moved the SVGs to local images in 7bb4631

As the total image weight is relatively large (16K total), I've kept them as separate files in order not to blow up the CSS.