Looking for Volunteers for New Chapters for Sigil User's Guide

[KevinH]

Originally Posted by Banjo

I have finished the tutorial on how to use the Inspector tool. The files have been zipped into the attached zip file.

All the file names begin with "tutorial_inspector" for consistency. There is one html file and 22 images.

I designed the page to go under the Tutorials page.

I created the page inside of the Sigil user manual, so if you unzip the files and import them into the manual, it should all work. I placed the chapter at the end of the tutorial section, but feel free to place it anywhere you want it.

Also, feel free to edit as needed.

Let me know if you have any problems with it, and I will fix them.

That's Great! Thank you for stepping up to the plate to help create the needed new chapters! I truly appreciate your volunteering to help (and that goes for everyone else that has contributed here as well!).

[KevinH]

Okay I have grabbed all of the new images and chapters and integrated them into the user guide.

Please note: I think since Sigil is cross-platform, we really need to have images from Windows, macOS, and even Linux if we can get some in the user-guide It will give users some idea of how Sigil appears and works cross platform.

As for file size, thanks to Ashjuk, Banjo, and odamizu and others the user-guide even with two new chapters and mixed with macOS images is under 5 meg in Size and looks good.

The next steps will be to edit other chapters removing out of date references and adding any missing references.

Odamizu has already done that for the UserInterface chapter and is working on the Preferences chapter. I have done it for some of the introductory and preface materials. And of course Banjo's two new chapters and the ones I have added should be okay as well.

Odamizu, feel free to mix in your own images or use those of Ashjuk (her repository is given in the first post of this thread) but please keep the file names identical so we can simply use AddExisting to overwrite the previous versions. Of course new images of missing material will need new names.

All in all the user guide is really being improved!

I have uploaded the latest epub version to the first post of this thread under the name:

src_updated_20210221_01.epub (first one with todays date).

Everyone should feel free to grab it. Volunteers to edit/check other chapters for correctness are very welcome.

I will update the repo later when I am back in front of my desktop machine.

Thanks!

KevinH

[KevinH]

@Ashjuk,
One small change in one image please:

external_xhtml_editor_setting.png

Would you please redo that image with "PageEdit" actually set in the Preferred External XHtml Editor instead of Notepadd++.

This image is used in a section on Integrating PageEdit into Sigil.

And fwiw some very nice screenshots in PageEdit can be made using "Alice's Adventures in Wonderland.epub" available in the public domain epubs here on site I believe.

Thanks!

[KevinH]

@Ashjuk,

Unless it is a state secret ... how on earth do you get your image file sizes so small?

I used Gimp and rescaled my original macOS screen capture pageedit.png file to 800 by 850 and downsampled it from 144 ppi to 72 ppi and saved it. It was 397kb (from the starting 1.3mb). I then compared it to your pageedit.png that you produced (literally the same width and height and ppi) and it was only 35kb - less than 1/10th my file size!.

How is that possible? Your file sizes are truly amazing and they still look great on the screen.

[odamizu]

Originally Posted by KevinH

... Odamizu, feel free to mix in your own images or use those of Ashjuk (her repository is given in the first post of this thread) but please keep the file names identical so we can simply use AddExisting to overwrite the previous versions. Of course new images of missing material will need new names ...

Okay. When I started working on the User Interface chapter, I was using the same filenames, but then there was a flurry of activity here updating images and I got all confused and flustered trying to keep track. So I ended up renaming my image files so I could keep them straight.

In order that I can learn Sigil better, I just now loaded the original User Guide into Sigil and used AddExisting to replace the old User Interface html file with my new html file. Sigil brought in all the new images with their new filenames automatically. I then used Tools > Delete Unused Media files to delete the old images with the old filenames.

It seemed to work successfully. How is keeping the old filenames better? (other than not having to delete the old images)

Also, as long as my slow speed is not an issue, I will probably be willing to take on more chapters after I finish Preferences. I just don't want to commit to too many chapters at one time. Better to take it one or two chapters at a time

[KevinH]

Hi Odamizu,

New image names means any reuse of the image in other chapters means we now have two images. New image file names also makes tracking the image file binaries back through their history on github next to impossible and it makes it harder to revert to earlier versions on github if needed for any reason.

And yes doing 1 or 2 chapters at a time in the future would be wonderful! Hopefully many will not need much text updating given the new images.

In fact, the two chapters you chose to start with probably have the biggest text changes!

Thanks!

Kevin

Originally Posted by odamizu

Okay. When I started working on the User Interface chapter, I was using the same filenames, but then there was a flurry of activity here updating images and I got all confused and flustered trying to keep track. So I ended up renaming my image files so I could keep them straight.

