About page 7.1: Optimize images served from CDN

[peterwilsoncc]

The images served from s.w.org for the WordPress 7.1 about page are transferring 1.52MB compared to 125 kB for the WordPress 7.0 about page.

Even on a high speed domestic connection, this is causing a noticeable flash as the images are loaded.

I think these images can be optimized to require significantly less data:

• the four header images on each of the about sub pages
• the feature images on the main about page.

[iamchitti]

I had a look for anything on the core side that could handle this and couldn't find any image optimization step - core only holds the URLs, and the files themselves were removed from src/wp-admin/images/ in [63182]. So the fix will need to happen on the s.w.org side.

On the cause: the 7.1 images are lossless WebP, where the 7.0 ones were lossy. Dimensions are unchanged (features 900x900, headers 2000x600), so it's purely the encoding mode - the RIFF chunks read VP8L in 7.1 vs VP8 in 7.0. The 7.1 files also carry an embedded ICC profile, which suggests they went up straight from a design-tool export rather than through a compression pass.

Once replacements are in place, the core-side change is just a ?ver= bump — four URLs in wp-admin/about.php and ten in wp-admin/css/about.css. Happy to put that patch afterwards.

[markoserb]

Hi there,

lossy optimization simply doesn't work. We have gradient elements that don't do well when optimized. It looks like low res photo once 'lossy' or even 'losssless' optimization is done. No matter if it's from a source that is png, jpg, or done from webp itself — the optimization is bad.

I also think 7.0 images don't look too great due optimization. They are better because solid colors are used instead of gradients, but still their optimization is seen on bigger screens easily. I don't think this is good.

Nevertheless. Can you help me understand what difference these images (sizes) make in contrast to the ones that are optimized in load time on the 'worst' case-scenarios? Or is it something else? I am really naive here, but if I can learn well, we could be better prepared the next time. Maybe we don't use gradients in release's identity, solely for this reason, etc. But to repeat, the images don't do well if optimized. See attachment in my next comment.