Optimize the images

[xfq]

It often takes tens of seconds to open jlreq, so IMHO it would be useful to improve the performance by:

• Changing the image format to optimized WebP or SVG (using the picture element if needed), and/or
• Adding the loading attribute to the img elements

since over 90% of the bytes downloaded are images.

[himorin]

I'm not sure whether we may have such configuration, but I think adding loading=lazy is the option. (with respec processed html file, "completed=7.04, DOMContentLoaded=5.70, load=7.05 sec" to "completed=2.17, DOMContentLoaded=1.65, load=1.79" on Firefox)

For image files, size of current English files is:

• 8.7MB in png
• 6.1MB in webp (default conversion option)
• 4.8MB in png with optimized by optipng using default option

and I don't think we can get large improvement by changing the image format.

[xfq]

and I don't think we can get large improvement by changing the image format.

To me, this is already a lot of improvement (note that we have both English and Japanese images).

We should also see if (optimized) SVG is better (or at least not worse).

[r12a]

I ran ImageOptim on the first 10 files in my directory and reduced the size of all of them by around 50%. I'll run the others through that too.

[himorin]

We should also see if (optimized) SVG is better (or at least not worse).

In JL-TF, as in simple-ruby, we usually put outlined SVG image for those who don't have Japanese font. So size of image files could be larger than bitmap images.

[r12a]

Ok. I ran ImageOptim on all the images in /images and /images_ja. Both were around 8.2 Mb each to start with. Now they are 3.8 and 3.7 Mb respectively. Updated files have been committed to GH.

[kidayasuo]

I believe adding loading=lazy would make it significantly faster. How about adding it before considering optimizing images? As we unified English and Japanese documents, we are loading twice as many images than actually needed. “loading=lazy” will mitigate that penalty. When #126 is fixed the option will make the amount of image load even smaller.