SimonbJohnson / quickX3

HXLDash. Create data visualisations quickly by leveraging the humanitarian exchange language
https://hxldash.com/
MIT License
8 stars 4 forks source link

Image sizes optimizations on non-dashboard parts of hxldash #68

Closed fititnt closed 4 years ago

fititnt commented 4 years ago

The way the final dashboards (the end result) are done uses strategies that, as 2020, are very size-optimized compared to other alternatives for serve data on web. The strategies (the design chooses) already are very optimized, even for an alpha release.

This issue actually is the part that are not the end result, but the screens that are related to explain how to use the dashboards (and also about the home page). At this point of discussion is just about the images.

Strategies to optimize images

There are some ways to optimize images. Some can be integrated at server size (like pagespeed modules), other can be added at building times (like some commands with nodejs or other tools.

One way that may work on hxldash

As for the hxldash, since the number of images is small (and is not user generated) maybe from time to time one way could be just upload the images for some services (like https://tinypng.com/) check if the % of images worth the optimization, and then

My initial suggestion

See Pull Request #67. At this point, I just used the https://tinypng.com/.

The next images are not really accessible to screen readers, but a description of what they show is a list of images (and original sizes) vs size of new images and the saving on the file size after the optimization. The smallest savind is 11%, and the biggest is 88% (not sure the averagen size reduction, but may be at least 33% or more for the #67 pull request.

Captura de tela de 2020-04-04 23-07-24 Captura de tela de 2020-04-04 23-04-54 Captura de tela de 2020-04-04 23-08-40 Captura de tela de 2020-04-04 23-09-28 Captura de tela de 2020-04-04 23-10-57 Captura de tela de 2020-04-04 23-11-50

SimonbJohnson commented 4 years ago

Thanks to @fititnt for pull request c71d6b861e79442459ffeb8962b3735e1cdea59a