In order that I can learn Sigil better, I just now loaded the original User Guide into Sigil and used AddExisting to replace the old User Interface html file with my new html file. Sigil brought in all the new images with their new filenames automatically. I then used Tools > Delete Unused Media files to delete the old images with the old filenames.

It seemed to work successfully. How is keeping the old filenames better? (other than not having to delete the old images)

Also, as long as my slow speed is not an issue, I will probably be willing to take on more chapters after I finish Preferences. I just don't want to commit to too many chapters at one time. Better to take it one or two chapters at a time

[odamizu]

Originally Posted by KevinH

... New image names means ...

Ahhhh ... gotcha

... the two chapters you chose to start with probably have the biggest text changes!

Yes. That's one reason I chose them. I thought they were among the most in need of updating. Though for a while there I was thinking I had bitten off more than I could chew, especially when I started getting bogged down with the images. I think I overcomplicated the whole thing for myself

[Tex2002ans]

Originally Posted by KevinH

Unless it is a state secret ... how on earth do you get your image file sizes so small?

[...]

I then compared it to your pageedit.png that you produced (literally the same width and height and ppi) and it was only 35kb - less than 1/10th my file size!.

How is that possible? Your file sizes are truly amazing and they still look great on the screen.

It looks like they were lossy conversions by:

• converting to Indexed (256 colors or less)
  
  • Ehh, don't know how much I agree with that on some of these images. (See note below.)
• resizing/lowering resolution.
  
  • Again, I don't agree on many of these.
    
  • Remember, there are now higher DPI devices out there + higher resolution monitors coming out. You want to future-proof, not go backwards.
    
  • And while yes, some of those 4k images were a bit excessive, but I definitely wouldn't shrink down to 800px.

Side Note: See my 2013 ScriptPNG post explaining PNG compression + Indexing.

Indexing is fine on very basic images, like:

cp-menu.png

Here's the one I compressed a few days ago vs. Indexed (145 KB vs. 40.5 KB):



The 1st is full RGB + 2nd only has 128 colors.

Very little visual difference.

But to resize down to a thimble PLUS Indexing? Compare the above 2 with:



It went from 684x228 -> 226x91 (8.09 KB)....

Sure, the filesize is "much smaller", but:

• the text is all fuzzy/blurry (because of resizing/artifacting!).
• you threw away so much of the information/color with an enormous lossy conversion.

