SVG and PNG Images in UI Should Be Optimized

[ckoerner]

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/

[ckoerner]

pngcrush output

[ckoerner]

svgo output

[ckoerner]

pngcrush outtput

[helen]

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.

[jorbin]

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.

[netweb]

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

@@ -416 +416 @@
                                 cwd: SOURCE_DIR,
                                 src: [
                                         'wp-{admin,includes}/images/**/*.{png,jpg,gif,jpeg}',
-                                        'wp-includes/js/tinymce/skins/wordpress/images/*.{png,jpg,gif,jpeg}'
+                                        'wp-includes/js/tinymce/skins/wordpress/images/*.{png,jpg,gif,jpeg}',
+                                        'wp-content/themes/twenty*/**/*.{png,jpg,gif,jpeg,svg}',
+                                        '!wp-content/themes/twenty*/screenshot.png',
+                                        '!wp-content/themes/twenty*/**/{Genericons.svg,genericons-regular-webfont.svg}'
                                 ],
                                 dest: SOURCE_DIR
                         }

---

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.

[pento]

#39471 was marked as a duplicate.

[netweb]

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?

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

[lukecavanagh]

Image optimized wp-admin images

[netweb]

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:

• ​https://github.com/imagemin/imagemin-gifsicle#options
• ​https://github.com/imagemin/imagemin-optipng#options

[lukecavanagh]

@netweb

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

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

[netweb]

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