Compress Slide SVGs on server side and uncompress on client side

[ffdixon]

We should definitely do this for 2.3 as the slides will download much faster.

[pedrobmarin]

In the new react playback I did something to only fetch the current slide. https://github.com/pedrobmarin/bbb-playback

[ritzalam]

Might also worthwhile to check the size of the svg file and reduce if it is too big. Some users with non-powerful computers have a hard time displaying large slides.

Here is an example of slides that have high-res pictures because the class was about photography.

-rw-r--r-- 1 bigbluebutton bigbluebutton 1.6M Jan 21 13:13 slide20.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 991K Jan 21 13:13 slide19.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 236K Jan 21 13:13 slide18.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 742K Jan 21 13:13 slide17.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 2.7M Jan 21 13:13 slide16.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 1.1M Jan 21 13:13 slide15.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 2.6M Jan 21 13:13 slide14.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 1.2M Jan 21 13:13 slide13.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 2.1M Jan 21 13:13 slide12.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 2.6M Jan 21 13:13 slide11.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 1.3M Jan 21 13:13 slide10.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 1.4M Jan 21 13:13 slide9.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 290K Jan 21 13:13 slide8.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 3.3M Jan 21 13:13 slide7.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 2.9M Jan 21 13:13 slide6.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 2.8M Jan 21 13:13 slide5.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 873K Jan 21 13:13 slide4.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 362K Jan 21 13:13 slide3.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 1.8M Jan 21 13:13 slide2.svg
-rw-r--r-- 1 bigbluebutton bigbluebutton 2.2M Jan 21 13:13 slide1.svg

[pedrobmarin]

In the new react playback I did something to only fetch the current slide. https://github.com/pedrobmarin/bbb-playback

Oh, I just realized this is a HTML5 client thread. So, ignore this comment that doesn't make much sense.

[GhaziTriki]

While SVGZ gives better file size however it is not yet widely supported by the browsers https://caniuse.com/#search=svgz. Another type of compression is possible with SVG. SVGO command line tool seems to do the right job https://github.com/svg/svgo.

[ritzalam]

Please correct me if I am wrong.

I thought it was just a matter of gz the file. That is slide1.svg.gz and the browser would automatically gunzip it.

@pedrobmarin How did you do it?

[capilkey]

Running the files through gzip was what I thought we'd do as a first step also. Optimizing the SVG could also be useful, but I think that would be a different thing.

[ritzalam]

Yes, we can do both. But gz would be I think a good start.

Then later, if the svg file is say larger than 2MB, optimize it.

[kepstin]

If you gzip the files, then you can use the nginx gzip_static module to automatically serve the compressed svg to browsers: https://nginx.org/en/docs/http/ngx_http_gzip_static_module.html#gzip_static

[GhaziTriki]

This issue seems to be a duplicate of https://github.com/bigbluebutton/bigbluebutton/issues/5716

[GhaziTriki]

I have done some testing by enabling gzip compression and without compressing the SVG directly on the disk. We can do the compression on the fly. We have the following result.

Version	Original File Size	SVG File Size	Transfer Size (Gzipped File)
2.2	2.8 MB	3.77 MB	2.74 MB
2.3	2.8 MB	3.14 MB	2.45 MB

This is a different issue. I will check how we can provide convert with more JPEG compression parameters to match the size we had in 2.2. Please check #8598

[EwoutH]

I did a quick test with SVGO. I took the five largest SVG images of the W3 samples and optimized them. All images opened in Chrome (80), Firefox (68) and Edge (44) perfectly.

compuserver_msn_Ford_Focus.svg:
Done in 1090 ms!
318.313 KiB - 53.7% = 147.379 KiB

gallardo.svg:
Done in 622 ms!
332.884 KiB - 56.6% = 144.638 KiB

tommek_Car.svg:
Done in 487 ms!
331.02 KiB - 55.8% = 146.197 KiB

juanmontoya_lingerie.svg:
Done in 572 ms!
372.293 KiB - 54.7% = 168.608 KiB

car.svg:
Done in 619 ms!
514.662 KiB - 56.7% = 222.76 KiB

All image optimizations were done in less than 1.1 seconds (on a i5-4590). File size was reduced on average with a massive 55%. I think enabling SVGO by default would be hugely beneficial. Client side workload is even lower than with the unoptimized SVGs, because the number of elements is reduced.