Aura HD Epub pictures-how do they work?

[Canuck_in_Japan]

One of the main reasons why I got the Aura was due to the hi res screen. 'Great', I thought, 'all of those maps and pictures will finally look decent on an ereader'.
Imagine my disappointment after reading a few books on my Aura and discovering that not only is it not better, it's actually worse! Compare 1491 on my Sony and the Aura. The Sony is a epub and the Aura is a kepub.


Seriously, it's terrible! Is it me? Am I doing something wrong? I thought I would be able to zoom up on the pictures or at least have them take advantage of the resolution but no. Any suggestions? Is this a problem with all ereaders? If anyone has pics from the book 1491 that actually show up decently id love to see them.

[Uschiekid]

The problem is that the pics aren't the only thing on the screen...I believe with kepubs, it is possible to enlarge, but only when they are alone.

Someone correct me if I'm wrong...

[zztush]

I think you need to change the css file of epub in order to get best view on your Kobo.

[davidfor]

It is probably the resolution of the image. Looking at the photos, the Sony is showing the map as about 400 pixels wide. If the image in file is that size, then when it is displayed on the Aura HD, it would still only take 400 pixels across the screen. To change that, you would need to change the code for that image to stretch the image to fill the screen. But, that might not be an improvement. Filling the screen might cause problems with the resize and the image might still look terrible.

[Canuck_in_Japan]

One of the problems that still remain with ereaders I guess. If I was reading the real book it would be perfectly legible.

[paola]

Originally Posted by davidfor

It is probably the resolution of the image. Looking at the photos, the Sony is showing the map as about 400 pixels wide. If the image in file is that size, then when it is displayed on the Aura HD, it would still only take 400 pixels across the screen. To change that, you would need to change the code for that image to stretch the image to fill the screen. But, that might not be an improvement. Filling the screen might cause problems with the resize and the image might still look terrible.

yes, this is what I used to do with a previous reader, i.e. change the css - the only problem is that (ok, it may be my very limited knowledge that is the problem ) you can only make statements that apply to all picturers, so that if half of them look better filling the width, those which look better filling the height will probably look terrible, and the other way around.

EDIT: David, upon re-reading I think you are actually referring to changes to each pictures? I've learned something, I'll try it out, thanks!

[ShellShock]

I have used Sigil to add a svg tag to make images fill the whole screen, in the same way as a cover image. I don't know if there is a better way to do this.

[davidfor]

Originally Posted by paola

EDIT: David, upon re-reading I think you are actually referring to changes to each pictures? I've learned something, I'll try it out, thanks!

Yes, you can set different styles for each image. A couple of epubs I have seen had a CSS class for each image to position and size it correctly. Either do that, or use the svg tag as ShellShock suggested to help automatic resizing. This is an area I don't know much about. I can get my covers looking good and the full page map at the beginning of the fantasy novels, but I haven't done anything for other pictures.

[paola]

ShellShock, davidfor, many thanks for your replies: so if I wanted to use the SVG tag, should I do something like this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 480 640" preserveAspectRatio="xMidYMid meet">
<image width="480" height="640" xlink:href="images/myimage.jpg" />
</svg>

putting the tag around each image?

[davidfor]

That looks right. Other than adjusting the size for the image.

[paola]

Originally Posted by davidfor

That looks right. Other than adjusting the size for the image.

great, thanks!

[Nil Einne]

Originally Posted by Canuck_in_Japan

One of the problems that still remain with ereaders I guess. If I was reading the real book it would be perfectly legible.

If I'm understanding the comments of others in this thread, the problem here isn't so much with ereaders but with ebooks. Having a higher resolution screen doesn't help that much if your content is low resolution. You can enlarge/interpolate the image which will help with the size (and as mentioned by someone else publishers could do that themselves), but won't really improve the resolution. The publisher could have included a higher resolution map and I presume if the ePub is properly designed the publisher will specify desired size so low resolution readers should automatically downscale but that would increase processing time to display the page and also increase file size. Presuming it's supported by the ePub format, the alternative would be to include multiple different resolutions of the image (whether as separate files or in one of the formats that does the sort of thing) which would increase file size even more, but not affect processing size quite so much. Unfortunately for a variety of reasons including the niche status of high resolution ereaders (although the PW and Glo are already fairly high) means many publishers aren't going to bother. Tablets might be a saving grace here since high resolution tablets are getting to be fairly common and I think many publishers just provide one format for all. (Unless perhaps they have a colour version for tablets.)

[ShellShock]

This is what I have been experimenting with on my Glo to make images full screen (I am not an expert at this but it seems to work OK):

<div style="page-break-before:always">
    <svg xmlns="http://www.w3.org/2000/svg" width="768px" height="880px" padding-top="20px" preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 768 1024" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image width="768" height="1024" xlink:href="../Images/map.jpg"></image>
    </svg>
</div>

svg width="768px" is the Glo's screen width. svg height="880px" is the Glo's screen height minus a bit for the bottom menu, and a bit more because I have a 20px padding at the top (padding-top="20px") so the image is not right at the top of the screen.

preserveAspectRatio="xMidYMid" positions the image in the middle of the screen.

The viewBox is the user defined coordinate system this can be pretty much whatever you want as long as the aspect ratio is reasonable. To keep things simple I have used the Glo's screen resolution. 480 x 640 or 768 x 1024 will work the same as they are both a 0.75 ratio.

The image width and height are then the same as the viewBox width and height, so the image fills the viewBox.

For the Aura the resolution is 1080 x 1440 (w x h, also a 0.75 ratio), which will be something like:

<div style="page-break-before:always">
    <svg xmlns="http://www.w3.org/2000/svg" width="1080px" height="1400px" padding-top="20px" preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 1080 1440" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image width="1080" height="1440" xlink:href="../Images/map.jpg"></image>
    </svg>
</div>

[DNSB]

Originally Posted by ShellShock

This is what I have been experimenting with on my Glo to make images full screen (I am not an expert at this but it seems to work OK):

<div style="page-break-before:always">
    <svg xmlns="http://www.w3.org/2000/svg" width="768px" height="880px" padding-top="20px" preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 768 1024" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image width="768" height="1024" xlink:href="../Images/map.jpg"></image>
    </svg>
</div>

svg width="768px" is the Glo's screen width. svg height="880px" is the Glo's screen height minus a bit for the bottom menu, and a bit more because I have a 20px padding at the top (padding-top="20px") so the image is not right at the top of the screen.

preserveAspectRatio="xMidYMid" positions the image in the middle of the screen.

The viewBox is the user defined coordinate system this can be pretty much whatever you want as long as the aspect ratio is reasonable. To keep things simple I have used the Glo's screen resolution. The image width and height are then the same as the viewBox width and height, so the image fills the viewBox.

I'd use the image size and not the screen size in your code. The sample should work across any device as the image would be scaled to full page less any defined margins.

  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 660 880" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="880" width="660" xlink:href="../Images/cover.jpg"></image>
    </svg>
  </div>

Strictly speaking some of the code may not be needed since (I vaguely remember), xMidYMid meet is the default for preserveAspectRatio. The width and height 100% says to use the full screen so the viewbox will be scaled to that size. Some interesting effects can be obtained if you muck with the viewbox and image measurements.

Sample is from a map in an ebook I'm reading. It displays full screen on a Glo and an Aura.
BTW, the Glo is 1024 x 758 not 768. Ask eInk why that decision was made.

Regards,
David

[paola]

thank you guys: do you have any suggestions for the best measurements to put in the Mini?