search

bonitasoft / bonita-documentation-site

The sources of the Bonita Documentation site
https://documentation.bonitasoft.com/
GNU General Public License v2.0
9 stars 5 forks source link

Reduce pictures size in documentation content #220

Closed benjaminParisel closed 2 years ago

benjaminParisel commented 3 years ago

Some or all images have so strong size. It will consume more bandwidth. We need to find how we can optimize these pictures.

Netlify also provides assets optimization, see https://docs.netlify.com/site-deploys/post-processing/ This will be a way to reduce bandwidth consumption and reduce load time for the documentation readers.

Information about the size of the assets

Note: #403 will help getting the generated site size by checking the logs of the GH workflow run

Whole doc site built on 2021-11-09 all components

9,2M    ./_
3,0M    ./cloud
606M    ./bonita
2,9M    ./bcd     → 3.4 and 3.5
704K    ./labs
622M    .

bonita

24K    ./0          --> archives
26M    ./7.6
27M    ./7.7
27M    ./7.8
78M    ./7.9
87M    ./7.10
90M    ./7.11
95M    ./2021.1
89M    ./2021.2
89M    ./1          --> 2022.1
606M    .

older versions were smaller

Details for Bonita 2021.2 on 2021-11-16, a very large amount of space is used in the getting-started module (tutorial) module getting-started images: 65 elements for 61,2 MB Lot of gif, with several from 1 to 2 MB

600K    ./api
1,1M    ./applications
297K    ./best-practices
369K    ./bonita-overview
1,1M    ./data
59M    ./getting-started
792K    ./identity
13K    ./integration
1,4M    ./pages-and-forms
1,4M    ./process
2,3M    ./ROOT
2,5M    ./runtime
21K    ./security
73K    ./setup-dev-environment
41K    ./software-extensibility
157K    ./version-update
71M    .
jeromecambon commented 2 years ago

About image compression, I tried Squoosh CLI, from Google Labs. It is promising, at least on png images. Does not support GIF yet unfortunately.

Example of a png compression on one of our image:

Original image (438KB)

applicationEditor

Compressed image (192KB): applicationEditor

As you can see, the difference is not really visible 😃

jeromecambon commented 2 years ago

While compressing a single png is quite long (1m30s for the example above), it is OK on a set of png (2m30s for 29 png)

jeromecambon commented 2 years ago

For animated gif (used a lot in the tutorial, with very big files): https://github.com/kohler/gifsicle (not tested yet)

jeromecambon commented 2 years ago

Animated GIFs from the Getting Started tutorial have been compressed in all versions (from 7.9, no animated GIFs before), using the online tool https://www.iloveimg.com/compress-image.

Next step: add a warning if an image is > 1 Mo (for instance) in "Contribution check" action, and point on the tool above.

tbouffard commented 2 years ago

@jeromecambon thanks for this improvement

Next step: add a warning if an image is > 1 Mo (for instance) in "Contribution check" action, and point on the tool above.

Can you create a dedicated issue for this please as this is an extension of the original request.

Could you also add tasks in the description to let us easily follow the completeness of this issue. AFAIK, the image size reduction has only been done for gif files of the 7.9 branch: https://github.com/bonitasoft/bonita-doc/pull/2133 I have no visibility about if it is completed for other branches nor what is plan for png images. It makes very hard to follow this issue. Thanks in advance

tbouffard commented 2 years ago

Size of the generated site from https://github.com/bonitasoft/bonita-documentation-site/actions/runs/3065290246/jobs/4949255867 run on Fri, 16 Sep 2022 03:58:26 GMT

1.3M    ./bcd/3.6
1.7M    ./bcd/3.4
1.3M    ./bcd/3.5
4.2M    ./bcd
716K    ./labs/latest
720K    ./labs
512K    ./test-toolkit/1.0
516K    ./test-toolkit
1.3M    ./_/js
160K    ./_/stylesheets
192K    ./_/img
7.4M    ./_/font
9.0M    ./_
3.3M    ./cloud/latest
3.3M    ./cloud
27M ./bonita/7.8
24K ./bonita/0
75M ./bonita/2021.1
67M ./bonita/7.10
27M ./bonita/7.7
70M ./bonita/2021.2
69M ./bonita/7.11
58M ./bonita/7.9
70M ./bonita/2022.1
70M ./bonita/2023.1
70M ./bonita/2022.2
600M    ./bonita
618M    .
jeromecambon commented 2 years ago
jeromecambon commented 2 years ago

@jeromecambon thanks for this improvement

Next step: add a warning if an image is > 1 Mo (for instance) in "Contribution check" action, and point on the tool above.

Can you create a dedicated issue for this please as this is an extension of the original request.

Could you also add tasks in the description to let us easily follow the completeness of this issue. AFAIK, the image size reduction has only been done for gif files of the 7.9 branch: bonitasoft/bonita-doc#2133 I have no visibility about if it is completed for other branches nor what is plan for png images. It makes very hard to follow this issue. Thanks in advance

I created a new issue for the warning message: https://github.com/bonitasoft/bonita-documentation-site/issues/434 The gif files have been reduced for all bonita-doc branches from 7.9.

jeromecambon commented 2 years ago
jeromecambon commented 2 years ago

Using optipng tool, we reduce by ~38% the total size of all the png files:

$ find . -name "*.png" -type f -exec du -ch {} + | grep total$
 12M    total
$ find . -name "*.png" -type f -exec optipng {} +
$ find . -name "*.png" -type f -exec du -ch {} + | grep total$
8.7M    total
tbouffard commented 2 years ago

Using optipng tool, we reduce by ~38% the total size of all the png files:

for all components and branches, or some bonita branches? Remember that you can find the size of the generated site in the logs of the github actions for both preview and production. See https://github.com/bonitasoft/bonita-documentation-site/issues/220#issuecomment-1249013109 for instance

jeromecambon commented 2 years ago

Using optipng tool, we reduce by ~38% the total size of all the png files:

for all components and branches, or some bonita branches? Remember that you can find the size of the generated site in the logs of the github actions for both preview and production. See #220 (comment) for instance

I ran this on the bonita-doc 2022.2 branch

tbouffard commented 2 years ago

I ran this on the bonita-doc 2022.2 branch

Why didn't you run it in the oldest branch? do you plan to do it or only in 2022.2 then 2023.1?

jeromecambon commented 2 years ago

I ran this on the bonita-doc 2022.2 branch

Why didn't you run it in the oldest branch? do you plan to do it or only in 2022.2 then 2023.1?

I don't think it deserve to do it on older versions, since it only save ~3Mb. It was different with animated GIFs, where we saved 10th of Mb. Should be reflected in 2023.1 branch, right?

tbouffard commented 2 years ago

OK, the risk of not doing it on older branches is that it will generated merge conflicts when an image is modified in an old branch. So, the resize should have been done in the oldest supported version like we do for the documentation content regardless of the overall size reduction.

As the work is already done in 2022.2 and images are rarely updated, I am OK to keep it like it is now to avoid extra rework. But please keep this in mind for the next time you work on the documentation content or resources of a given version.

For 2023.1, most of the job will be done when the merge of 2022.2 into 2023.1 will be done. Only images added in 2023.1 will require a manual size reduce.