Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 6 months ago

#38793 closed enhancement (fixed)

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

Reported by: presskopp's profile Presskopp Owned by: joemcgill's profile 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. can do so and here's the result

compressed image is 143KB (vs 209KB)

@joemcgill likes the idea, he said:

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 7 years ago.
header.2.jpg (47.9 KB) - added by lukecavanagh 7 years ago.
header.jpg optimized
header-tinypng.jpg (131.3 KB) - added by lukecavanagh 7 years ago.
header.jpg TinyPNG optimized
header (75).jpg (112.2 KB) - added by Presskopp 7 years ago.
header (75)_mini.jpg (97.0 KB) - added by Presskopp 7 years ago.

Download all attachments as: .zip

Change History (20)

7 years ago

#1 @Presskopp
7 years ago

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

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

7 years ago

#3 @joemcgill
7 years ago

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

#4 @davidakennedy
7 years ago

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

#5 @joemcgill
7 years 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.

7 years ago

header.jpg optimized

7 years ago

header.jpg TinyPNG optimized

#6 @lukecavanagh
7 years ago


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

Last edited 7 years ago by lukecavanagh (previous) (diff)

#7 @Presskopp
7 years 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).

7 years ago

#8 @Presskopp
7 years ago

fwiw, 97KB

#9 @lukecavanagh
7 years 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
7 years 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
7 years 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 7 years ago by joemcgill (previous) (diff)

#12 in reply to: ↑ 11 @melchoyce
7 years 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
7 years 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
7 years 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, seems it's more intrusive than I expected.

#15 @emmaevy
19 months ago

Yes above tools are awesome compressed
header(75).jpg (112.2KB)
header (75)_mini.jpg (97.0KB)
Header image file from the original size. as i checked on this tool Link:jpeg Compressor The revised version is 143KB in size compared to the original's 209KB, which is awesome.

Last edited 6 months ago by emmaevy (previous) (diff)
Note: See TracTickets for help on using tickets.