How to avoid aliasing for image on an epub?

[tempehball]

Hello mobileread community!
As you can see on the following image, the gray and black strokes in this PNG are aliased. I can achieve a perfect quality with SVGs but other issues force me to switch to PNGs (some stroke just doesn’t appear for unknown reasons).

https://i.stack.imgur.com/In2hk.png

Original PNG image


Does anyone have similar experience? Is that related to my device (Kobo Aura)?

[Jellby]

Moderator Notice
Images included in posts must be no more than 600x600 pixels.

Your problem is probably similar: Resize the image with a decent image editing software to a reasonable size, and avoid the device having to do the resizing (which creates the aliasing).

[tempehball]

Thank you for your answer. How can I know what is the best size for my device? How can I make sure this size will fit only to my device?

[MicroDrie]

Originally Posted by tempehball

Thank you for your answer. How can I know what is the best size for my device? How can I make sure this size will fit only to my device?

A matter of taste, but I personally find that the quality of the display starts to deteriorate visibly after more than 2x magnification.
An online Swiss Knife in the field of good image editing is https://www10.lunapic.com/editor/. If you choose the scale option, the width / height ratio remains the same, see attachment.

[AlanHK]

Originally Posted by tempehball

Hello mobileread community!
As you can see on the following image, the gray and black strokes in this PNG are aliased.

The image is 24 bits with an alpha channel (transparency).
That's expecting a fairly sophisticated reader. And it's unnecessary

Just make it greyscale, black and grey on white.
Reduced the palette to 4 colours, the filesize is 1/6th, and should work better.
https://imgur.com/dWQwkeR
I use Irfanview to do simple transformations like this.

if you want to scale it, it can do that too: here's 800 px wide. Even smaller file.

[tempehball]

Originally Posted by AlanHK

The image is 24 bits with an alpha channel (transparency).
That's expecting a fairly sophisticated reader. And it's unnecessary

Just make it greyscale, black and grey on white.
Reduced the palette to 4 colours, the filesize is 1/6th, and should work better.
https://imgur.com/dWQwkeR
I use Irfanview to do simple transformations like this.

if you want to scale it, it can do that too: here's 800 px wide. Even smaller file.

That’s a good advice, thank you. I will try to lower the general quality and remove the alpha channel. That can explain the aliasing. Thanks!

[JSWolf]

But do not forget to test the images with a 6" 300DPI Reader to make sure the image sizes are large enough.