WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 4 months ago

Last modified 4 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:

Description

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

Download all attachments as: .zip

Change History (19)

@Presskopp
4 months ago

#1 @Presskopp
4 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.


4 months ago

#3 @joemcgill
4 months ago

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

#4 @davidakennedy
4 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
4 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.

@lukecavanagh
4 months ago

header.jpg optimized

@lukecavanagh
4 months ago

header.jpg TinyPNG optimized

#6 @lukecavanagh
4 months ago

@Presskopp

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

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

#7 @Presskopp
4 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
4 months ago

fwiw, 97KB

#9 @lukecavanagh
4 months ago

@Presskopp

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

#10 @joemcgill
4 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
4 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 4 months ago by joemcgill (previous) (diff)

#12 in reply to: ↑ 11 @melchoyce
4 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
4 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
4 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.