Optimised images.

[grischard]

Saved 91 KB out of 762 KB. 20.5% per file on average (up to 56.8%).

For every file, ImageOptim compared the different tools and picked the smallest file that was produced by a combination of advpng, pngout and zopfli for PNGs, svgo for SVGs and gifsicle for GIFs.

No related issues, no code change, no functionality change, no visual differences in images (compression is lossless).

[bhousel]

This seems ok, but a bunch of these images aren't used anymore and we should just remove them anyway. Some thoughts:

• The 2x cursors don't seem to be used currently. (we should fix that)
• Really the only things that matter for optimization are the assets in dist/
• Everything under docs/ is very old and needs to go away or be redone
• The one svg/iD-sprite.src.svg file definitely does not need to be optimized, because it's an intermediate step generated file. It's later used to generate a different file which contains <symbol> elements in dist/img/iD-sprite.svg as part of the build process
• We've had issues with svgo optimizing away our symbol spritesheet. I opened an issue Fills are stripped from elements inside a <symbol> svg/svgo#743 - anyway just be careful using svgo, some of the rules are disabled on openstreetmap-website because of this bug.

Can you change this PR to be just the images under dist/?

[grischard]

Happy to! I'll try to get around to it today.

[grischard]

Couldn't most of those images in dist/ be SVGs? Do we still have the vector source for them somewhere?

[bhousel]

Couldn't most of those images in dist/ be SVGs? Do we still have the vector source for them somewhere?

We already went through in #2785 and moved most of the image assets into the SVG spritesheet.

• We can't switch the cursors because not all browsers support SVG cursors (see Replace png assets with svg #2785)
• I'm not sure whether we can switch the patterns or not. They are small anyway, and there might be some browser compatibility issues (see comments around https://github.com/openstreetmap/iD/blob/master/modules/svg/areas.js#L11-L41), so it hasn't been worth it to me to investigate.
• We can't switch animated objects like the loading spinners
• We can switch the traffic signs used by Mapillary to SVG, and this is being tracked on Switch Mapillary signs to use SVG icons instead of foreignobject #4145
• arrow-icon.png is not used and can be removed (I think)

I think that covers everything!

[grischard]

https://github.com/yangshun/awesome-spinners has some cool non-gif spinners, and the current spinner isn't optimised for retina. Maybe I'll take that as a project for a hacking weekend :).

Could this be merged now as it is?

[bhousel]

We can't switch animated objects like the loading spinners

Another thought on this: technically, we can but it's not a drop in replacement, and probably not worth it to redo the image and wire up a css transform and sort out all the cross browser issues, just to have a loading spinner that takes up a bit less space and looks a little nicer on retina displays. If you want to ImageOptim them though, that's cool.

[bhousel]

https://github.com/yangshun/awesome-spinners has some cool non-gif spinners, and the current spinner isn't optimised for retina. Maybe I'll take that as a project for a hacking weekend :).

Cool, yeah if you really want to do this, I won't say no 👍

Watch out for <animateTransform> which isn't supported on IE

[bhousel]

I took a look and this seems fine, thanks @grischard 👍