any better ideas ? (image resizing)

[zelda_pinwheel]

i'm currently converting HarryT's illustrated editions of Jane Austen to imp format. My problem is, the images are too big for the eb1150 screen. the conversion process will automatically shrink them, but for some incomprehensible reason, it will only shrink to fit *horizontally*, so the bottom of the image is cut off since the proportions of these images are taller / narrower than the eb1150 screen, and to further complicate matters every single image is a different size.

in order to preserve a maximum of quality, i am leaving them at their original size (who knows what screen size / resolution i will have in the future...), only modifying their proportions so they are homothetic to the screen by adding a margin to the sides (and keeping an original, unmodified set of images for archives).

since i am lazy, i am letting photoshop do the calculations. if i want to treat each image individually and therefore keep the image as large as possible while still being completely visible, my process is like this :

1. create a "dummy" image of the useable dimensions of the screen (taking into account the space for the header, side margins and status bar on the bottom) which through trial and error i have found to be approximately 310 x 430 px (those are the dimensions i'm using).

2. on img1 (from the book), image size (ctrl + alt + i), copy the current HEIGHT, cancel.

3. on dummy image : image size, verify that the dimensions are linked, paste height of other image ; copy resulting adjusted WIDTH, cancel.

4. back to img1, canvas size (ctrl + alt + c), verify that the canvas will be enlarged from the center out and fill color is white, paste new WIDTH, OK.

5. save img1 and close, repeat all steps on img2 etc...

The only idea for automating this process somewhat that i have thought of, is to find the *tallest* image of the group, find the necessary width for that, and enlarge *all* images to that width even if they are not as tall (for this i can make a script in photoshop, which will do all the images automatically). the drawback for this of course is that the images which are shorter / closer to the appropriate proportions to start with will be reduced unnecessarily in size, which seems rather a shame to me (although, it seems less of a shame each time i reformat an individual image manually ...).

perhaps someone has a better (=simpler) idea of how to do this ? if not, i'll change the title and you can just consider this a tutorial for your own conversions.

ideally of course, we could convince the developper(s) of eBook Publisher to release a new version which would fix that ridiculous bug, and take *both* dimensions into account when automatically resizing images... anybody know them ?

[DaleDe]

Here is what I do.

I use IrfanView, a free download for Windows. It can easily provide all of the conversion and touch up I generally need.

1. If a color image is dark as shown on the screen I will increase the chroma a bit to bring out the contrast. For gray scale I may tweak it a bit for good contrast.

3. I size the image for the screen. For me that is 318 pixels by 445. I do not include headers. IrfanView can reduce an image proportionally so I just pick the width or height whichever is larger and let it resize as appropriate. (it can do a batch mode where is resizes everything is a folder if you are in a hurry).

3. Once I get the sizes right I look to where the images are to be portrayed an some need to be made small so that they merge properly with the text. I even may move them a bit to get good pagination effects.

4. I make sure dithering is off and then convert the image to gray scale. For JPG this will reduce the image to 256 levels of gray.

5. For image that are not jpeg I further reduce the image to 16 levels of gray.

To see this at work download my posted Alice in Wonderland. For inline style images download my posted English Bible History. Both are on the last page of the IMP posts.

Dale

[zelda_pinwheel]

thanks for the reply. actually, i don't need to know how to retouch images, i know that already, i was just looking for a way to streamline a rather particular type of workflow, but i suspect that there's no point in thinking too hard about it because i doubt i will find this particular situation too often.

one comment, depending on the images, you may not want to reduce them to grayscale if you will also make a 1200 imp version ; in the case of Harry's Austen series for example it would be a great injustice not to leave the full-color illustrations in the imp 1200 version. it's only important to shift them to greyscale if you plan to really do some work on the image, like on the levels / contrast / etc. which will definitely be affected by the color mode. in which case you may want to do things right and have two sets of images, if you plan to make both versions. i didn't want to take things so far in this particular case.

[nrapallo]

Originally Posted by DaleDe

1. If a color image is dark as shown on the screen I will increase the chroma a bit to bring out the contrast. For gray scale I may tweak it a bit for good contrast.

Dale:

In order to preserve the 'color' of the image, I change the 'luminance', by doing 'gamma correction', when images are too dark so that the whites don't get washed out when the darks are lightened.

Gamma correction is also useful for the reverse: too light areas ramped down to acceptable levels.

[JSWolf]

Photoshop allows you to lighten the dark areas without washing out the light areas.

[nrapallo]

This was posted elsewhere but is useful information in this thread as well.

The maximum (and practical i.e. everyday use) resolutions for the ETI/Gemstar devices are as follows:

EBW 1150: Max usable: 319 x 446; Practical size: 315 x 440; Screen: 320 x 480

REB 1200: Max usable: 472 x 595; Practical size: 468 x 590; Screen: 480 x 640

SOURCE: The Gemstar Formatting Standards.pdf (in appendices) and from practical experience.


Also, for what it's worth:

REB 1100: Max usable: 312 x 472; Practical size: 310 x 468; Screen: 320 x 480

SOURCE: The 'common.py' python module in PDFRead 1.8.1 and from practical experience.


Sometimes when the image used is longer than wider, it will bleed into the bottom (or get "cut off") depending on its aspect ratio. This situation can only be fixed by re-sizing the image to the device's dimensions or inserting width/height specifications within the <img> tag. Either way you loose the generality of the code and need to re-do this resizing for the other .IMP devices (REB1200/REB1100).

When I implemented the 'add cover img' option in Mobi2IMP 9.1, I thought that for the 'cover_nr.html' created, setting the top/bottom margins or padding for the <p> construct would help, but it doesn't. The bottom margin is simply ignored. The top margin needs something to "push-off' like a <div>&zwnj;</div>. The padding-top, padding-bottom don't effect the image shrinking performed internally by ETI's eBook Publisher. This is truly a 'bug' in eBook Publisher.

And a harder one to 'work-around' without ETI's help!

[JSWolf]

So if we use 320x480 aspect ratio images at the largest size, then it'll work for all three devices. Would that be correct then?

[nrapallo]

Originally Posted by JSWolf

So if we use 320x480 aspect ratio images at the largest size, then it'll work for all three devices. Would that be correct then?

I haven't tried this but it should work if you use as the largest size:
[*] Max. usable: 397 x 595 or
[*] Max. practical: 393 x 590. (better as avoids bleeding into the edge of the device and accomodates a 2px margin per DaleDe's suggestion)

The eBook Publisher then can "automatically" resize it to fit the devices' max. usable dimensions WHILE preserving the aspect ratio 320/480 or 0.667.

Great Idea, Jon!

p.s. likewise for other devices this would be:
[*] Amazon Kindle: Max. usable: 427 x 640 (and Cybook Gen 3)
[*] iRex iLiad: Max. usable: 623 x 935
[*] Sony PRS500: Max. usable: 502 x 753
[*] Sony PRS505: Max. usable: 512 x 768

So, in the end, the largest size for the 320x480 aspect ratio should be 623 x 935 (or rounding to 620 x 930) This would especially be useful for cover images!!!

[zelda_pinwheel]

Originally Posted by nrapallo

I haven't tried this but it should work if you use as the largest size:
[*] Max. usable: 397 x 595 or
[*] Max. practical: 393 x 590. (better as avoids bleeding into the edge of the device and accomodates a 2px margin per DaleDe's suggestion)

The eBook Publisher then can "automatically" resize it to fit the devices' max. usable dimensions WHILE preserving the aspect ratio 320/480 or 0.667.

Great Idea, Jon!

p.s. likewise for other devices this would be:
[*] Amazon Kindle: Max. usable: 427 x 640 (and Cybook Gen 3)
[*] iRex iLiad: Max. usable: 623 x 935
[*] Sony PRS500: Max. usable: 502 x 753
[*] Sony PRS505: Max. usable: 512 x 768

So, in the end, the largest size for the 320x480 aspect ratio should be 623 x 935 (or rounding to 620 x 930) This would especially be useful for cover images!!!

please forgive me if i don't try to do the maths myself... but, with your measurements, are you taking into account the space required by running headers (i always use them) and side margins (same) ? i know some people do not use these, i *always* do and wish everybody would ! this is how i ended up at my original "usable" screen size of 310 x 430 px for the eb1150 (i might be able to squeeze a few extra pixels in, but at that size i am *sure* nothing will get cut off. as i said, this size is only the result of my own personal experience so not completely definitive as the maximum possible size, but pretty close).

that said, the idea of finding a proportional size which will scale correctly on all displays is really great !! it's rare to have full-page images but when you do, it would be really nice not to have to resize them individually each time you make a new format...

please note that my system above can be automated for batch treatment (in photoshop, at least... that's how i'm doing the Austen images).

for example, in one of the books, the tallest image is 800px, but height and width varies with each image. so to easily equalize all images, i choose the format of height 800px for all images, and treat them automatically like this :

1. create a "dummy" image of the useable dimensions of the screen

2. on dummy image : image size, verify that the dimensions are linked, change height to 800px ; copy resulting adjusted WIDTH (this step is simply to avoid having to calculate it myself)

3. create script in photoshop :
- canvas size (ctrl + alt + c), change WIDTH to the adjusted width found in step 2 (for 800px height, width is 577px)
- Save
- close
**NB verify in the canvas size diaglogue, horizontal center and background extension color is white.

4. run this script on all the images of your book.

you can modify this script for any set of images if :
- all are portrait format,
- the original proportions are longer / narrower than the display proportions, and (if they are shorter / wider, its not necessary, eBook Publisher will resize them automatically to fit the width of the screen).
- the original dimensions are all relatively close (i would say a variation of about 20 or 30 pixels height MAXIMUM for an 800px height, and obviously less is better).
for example i have the same script for a 600px height as well : new width is 433px.

the automation becomes more problematic if the original image sizes are wildly different, however in this case you can simply first add a step which will harmonize all the images by reducing them to one same height (/!\ ALWAYS reduce size, never enlarge !! or you will lose image quality).

Maybe this information could be added to the BEST PRACTICES wiki page ?

[nrapallo]

Originally Posted by zelda_pinwheel

please forgive me if i don't try to do the maths myself... but, with your measurements, are you taking into account the space required by running headers (i always use them) and side margins (same) ? i know some people do not use these, i *always* do and wish everybody would ! this is how i ended up at my original "usable" screen size of 310 x 430 px for the eb1150 (i might be able to squeeze a few extra pixels in, but at that size i am *sure* nothing will get cut off. as i said, this size is only the result of my own personal experience so not completely definitive as the maximum possible size, but pretty close).

No, they don't accomodate the running header, but for a reason.

You see, if eBook Publisher needs to reduce the image to fit, then that software should take into account the space left on the page and so should accomodate your running headers. I haven't tested this, though.

The image re-sizing issue only rears its head when the image is taller than the display max. height and eBook Publisher decides it wants to do a "half-baked" effort (I restrained myself here from using profanity) shrinking it down to size.

As long as the image is greater than your 430 (or my 446) in height, then eBook Publisher is in control...

[zelda_pinwheel]

what you say is only half true... because as we have seen, eBook Publisher does not scale correctly, fitting *only* to width and not to height. so if the image is too tall for the display, depending on the proportions, it may or may not be scaled correctly to take into account the available screen space (headers, etc.). i agree, this is a real bug that should be fixed, but in the meantime we must take it into account if we want images to display correctly and make good use of the screen size we have.

to illustrate this, i have made 2 .imp files, one 1150 and one 1200, with different sized images in them ; i took one of the images from the Austen books i'm making, and added a 2px black border on all 4 sides so we can be sure to see where the image ends precisely.

for each image, i started with a specific size (indicated on the corresponding image) then enlarged it proportionally to 200%, to be sure it would have to scale for *both* devices (i indicated final dimensions as well), since the idea would be to find a basic proportion which could then be scaled to fit *all* devices.

for the first instance of each image (pp 1-4), they inside a paragraph tag, which is centered but has 0 margin / padding. for the second instance of each image (pp 5-8) i used a div tag which i defined in my css as having margin-left and margin-right of 2em.

as you can see, with margin / padding of 0, the only size which can be auto-scaled to correctly fit on both the 1150 and the 1200 (that is, without the bottom edge being cut off on the 1200) is a multiple of 340px x 430px ; however, on the 1150, this size leaves a large empty margin on the bottom of the page, meaning that if the original image was widened to correct the auto-scale bug (by adding horizontal margins), it is reduced more than necessary, and as the 1150 already has a smaller screen than the 1200 this is rather a pity.

BUT if you add 2em margin to the sides of images on the 1200, then the ideal size of multiples of 310 x 430 scales correctly on the 1200 as well, with just a bit of extra space on the sides. obviously however, this additional margin makes the image *even smaller* on the eb1150 screen.

so, the options, in trying to find an "ideal proportion" for both screen sizes (i won't try to find the exact measures for the other devices, however i have included my test source files (jpg + html) in case anyone else wants to play with it) :

1. make images which do not fill the height of the 1150, so they will not be cutoff in the 1200 (ie multiples of 340 x 430). i think this is not the best solution, since the 1150 is already smaller than the 1200, and it is rather a pity to reduce illustrations any more than necessary.

2. make images sized at multiples of the ideal format for 1150 (310 x 340) and make a specific formatting for 1200, adding 2em side margins to full-screen images. this seems like a better compromise, however it does require some extra manipulations for 1200 files. i think i will do this for the rest of the Austen books.

obviously, the *best* solution is for eBook Publisher's developper(s) to fix that stupid bug !!

[nrapallo]

Originally Posted by zelda_pinwheel

what you say is only half true... because as we have seen, eBook Publisher does not scale correctly, fitting *only* to width and not to height. so if the image is too tall for the display, depending on the proportions, it may or may not be scaled correctly to take into account the available screen space (headers, etc.). i agree, this is a real bug that should be fixed, but in the meantime we must take it into account if we want images to display correctly and make good use of the screen size we have.

I think you're on the right track here. We need to experiment more.

to illustrate this, i have made 2 .imp files, one 1150 and one 1200, with different sized images in them ; i took one of the images from the Austen books i'm making, and added a 2px black border on all 4 sides so we can be sure to see where the image ends precisely.

for each image, i started with a specific size (indicated on the corresponding image) then enlarged it proportionally to 200%, to be sure it would have to scale for *both* devices (i indicated final dimensions as well), since the idea would be to find a basic proportion which could then be scaled to fit *all* devices.

for the first instance of each image (pp 1-4), they inside a paragraph tag, which is centered but has 0 margin / padding. for the second instance of each image (pp 5-8) i used a div tag which i defined in my css as having margin-left and margin-right of 2em.

as you can see, with margin / padding of 0, the only size which can be auto-scaled to correctly fit on both the 1150 and the 1200 (that is, without the bottom edge being cut off on the 1200) is a multiple of 340px x 430px ; however, on the 1150, this size leaves a large empty margin on the bottom of the page, meaning that if the original image was widened to correct the auto-scale bug (by adding horizontal margins), it is reduced more than necessary, and as the 1150 already has a smaller screen than the 1200 this is rather a pity.

BUT if you add 2em margin to the sides of images on the 1200, then the ideal size of multiples of 310 x 430 scales correctly on the 1200 as well, with just a bit of extra space on the sides. obviously however, this additional margin makes the image *even smaller* on the eb1150 screen.

I have tried that "2em" left/right margin as well, and even though it makes the "box" smaller that eBook Publisher has to re-size into, it still breaks for taller pics. The problem is that there is no limit/constraint to the bottom margin, ever. Unfortunately, there is always a taller height that this will break on. Been there, done that and now looking in other directions to find a "cure".

so, the options, in trying to find an "ideal proportion" for both screen sizes (i won't try to find the exact measures for the other devices, however i have included my test source files (jpg + html) in case anyone else wants to play with it) :

1. make images which do not fill the height of the 1150, so they will not be cutoff in the 1200 (ie multiples of 340 x 430). i think this is not the best solution, since the 1150 is already smaller than the 1200, and it is rather a pity to reduce illustrations any more than necessary.

2. make images sized at multiples of the ideal format for 1150 (310 x 340) and make a specific formatting for 1200, adding 2em side margins to full-screen images. this seems like a better compromise, however it does require some extra manipulations for 1200 files. i think i will do this for the rest of the Austen books.

Great detective work! This will help in finding a solution to this issue. I'll try it out soon.

obviously, the *best* solution is for eBook Publisher's developper(s) to fix that stupid bug !!

And who has Garth's ear and email address in her Contact list...

[zelda_pinwheel]

Originally Posted by nrapallo

I have tried that "2em" left/right margin as well, and even though it makes the "box" smaller that eBook Publisher has to re-size into, it still breaks for taller pics. The problem is that there is no limit/constraint to the bottom margin, ever. Unfortunately, there is always a taller height that this will break on. Been there, done that and now looking in other directions to find a "cure".

this solution presupposes that you have reformatted the images to the correct proportions (multiples of 310 x 430px), by adding extra margins on the sides as necessary. otherwise, you are correct, there will always be a taller image that will break the box. the problem is not the size, but the ratio between height and width.

Great detective work! This will help in finding a solution to this issue. I'll try it out soon.

i have tried it out on the version of Emma i am making right now, and i can tell you right now that you will be in for more teeth-gnashing and cursing (or in your case, possibly more perl scripting, as this seems to be what you do in situations that make me gnash my teeth and curse... ). it turns out you cannot specify a margin (or padding) for the "img" tag, either in the css in the head of the document, or inside the individual img tags. which means you have to put the margin on the container tags (p or div), which means you have to treat each image individually.

still quite feasible, using search and replace (for example, search ><img (the end of the opening p tag, the beginning of the opening img tag) and replace with
style="margin-left:2em; margin-right:2em"><img), but clearly more work than adding one line of css at the top of the html used for the 1200 version.

And who has Garth's ear and email address in her Contact list...

huh, do you think he has anything to do with Publisher as well ? in which case, by all means, let's tell him ! but rather than an email, maybe we should start a thread somewhere to repertorie *all* the bugs and updates we would like, because be honest, this is not the only one (alas )... (technically, we *all* have Garth's ear... he follows these forums...)

oh, here is the 1200 version of Emma, made with the same images as the 1150 version reformatted to a homothétie of 310 x 430 px like before, however adding a 2em left and right margin on all the images.

if anyone else is faced with this situation, i recommend doing all the code cleanup on the 1150 version *first* ; then save the html / opf, make the book, close. then MAKE A COPY of the html file adding "_1200" to the filename. then you import this file into the _1200 opf which mobi2imp has conveniently created for you, instead of the original html, and add all the margins to the images. this way, you have 2 separate files to address the different format, but you only do the work once.

[nrapallo]

Some test results on the 'test image auto scale SOURCES.zip' in the first post above.

I added two things to your testbed, with unexpected results:

1. I increased your header by adding 5 <hr>'s to see if eBook Publisher would accomodate this header. The answer is NO! I had expected/wished this wasn't so.

2. I increased your image size by 300% and added them as a third set of images. I had expected this to 'break' the 1150 or 1200 but they appear to be the same as the second set of images. Using the same aspect ratio causes them to shrink down proportionately and thus not be a problem.

Then I changed the aspect ratio and made them 300% taller, but keep them at 200% wide. I, instead, used these re-sized pictures as the third set of images. This then did break as the taller pictures bled into the bottom margin again! There's no winning situation here!

Attached are my results!

[zelda_pinwheel]

Originally Posted by nrapallo

Some test results on the 'test image auto scale SOURCES.zip' in the first post above.

I added two things to your testbed, with unexpected results:

1. I increased your header by adding 5 <hr>'s to see if eBook Publisher would accomodate this header. The answer is NO! I had expected/wished this wasn't so.

2. I increased your image size by 300% and added them as a third set of images. I had expected this to 'break' the 1150 or 1200 but they appear to be the same as the second set of images. Using the same aspect ratio causes them to shrink down proportionately and thus not be a problem.

Then I changed the aspect ratio and made them 300% taller, but keep them at 200% wide. I, instead, used these re-sized pictures as the third set of images. This then did break as the taller pictures bled into the bottom margin again! There's no winning situation here!

Attached are my results!

actually, i hate to say it, but those are *exactly* the results i would have expected.

we know Publisher scales to fit horizontally but not vertically ; so, *anything* which either reduces the vertical screen space or breaks the height / width ratio of the image by adding height without proportional width, will break the "page". that is the point of finding the perfect *ratio*, not size.

as long as the image remains *proportionately* identical to an image of 310 x 430px, you can make it one million per cent bigger (but i hope you have a really *big* memory card, in that case ), it will still scale proportionately. however, adding only 10% will break the page, if you add it to height only (ironically, because of this bug, if you add 10% to *width* only, the scaling will work correctly, however the image will appear smaller on the screen and have an empty margin underneath).