Optimise all images

[georgebutter]

👋 Hello everyone, I'm new to this repo, and hardly know a thing of java or android development but would like to be of assistance. I saw on the info that you need an illustrator that can make small assets. I can losslessly (it's actually a word) reduce the file size of all the existing images. Would be handy if someone can tell me the best place to get started (finding the assets that need replacing and such) and let me know how I can fit in with your workflow is it just best if I edit on the wiki? 👍 Cheers.

[georgebutter]

5 - Extract the annotations from the images

Was wondering whether we could use the svgs as code so that we can keep the text within the image and still use translation strings?

[georgebutter]

I made an svg with embedded text of this image: https://raw.githubusercontent.com/wiki/ligi/SurvivalManual/fig04-01.png - taken from the medicine part of the wiki. I don't think that .md, or at least github supports .svg.

Here's the svg code, it's around the same file size as the .png it was created from but has the benefits of being scalable and has the text embedded so that it could potentially be part of the image and translated.

With text - 7kb

`

`

This one without the text is about 1kb smaller and is scalable.

`

`

[ligi]

This is very cool - thanks so much. Will have to look into this deeper tonight (just looked into it in the lunch break now) - ideally I can convert these into Vector Drawables (https://medium.com/@chrisbanes/appcompat-v23-2-age-of-the-vectors-91cbafa87c88) - but unfortunately the first attempt failed - VectorDrawables are a subset of SVG's - sometimes one can convert things - but this SVG also looks really simple - no much features needed. But as I said - will look later today - thanks so much - love this initiative!

[ligi]

Update - now it works - even the default svg - not sure what went wrong the first time - very great!

[georgebutter]

That's great news! So is it preferable to store the text in the SVG as an annotation or is that an unnecessary complication?

[ligi]

:tada: :clap: YAY - Ideally without text: VectorDrawables do not support text and it also makes things easier with translations.. Also with VectorDrawables I can easily support day/night mode. In this example we can easily put the text below I think and the meaning is not lost. But there are some places where text annotates certain places in the image - was just thinking about just painting numbers there and then in the text reference these numbers - what do you think? Also please add yourself to the contributors page in the wiki! You don't know how much this helps the project - as it also enables the last translation blocker I had ;-)

[georgebutter]

I think that sounds like a swell idea! Is there a directory on this repo I can use to push the svgs to?

[ligi]

Not yet - you can make one in /assets/content_svg_orig

[Siltaar]

• JPG : for pictures of animals, one can use jpegoptim (to losslessly save some space) in .jpg files;
• PGN : Google also provides a zopfli algorithm to losslessly re-compress .png files;
• GIF : For drawings (especially b&w), I think that .gif format will achieve interesting performances.

[ligi]

Important to know we cannot use PGN and GIF - but using jpegoptim for the jpegs is a good idea!

[ligi]

@ButsAndCats added you to credits - let me know if you want something changed: https://github.com/ligi/SurvivalManual/wiki/Credits/_compare/500279e29b2df85f9c41f742d899b6392f2d7400...d90dd58318d68093d12991a32a704ff13b48bdc8

[ligi]

Technically a bit stuck here currently: https://stackoverflow.com/q/45699184/322642 - would have a workaround - but this is quite ugly ..-)

[ligi]

Much nicer

[aaferrari]

To simplify the conversion of the illustrations to SVG Potrace could be used together with what is explained here. In some cases the traits of the illustrations are not well defined but in general lines the results of the conversion are quite decent. The only problem is that it has no OCR so the text remains as a set of paths and has to be added by hand with an editor like Inkscape or CorelDraw. I leave attached a couple of images with which I perform this procedure as a proof of concept: test images.zip

@ligi But there are some places where text annotates certain places in the image - was just thinking about just painting numbers there and then in the text reference these numbers - what do you think?

Another option could be to convert the text into a path and leave written somewhere how to convert it back to text at the moment of making corrections or translations (at least in Inkscape the process is reversible).

[westurner]

From #77 :

https://inkscape.org/doc/tutorials/tracing/tutorial-tracing.html

https://wikihow.com/Trace-an-Image-Using-Inkscape

Inkscape provides an open source GUI for Potrace.

[inferno986return]

I appreciate this initiative and would like every image (unless it's a photo) to be a vector

[ligi]

Yea I would like this too - and there seems to be movement upstream recently: https://issuetracker.google.com/issues/62435069 maybe we are getting there ;-)

[h8nor]

SVG allows to use text, and the switch tag in javascript can select a text depending on the language used by the browser settings (I think that Java should work in a similar way). I suppose that I was removed from translation group, because they don't plan to include new translations. Very sorry.

[h8nor]

How to switch the SVG in Dark Mode: https://catalin.red/svg-favicon-light-dark-theme