Make WordPress Core

Opened 19 months ago

Closed 18 months ago

Last modified 18 months ago

#38793 closed enhancement (fixed)

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

Reported by: Presskopp Owned by: joemcgill
Milestone: 4.7 Priority: low
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: 2nd-opinion has-patch
Focuses: Cc:


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

Attachments (5)

header.jpg (143.7 KB) - added by Presskopp 19 months ago.
header.2.jpg (47.9 KB) - added by lukecavanagh 19 months ago.
header.jpg optimized
header-tinypng.jpg (131.3 KB) - added by lukecavanagh 19 months ago.
header.jpg TinyPNG optimized
header (75).jpg (112.2 KB) - added by Presskopp 19 months ago.
header (75)_mini.jpg (97.0 KB) - added by Presskopp 19 months ago.

Download all attachments as: .zip

Change History (19)

19 months ago

#1 @Presskopp
19 months ago

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

This ticket was mentioned in Slack in #core-themes by joemcgill. View the logs.

19 months ago

#3 @joemcgill
19 months ago

  • Milestone changed from Awaiting Review to 4.7
  • Owner set to joemcgill
  • Status changed from new to reviewing

#4 @davidakennedy
19 months ago

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

#5 @joemcgill
19 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

19 months ago

header.jpg optimized

19 months ago

header.jpg TinyPNG optimized

#6 @lukecavanagh
19 months ago


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

Last edited 19 months ago by lukecavanagh (previous) (diff)

#7 @Presskopp
19 months ago

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).

#8 @Presskopp
19 months ago

fwiw, 97KB

#9 @lukecavanagh
19 months ago


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

#10 @joemcgill
19 months ago

  • Priority changed from normal to low
  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

#11 follow-up: @joemcgill
18 months ago

  • Keywords 2nd-opinion has-patch added

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.

Last edited 18 months ago by joemcgill (previous) (diff)

#12 in reply to: ↑ 11 @melchoyce
18 months ago

Replying to joemcgill:

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

Agreed — the other versions have visible artifacting.

#13 @joemcgill
18 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#14 @Presskopp
18 months ago

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.

Note: See TracTickets for help on using tickets.