Make WordPress Core

Opened 9 years ago

Last modified 3 years ago

#30587 new enhancement

SVG and PNG Images in UI Should Be Optimized

Reported by: ckoerner's profile ckoerner Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Build/Test Tools Keywords: has-patch
Focuses: Cc:

Description

While nothing Earth-shattering, perhaps it would be wise to establish a best practice of optimizing images used in the UI of WordPress before committing them?

Using ImageOptim (a GUI wrapper for pngcrush) and svgo I was able to save an average of 8.7% per PNG and an average 15.25% for SVG files.

A 11% decrease in SVG file sizes isn't that bad. Maybe more important for higher-traffic sites, but all users would benefit.

See Also
*https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
*http://scribdtech.wordpress.com/2011/09/07/shrink-your-ios-app-by-turning-png-compression-up-to-11/

Attachments (6)

Screen Shot 2014-12-03 at 9.27.15 AM.png (79.7 KB) - added by ckoerner 9 years ago.
pngcrush output
Screen Shot 2014-12-03 at 9.27.15 AM.2.png (79.7 KB) - added by ckoerner 9 years ago.
svgo output
Screen Shot 2014-12-03 at 9.28.22 AM.png (353.9 KB) - added by ckoerner 9 years ago.
pngcrush outtput
30587.patch (656 bytes) - added by netweb 9 years ago.
30587.1.diff (739 bytes) - added by netweb 7 years ago.
wp-admin-images-optimized.zip (171.2 KB) - added by lukecavanagh 7 years ago.
Image optimized wp-admin images

Download all attachments as: .zip

Change History (18)

@ckoerner
9 years ago

pngcrush output

@ckoerner
9 years ago

pngcrush outtput

#1 @helen
9 years ago

We have and use a grunt task as a part of precommit for imagemin that handles png/jpg/gif/jpeg in wp-admin/images, wp-includes/images, and our TinyMCE theme. Not sure what bundled themes do, as they are not included here, and if we were to look at SVG optimization, that should also be a part of grunt precommit. We would still exclude changes to external libraries such as MediaElement.js, though, which your screenshots appear to include.

#2 follow-up: @jorbin
9 years ago

  • Component changed from General to Build/Test Tools
  • Milestone changed from Awaiting Review to Future Release

I think adding in grunt-svgmin or something similar makes sense as a compliment to our current image minification.

If I remember correctly, the reason we don't touch default themes is that we don't want to compress the screenshots. This seems like something we can write a configuration against.

#3 in reply to: ↑ 2 @netweb
9 years ago

  • Keywords close added

Replying to jorbin:

I think adding in grunt-svgmin or something similar makes sense as a compliment to our current image minification.

Our current grunt-contrib-imagemin fully supports SVG minification:

If I remember correctly, the reason we don't touch default themes is that we don't want to compress the screenshots. This seems like something we can write a configuration against.

Easy enough, see inline patch: (Edit: Updated to exclude 3rd party Genericons library)

  • Gruntfile.js

     
    416416                                cwd: SOURCE_DIR,
    417417                                src: [
    418418                                        'wp-{admin,includes}/images/**/*.{png,jpg,gif,jpeg}',
    419                                         'wp-includes/js/tinymce/skins/wordpress/images/*.{png,jpg,gif,jpeg}'
     419                                        'wp-includes/js/tinymce/skins/wordpress/images/*.{png,jpg,gif,jpeg}',
     420                                        'wp-content/themes/twenty*/**/*.{png,jpg,gif,jpeg,svg}',
     421                                        '!wp-content/themes/twenty*/screenshot.png',
     422                                        '!wp-content/themes/twenty*/**/{Genericons.svg,genericons-regular-webfont.svg}'
    420423                                ],
    421424                                dest: SOURCE_DIR
    422425                        }

With all that said though, all current included themes images are fully optimized with a single exception:
src/wp-content/themes/twentyfifteen/genericons/Genericons.svg (saved 62 B - 0%)

EDIT: Turns out this is not true, even though running a test of the above patch eight files were actually optimized/minified during the task even though the grunt output stated (already optimized), the eight files are:

src/wp-content/themes/twentyeleven/inc/images/dark.png (already optimized)
src/wp-content/themes/twentyeleven/inc/images/light.png (already optimized)
src/wp-content/themes/twentyfourteen/images/pattern-dark.svg (already optimized)
src/wp-content/themes/twentyfourteen/images/pattern-light.svg (already optimized)
src/wp-content/themes/twentythirteen/images/headers/circle-thumbnail.png (already optimized)

