Twenty Seventeen: Compress the header image (mostly visibly lossless)

[Presskopp]

To save bandwidth or to be SEO friendly, or just because it needs less space :),
I suggest to exchange the header image with a compressed version.

tinjpg.com can do so and here's the result

compressed image is 143KB (vs 209KB)

@joemcgill likes the idea, he said:
​https://wordpress.slack.com/archives/core-themes/p1479168211000348

Ran DSSIM on the two images and they’re 99.8% visually similar, which is nearly indistinguishable

[Presskopp]

I'm sorry of course it's tinyjpg.com doing the job - thank you!

[davidakennedy]

This seems fine to me. For what it's worth – Image Optim was used to compress the image before its commit: ​https://imageoptim.com/

[joemcgill]

In 39248:

Twenty Seventeen: Compress the default header image.

This replaces the default header.jpg with a compressed version.
The original was 209KB and the new version is 143KB with almost no
distinguishable visual loss.

Props Presskopp.
Fixes #38793.

[lukecavanagh]

header.jpg optimized

[lukecavanagh]

header.jpg TinyPNG optimized

[lukecavanagh]

@Presskopp

The header.jpg can be image optimized even further down to 130kb or under 50kb.

[Presskopp]

Is it a competition now :) ?

I see artifacts in your examples, of course we can discuss if we need to keep all the pixels. I made another attempt, which for me is optically still ok (112kb).

[Presskopp]

fwiw, 97KB

[lukecavanagh]

@Presskopp

Both the 97kb and 112kb versions look good. I see nothing wrong with making sure content in a default theme is optimized.

[joemcgill]

Thanks @Presskopp and @lukecavanagh for working on this. While I think the version we used in [39248] is probably adequate, there's no harm in trying to optimize further as long as we're not degrading the quality significantly. I'll take another SSIM measurement of these against the original to make sure we're not over-compressing.

[joemcgill]

Some measurements here using DSSIM against the original before [39248] (lower scores are better):

Original (209KB)
header.jpg (143.7KB) – 0.002244
header(75).jpg (112.2KB) – 0.003032
header-tinypng.jpg (131.3KB) - 0.003752
header (75)_mini.jpg (97.0KB) - 0.004268
header.2.jpg (47.9KB) – 0.008374

Based on these numbers, I think header (75).jpg is the best option, but would like a second opinion from @davidakennedy, @karmatosed, or @melchoyce before compressing this image further.

[melchoyce]

Replying to joemcgill:

Based on these numbers, I think header (75).jpg is the best option

Agreed — the other versions have visible artifacting.

[joemcgill]

In 39279:

Twenty Seventeen: Additional default header image optimizations.

This is a follow-up to [39248] that applies a bit more compression to
the default header image in Twenty Seventeen.

Props Presskopp, lukecavanagh.
Fixes #38793.

[Presskopp]

Side note:

Interesting, the difference:

header(75).jpg (112.2KB) – 0.003032
header (75)_mini.jpg (97.0KB) - 0.004268

because the 2nd was calculated out of the 1st using ​http://www.jpegmini.com/, seems it's more intrusive than I expected.