openvsx
openvsx copied to clipboard
eclipse
Image optimalizations
Although the images that we use in our Web UI are all SVGs and all very tiny, the user-submitted extension icons tell a different story.
This story is a horror story recounting extensions like the Vim extension which have huge icons, in Vim's case 200Kb! Having high-quality icons is something I like and can be useful to display in certain places, but on our home page, where these icons get loaded automatically for everyone, downloading megabytes of them is not really something desirable.
Optimizing these icons via resizing and using modern web image formats can make a real difference (this is a test from the homapage of Open VSX with the 25 dev environment extensions:
| Current | Optimized (128x128 images) |
|---|---|
 |
 |
We could achieve optimization like this via two different approaches:
- generating alternative images ahead of time
- when users would submit extensions, we would use a tool like https://github.com/libvips/libvips to do the image processing a part of the publishing process. This way, we would need to create more images and it would take up more storage.
- besides the CLI, libvips has some unofficial implementations. They come in Java flavors, too - https://github.com/codecitizen/jlibvips, https://github.com/criteo/JVips (could not find a way to convert between formats with these though)
- optimizing "on the fly"
- we can use something like Weserv to our Docker image, which can do multiple image formats, resizing and other useful stuff like DPR.
- the obvious downside to this is that it's another service we would need to host and ship. It is pretty lightweight, but still it needs resources.
- this could help us optimize external images (e.g. README ones) as well
Either way we generate these images, we can make use of the awesome <picture> element, which lets the browser choose the best image format from the entries we specify.
