1062991 - Optimize devtools images

Status: NEW

(DevTools :: Shared Components, defect, P5)

Description

[Tim Nguyen :ntim]

We should optimize raster images in the developer tools to get better performance and to reduce their file size.

http://kraken.io is a great tool for that, especially that it's lossless compression doesn't change a single pixel.

Comment 1

[Girish Sharma [:Optimizer]]

Why is it important ?

All our icons are mostly svg now and in any case, nothing is downloaded from internet. Everything is on the user's computer. So saving a few KB will barely save some milliseconds.

Comment 2

[Tim Nguyen :ntim]

Attachment: Patch v1

This patch optimizes raster images in browser/devtools/ and browser/themes/shared/devtools. I used got 30% savings using lossless compression (aka no quality loss).

Can you check if this causes no regressions ? Thanks :)

Comment 3

[Tim Nguyen :ntim]

(In reply to Girish Sharma [:Optimizer] from comment #1)
> Why is it important ?
> 
> All our icons are mostly svg now and in any case, nothing is downloaded from
> internet. Everything is on the user's computer. So saving a few KB will
> barely save some milliseconds.

It's not very important, but it saved from 10% to 50% depending on directories. In browser/themes/devtools/images, it saved 40% which is quite lot.

This should be a practice to do every time we add images, really. We don't want to keep our codebase bloated too.

Comment 4

[Brian Grinstead [:bgrins]]

(In reply to Tim Nguyen [:ntim] from comment #3)
> (In reply to Girish Sharma [:Optimizer] from comment #1)
> > Why is it important ?
> > 
> > All our icons are mostly svg now and in any case, nothing is downloaded from
> > internet. Everything is on the user's computer. So saving a few KB will
> > barely save some milliseconds.
> 
> It's not very important, but it saved from 10% to 50% depending on
> directories. In browser/themes/devtools/images, it saved 40% which is quite
> lot.
> 
> This should be a practice to do every time we add images, really. We don't
> want to keep our codebase bloated too.

It would be nice if there was an automated task that could minify these in place rather than needing to do this manually.  Not sure that would be possible to do within the existing build tooling, but I know there are ways to script this with other tooling (like https://github.com/gruntjs/grunt-contrib-imagemin).

Comment 5

[Brian Grinstead [:bgrins]]

> This should be a practice to do every time we add images, really. We don't
> want to keep our codebase bloated too.

I wonder if we could have some build file that we could put on the directory outside of the fx-team folder that tells it to optimize all images in place that are located in browser/devtools/ and browser/themes/shared/devtools.

Then we could just store that Gruntfile (or whatever) text on the wiki or something as a way to make it easier to run periodically as images are added.

Comment 6

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

(In reply to Brian Grinstead [:bgrins] from comment #4)
> It would be nice if there was an automated task that could minify these in
> place rather than needing to do this manually.  Not sure that would be
> possible to do within the existing build tooling, but I know there are ways
> to script this with other tooling (like
> https://github.com/gruntjs/grunt-contrib-imagemin).

Optimizing images on build has come up a few times before... not just for devtools, but also for all of our images. I think optimizing them when they are uploaded makes the most sense as there is no point optimizing them all every time we build.

If we want to move in this direction we should start a thread on mozilla.dev.platform

Comment 7

[Brian Grinstead [:bgrins]]

(In reply to Michael Ratcliffe [:miker] [:mratcliffe] from comment #6)
> (In reply to Brian Grinstead [:bgrins] from comment #4)
> > It would be nice if there was an automated task that could minify these in
> > place rather than needing to do this manually.  Not sure that would be
> > possible to do within the existing build tooling, but I know there are ways
> > to script this with other tooling (like
> > https://github.com/gruntjs/grunt-contrib-imagemin).
> 
> Optimizing images on build has come up a few times before... not just for
> devtools, but also for all of our images. I think optimizing them when they
> are uploaded makes the most sense as there is no point optimizing them all
> every time we build.
> 
> If we want to move in this direction we should start a thread on
> mozilla.dev.platform

Yeah, I was mainly thinking along the lines of a quick script that could be run when uploading a new image, rather than needing to rely on a separate service for it.  But it would be much more convenient if it was somehow integrated with the build tooling.  Though, as you say it probably doesn't make sense to run this on every build.

Comment 8

[Brian Grinstead [:bgrins]]

Comment on attachment 8484320 [details] [diff] [review]
Patch v1

Review of attachment 8484320 [details] [diff] [review]:
-----------------------------------------------------------------

I think this is a good idea (especially with lossless compression).  I would prefer if we had some reproducible way to do this that didn't rely on manually uploading the images to a website.  Even if it was as simple as a command like this:

imagemin browser/themes/shared/devtools/images/*.png browser/themes/shared/devtools/images/
imagemin browser/themes/shared/devtools/images/responsivemode/*.png browser/themes/shared/devtools/images/responsivemode

Using https://github.com/imagemin/imagemin#cli.  Tim, can you try running this command (or something similar) and see how it compares to this patch wrt to image quality and file size?