(Also see my other 2013 posts about JPG/GIF/PNG and lossy conversions: "Tables in an epub?". Especially posts #5+8.)

Originally Posted by KevinH

I used Gimp and rescaled my original macOS screen capture pageedit.png file to 800 by 850 and downsampled it from 144 ppi to 72 ppi and saved it.

You can Index in GIMP by:

1. Image > Mode > Indexed.

2. Generate optimum palette and set the "Maximum number of colors". This will be a number from 2->256.

Depending on the image, sometimes these can be Indexed down to very few colors (like the 17 I use on formulas), and you'll visually see very little difference.

PS. And "DPI" in PNGs is gibberish. It's only metadata that doesn't mean anything. Changing that number won't save you any filesize.

[Ashjuk]

Originally Posted by KevinH

@Ashjuk,
One small change in one image please:

external_xhtml_editor_setting.png

Would you please redo that image with "PageEdit" actually set in the Preferred External XHtml Editor instead of Notepadd++.

This image is used in a section on Integrating PageEdit into Sigil.

And fwiw some very nice screenshots in PageEdit can be made using "Alice's Adventures in Wonderland.epub" available in the public domain epubs here on site I believe.

Thanks!

OK, no problem I will redo those ASAP.

Originally Posted by KevinH

@Ashjuk,

Unless it is a state secret ... how on earth do you get your image file sizes so small?

I used Gimp and rescaled my original macOS screen capture pageedit.png file to 800 by 850 and downsampled it from 144 ppi to 72 ppi and saved it. It was 397kb (from the starting 1.3mb). I then compared it to your pageedit.png that you produced (literally the same width and height and ppi) and it was only 35kb - less than 1/10th my file size!.

How is that possible? Your file sizes are truly amazing and they still look great on the screen.

No secret Kevin

I use Photoshop which has the option to save files for the web. Doing this converts them from 24 bit to 8 bit files.

8 bit uses a much reduced colour pallet of 256 colours versus the 16 million of 24 bit. Seeing as the majority of the Sigil files are not complex, and contain very few colours to start with, throwing away all that unused colour information results in a much smaller file size without loosing quality or image size.

I do not have a copy of Gimp, as I always use either Photoshop or Corel Photopaint, but you might find that it has that option too.

I tend to do most of my work on my Windows desktop machine (where I have Sigil installed) but I do have a MacBook Air which I use really only for browsing the Internet, so if you have a problem with getting some images of Sigil running on a Mac I could try for you. Not sure how it would work as I am very much a novice as far as iOS is concerned.

Although saying that it might be better if you get Tex2002ans to do them as he/she appears to be lot more knowledgeable about these things than I am.

[Ashjuk]

Kevin,

I have replaced the following files:

external_xhtml_editor_setting.png
external-open-name.png
extrenal-open-with-name.png

They all now reference PageEdit rather than notepad++

[Tex2002ans]

Originally Posted by Ashjuk

Although saying that it might be better if you get Tex2002ans to do them as he/she appears to be lot more knowledgeable about these things than I am.

You're doing a great job with the screenshots.

But for documentation, it's better if you take screenshots and:

• only crop. (Don't resize.)
• keep colors.
  
  • You can remove the Alpha (transparency) layer though.
    
  • I'm unsure exact steps in Photoshop, but in GIMP it's under Layer > Transparency > Remove Alpha Channel.

That will make sure they stay lossless.

The text/icons will still look perfectly crisp, etc.

That's the whole reason why PNG is better than JPG.

- - -

From there, if filesize is still an issue, further optimization can be done.

Remember, it's easier to always go DOWN in quality/resolution, but you can't reverse it and go UP.

[KevinH]

I am quite happy in general with the state of the images now. Ashjuk's version of pageedit.png looked great on my 4k+ retina display, blown up to be bigger than any e-reader display would ever be ... and at 1/10th the file size!

Furthermore Images can always be regenerated if needed (any will probably be regenerated in a few years anyway) since they are all screen shots and file size savings are considerable.

So unless someone identifies specific images that they feel need to be made larger, we will go with what we have now.

Thanks!

[KevinH]

Great! Thank you! I will stay with your earlier versions that used
NotePad++ for the general "open with" images. I really only need PageEdit in the chapter dealing with the Preferred External XHtml Editor as that is where it is most likely to be used, whereas NotePad++ would be useful to a number users in open with

Kevin

Originally Posted by Ashjuk

Kevin,

I have replaced the following files:

external_xhtml_editor_setting.png
external-open-name.png
extrenal-open-with-name.png

They all now reference PageEdit rather than notepad++

[KevinH]

@Tex2000ans,

As for colour depth, does setting max number of colours to anything other than a power of 2 make sense? Ie. why 17 colours for your equations? I could see space savings from using 16 colours each represented as 4 bit wide fields with two fields packed into a single byte, but non-powers of 2 would seem to drop colour range with no associated space saving. Or am I missing something?

BTW, I found a program on github called pngquant2 that seems to be using k-means cluster analysis on colours to determine true number of degrees of freedom represented by the colours actually used to determine the "best" set of palette colours to choose. Is this what Gimp is doing with the Index and Optimize approach you mentioned? Or is that something else?

Edit: tried pngquant2 with high compression and Gimp using the Indexing with Optimize colours you pointed out, and Gimp saved about 12k in final size and appears equal visually.

Web and e-readers really do benefit in many ways from smaller image file sizes (loading speed, number of files cached for reload, memory footprint, etc) that print versions needing super high quality really do not need to worry about or benefit from ... thus making a quality vs filesize tradeoff important. Even from a network bandwidth for people downloading the epub given how many people that repeatedly. That makes the whole choice of tradeoff quite subjective in many ways.

If you feel that some specific images in the user guide had gone too far in that tradeoff, please let us know.

Thanks,

Kevin

[Ashjuk]

Originally Posted by Tex2002ans

You can remove the Alpha (transparency) layer though.
I'm unsure exact steps in Photoshop, but in GIMP it's under Layer > Transparency > Remove Alpha Channel

Thanks for the information. I had a look in Photoshop and could not see anywhere to remove the alpha channel other than the channels pallet.

Looking at the image below I could only see the four colour channels (RGB, R, G, B) so I downloaded Gimp and opened the file using that.

As you can see the file as captured does NOT have an Alpha channel to start with, so removing it to reduce the file size was not an option.

https://www.mobileread.com/forums/at...1&d=1614009236

https://www.mobileread.com/forums/at...1&d=1614009236

I don't know what I could have done differently to get the file sizes down other that what I have done. I tried the Image/Mode/Indexed in Photoshop, and too be honest, the result was not great.

Actually I did not resize any of the smaller files, only those over 1000 pixels, so I don't know why they have ended up smaller.