Losslessly minify png, jpg and gif images used in Piwik

[MiroHofo]

In order to make piwik loading a bit faster, there is a very quick and safe way how to save some network bandwidth during website loading. There is more than 1000 images in Piwik, most of which have potential to be losselessly minified.
I run all of the images through ImageOptim and file size savings were 23.2% average on and image, saving 337kB (Piwik 3.0.1) total. Most extreme was 98.3% saving on one file.

How can I get all of those to Piwik project?

[Findus23]

Thanks for the suggestion.
Have you tested the new icons of 3.0.1? They should be optimised with pngquant. (I was using the following script to convert them: https://github.com/Findus23/device-icons/blob/master/convert.sh)

The other icons are quite old and should be replaced with high resolution icons (or maybe SVGs) which will be optimised. (#11155)
Also all icons should be PNGs (no more .ico, .gif or .jpg)

[mattab]

(I think our icons used in the UI as part of the app, excluding those OS/browsers/plugins icon, ie. the ones shown your screenshot list, ideally would be put into our font icon, so there is not even a separate http request for each icon and only need to load the font once)

[Findus23]

Another idea would be inline SVG, as most of them are quite simple. (Like Github)

[MiroHofo]

I am not sure which ones are new but only 4 png files were not optimized. There were some size savings on all others, see screenshot sorted from least savings to max.
You or anyone can download all minified images here and compare or commit them yourself: https://we.tl/mb47vOoXvY
Reducing # of requests would be also beneficial.

Tool I have used: https://imageoptim.com/mac (it automatically uses different optimisation method on each image, even combination of more techniques to achieve minimal file size possible)
If you have win, maybe try this one: http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer

Piwik used was 3.0.1 downloaded form web.

[Findus23]

The new icons are

• DevicePlugins/images/plugins
• DevicesDetection/images/browsers
• DevicesDetection/images/os
• Referrers/images

I have compared them and yours are smaller, but we are talking about 100-200 bytes difference.
Oddly there is a single icon which loses it's transparency (/os/MAE.png)

In think we should differentiate between two types of icons:

Mass icons

the ones I have updated + DevicesDetection/images/screens, DevicesDetection/images/brand and the flags.
In my opinion we should convert dem automatically and reproducible (which gets harder if we add additional optimizers, because a update could generate different files).
In addition the HTTP overhead is much larger than the image size.

UI icons

They should be recreated as vector images (as most of them are quite simple) and shouldn't create additional HTTP requests (icon font or inline SVG)

Now we just need a volunteer 😄

[sgiehl]

Now we just need a volunteer 😄

Didn't you just raise your hand? 😬

[Findus23]

Didn't you just raise your hand? 😬

Unfortunately I am quite useless for design work.

[MiroHofo]

How about simply minifying those images in this case (it is very quick and safe) so it is going somewhere and for the other ideas and more work creating separate tickets? ;)

[Findus23]

You're right, until we have better icons it doesn't hurt to minify the current ones.

I'll look into it.

[Findus23]

It seems like minifying the old icons doesn't make a real change.
Nearly all icons can only be reduced by 1-10 bytes (I tried optipng, pngquant (even lossy) and pngcrush -brute, which tries many possibilities)
Most of the icons in your screenshot are also not by piwik but libraries piwik is using (libs/ and vendor/)
As a result using shorter names for cookies would reduce the transfer size much more:

(nearly 50% of size is HTTP overhead)

But while looking though the images I found other improvements (only use png for icons, wrong file extentions, ...), so I'll create a pull request.

[mattab]

As @Findus23 mentioned it wouldn't make a big difference. So maybe let's open a pull request if we happen to do it, otherwise I'm closing this for now. Thanks for the suggestion

As a result using shorter names for cookies would reduce the transfer size much more:

that's interesting! maybe worth doing 😎