src/wp-content/themes/twentythirteen/genericons/font/genericons-regular-webfont.svg (already optimized)
src/wp-content/themes/twentyfourteen/genericons/font/genericons-regular-webfont.svg (already optimized)
src/wp-content/themes/twentyfifteen/genericons/Genericons.svg (saved 62 B - 0%)

And if I remember correctly before an included theme is shipped/released all images are manually optimized and committed to the repo.

The difference between our current image optimization and the details per the original ticket description is the compression algorithms used by the different programs, we use grunt-contrib-imagemin:

https://github.com/gruntjs/grunt-contrib-imagemin#imagemin-task
Comes bundled with the following optimizers:

gifsicle — Compress GIF images
jpegtran — Compress JPEG images
optipng — Compress PNG images
pngquant — Compress PNG images
svgo — Compress SVG images

At this stage there may be some improvements by switching to another algorithm then we would switch to this algorithm for all images, not just included themes, we would also then replace the current grunt-contrib-imagemin task with the new replacement or replacements.

Recommending this be closed and resolved as 'worksforme'

Adding a patch per the above to minify bundled theme images excluding Genericons 3rd party external library.

Last edited 9 years ago by netweb (previous) (diff)

@netweb
9 years ago

#4 @netweb
9 years ago

  • Keywords has-patch added; close removed

#5 @johnbillion
9 years ago

  • Version trunk deleted

@netweb
7 years ago

#6 @pento
7 years ago

#39471 was marked as a duplicate.

#7 @netweb
7 years ago

Via https://core.trac.wordpress.org/ticket/39471#comment:4

The svg-optimiser tool compresses slightly better than imagemin, (1.1KB vs 1.3KB on wordpress-logo.svg) but it does so by rounding co-ordinates and path lengths. I really don't like changing the actual image data, and imagemin can be configured to do that if we really wanted to explore that option.

Tinypng saved 60 bytes over imagemin on wordpress-logo.png, which totally isn't worth it.

I'm cool with investigating tweaking the imagemin options, but switching to external, manually run tools is not my idea of a fun time.

The best option is to fix #30587, and then see if there are any imagemin options we can tweak that don't cause image quality loss.

Here's the list of available imagemin SVG options: https://github.com/svg/svgo#what-it-can-do

Details on how to use SVG options with imagemin: https://github.com/imagemin/imagemin-svgo#usage

Anyone have an idea of what SVG imagemin options we should and should not use?

#8 follow-up: @lukecavanagh
7 years ago

What about the other PNG and GIF images in the image folder of wp-admin, they can be optimized and then it would reduce the total size by 83kb. Which I think is worth the update on those.

@lukecavanagh
7 years ago

Image optimized wp-admin images

#9 in reply to: ↑ 8 @netweb
7 years ago

Replying to lukecavanagh:

What about the other PNG and GIF images in the image folder of wp-admin, they can be optimized and then it would reduce the total size by 83kb. Which I think is worth the update on those.

Thanks @lukecavanagh they are both covered by the 30587.1.diff patch. That said though, different tools and their settings will often result in differing file sizes, both PNG and Gif also have some options that we could tweak to keep this process an automated one.

See also:

#10 @lukecavanagh
7 years ago

@netweb

Automated makes the most sense. Thanks for that, all the best.

#11 follow-up: @desrosj
3 years ago

@netweb it looks like this still applies cleanly. Are there any adjustments you'd make today?

Including SVGs in the minimize task does result in a bit of lost readability, though I'm not sure if anyone actually reads the code within SVG files. We should take care to not minimize any SVGs where readability may be important for maintaining.

#12 in reply to: ↑ 11 @netweb
3 years ago

Replying to desrosj:

@netweb it looks like this still applies cleanly. Are there any adjustments you'd make today?
Including SVGs in the minimize task does result in a bit of lost readability, though I'm not sure if anyone actually reads the code within SVG files. We should take care to not minimize any SVGs where readability may be important for maintaining.

Ha, that's a surprise!

For the most part I wouldn't change anything, potentially double checking any paths that may have been missed in the 30587.1.diff since that was written.

Otherwise it would be good to get those images minified and shipped

Note: See TracTickets for help on using tickets.