WordPress.org

Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#17641 closed enhancement (fixed)

Tweaks and optimizations for Twenty Eleven images

Reported by: demetris Owned by: iandstewart
Milestone: 3.2 Priority: normal
Severity: normal Version: 3.2
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

See tweaked images in the linked ZIP file. The tweaks are:

  1. A light grey border added to the preview image of the default colour scheme (light.png) so that it works better against the white background of the default Dashboard theme.
  2. Lossless compression of all PNG images of 2011.
  3. Removal of metadata from the JPEG headers and from their thumbnails, which saves quite a few kilobytes.

I run the PNG images through optipng, advpng, and then optipng again, at extreme settings.

The JPEG images I simply dropped on to Trimage (a tool similar to, and inspired by, ImageOptim for OSX).

A further optimization for the JPEG headers would be to apply lossy compression, which will give us huge gains in size. I will open another ticket for that.

Attachments (1)

screenshot.jpg (24.0 KB) - added by demetris 8 years ago.
Screenshot image converted from PNG to JPG and shrunk from 70KB to 24KB

Download all attachments as: .zip

Change History (18)

#2 @nacin
8 years ago

  • Milestone changed from Awaiting Review to 3.2
  • Owner set to nacin
  • Status changed from new to reviewing

We also need to shed the PSDs.

#3 @demetris
8 years ago

  • Keywords has-patch dev-feedback added

Here is the further, drastic step of optimization:

Applying lossy compression to the JPEG header images of Twenty Eleven.

As you can see in the linked ZIP archive, there are huge gains to be had at the cost of negligible loss. (The differences are certainly obvious in AB comparisons and I imagine that in many cases they would be easy to ABX too, but that is not very relevant considering the intended use of the images.)

The tool I used was convert from the ImageMagick suite, version 6.6.9.7 (current version in Debian Sid; upstream is currently at 6.7.0). I compressed the images at three different quality levels: 50, 62.5 and 75. As a base I used the tweaked images from the above-linked ZIP archive, which have had their metadata stripped but are otherwise identical to the originals.

Using quality 50 the total size for the eight headers goes down from 1.917.360 to 327.880 bytes, which is a gain of 83%! I submit the results of all three compression levels, along with the original images, for your consideration:

http://op111.net/u/wp/t17658-twentyeleven-headers.zip

(For my part, I am happy with the result in the q50 images except maybe for one image, lanterns.jpg.)

#4 @aaroncampbell
8 years ago

I looked through all the images, and I'm impressed. I'd be happy with the q50 on ALL the images. Even with the lanterns, the lines on the lanterns blur but still look fine to me.

#5 @iandstewart
8 years ago

With the exception of Hanoi, Wheel, and Willow. They all look OK at q50. I think those three are better at q625.

#6 @matveb
8 years ago

Thanks for doing this effort. Looking at all the variants, I wouldn't go for the highest compression at q50; it seems too low quality with details lost and blocking noticeable. q75 seems like a decent trade-off in image size vs quality, though.

#7 @westi
8 years ago

  • Component changed from Themes to Bundled Theme

#8 @demetris
8 years ago

Thanks, everyone, for taking the time to view the images and comment.

A good thing to note is that, even with the moderate q75, we save 1.36MB for the WordPress package and, even more important, 173KB on average for every cache miss in sites using Twenty Eleven.

Another interesting thing is that, again with the moderate q75, we already have a better compression ratio that in Twenty Ten.

In Twenty Ten the header images were on average 48,161 bytes, and their bitmaps were 558,414 bytes each. So, we were at 8.62% of the bitmap size.

In Twenty Eleven the q75 images are on average 62,610 bytes, and their bitmaps are 864,054 bytes each. (The 2011 header images are both wider and taller.) This means we are at 7,25% of the bitmap size.

#9 @dd32
8 years ago

In [18212]:

Remove the psd's from Twenty Eleven. See #17641

#10 @iandstewart
8 years ago

  • Cc iandstewart added

I'm ready to commit this with the tweaked images provided by demetris, including the q75 header images.

#11 @iandstewart
8 years ago

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

In [18215]:

Twenty Eleven: reduce image sizes; Props demetris; Fixes #17641

#12 @demetris
8 years ago

  • Keywords dev-feedback removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Here is one more batch, containing the header thumbnails compressed at q75:

http://op111.net/u/wp/t17658-twentyeleven-headers-thumbs-q75.zip

The ZIP archive has both the original images and the compressed ones, for a quick AB comparison. Originals are renamed to *-original.jpg. Compressed images have the same name as the originals.

The gain for this is 108.57 KB (the size of the 8 original thumbnails is 157,495 bytes; the 8 compressed ones weigh in at 46,321 bytes).

#13 @dd32
8 years ago

The screenshot.png can probably be reduced a bit, thanks to it's small size a jpeg (~20kb ish?) may even do there.

It may only be 50k, but that file can probably half in size.

#14 @demetris
8 years ago

Good call!

I simply did:

convert screenshot.png screenshot.jpg

and the image went from 70.1KB to 23.9KB.

I am attaching the JPG.

@demetris
8 years ago

Screenshot image converted from PNG to JPG and shrunk from 70KB to 24KB

#15 @iandstewart
8 years ago

The thumbnails and updated screenshot look OK to me. (Although we'll need an updated screenshot if #17741 goes in)

#16 @nacin
8 years ago

  • Owner changed from nacin to iandstewart
  • Status changed from reopened to assigned

Reassigning to primary committer on this.

#17 @iandstewart
8 years ago

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

In [18245]:

Twenty Eleven: compressed header thumbnails and theme screenshot; Props demetris; Fixes #17641

Note: See TracTickets for help on using tickets.