Adobe Community: ePub graphics are not sized correctly

Currently Being Moderated

1. Steve Werner,

May 21, 2012 6:10 PM in reply to Dennis W.

Report

What are the pixel dimensions of the image that's not being sized correctly? What's the image resolution? Is the image "floating" on the page or is it anchored into a text frame? (If so, how wide is the text frame into which it's anchored?) Exactly what settings have you chosen in Object Image Options?

If you give me this information, I'll try to test it tomorrow morning.

|

Mark as:

Currently Being Moderated

2. Dennis W.,

May 21, 2012 9:43 PM in reply to Steve Werner

Report

Steve.

Thanks for offering to help with my problem. I can sure use the help.

I did more testing and found that if I size a photo/graphic to 1/3 of the text frame it will show up on my iPad twice as big and take up 2/3 of screen. If I size it as 1/2 of the text frame it will take the whole iPad screen.

I am using a new iPad Model MC706LL running OS Version 5.1.1 (9B206)

All my Adobe products have all updates installed as of today.

What are the pixel dimensions of the image that's not being sized correctly? 3264x2448

What's the image resolution? 180dpi

Is the image "floating" on the page or is it anchored into a text frame? The image is anchored to a text frame

(If so, how wide is the text frame into which it's anchored?) - The text frame is 45p0

The image width in the text frame is 14p10.7.

Exactly what settings have you chosen in Object Image Options?

I get the same result with a resolution of 150ppi.

I also had an Illustrator graphic anchored to the text frame in the same manner as the photo.

The width of the last illustrator graphic in the text frame is 17p3.629. It has the same sizing problem as the photo.

I have attached two JPEG’s. The first shows the page as it appears in inDesign. And the second shows how it appears on my iPad.

I have also attached a PDF showing the ePUB export options used.

Any assistance you can provide will be greatly appreciated.

Thanks,

Dennis

|

Mark as:

Currently Being Moderated

3. Steve Werner,

May 21, 2012 9:47 PM in reply to Dennis W.

Report

Attachments aren't allowed on the forum. You can use the camera icon and select a JPEG image of the export options.

|

Mark as:

Currently Being Moderated

4. Bob Levine,

May 22, 2012 5:37 AM in reply to Dennis W.

Report

While I'm not a big epub expert (more of my knowledge is CSS/HTML) I can tell you that image is WAY TOO LARGE.

Like Steve, I can't really picture what you're doing and some screen shots would be helpful.

Bob

|

Mark as:

Currently Being Moderated

5. Dennis W.,

May 22, 2012 6:04 AM in reply to Steve Werner

Report

The attachments that were in the email follow.

Exactly what settings have you chosen in Object Image Options?

I get the same result with a resolution of 150ppi.

Below are two JPEG’s. The first shows the page as it appears in inDesign. And the second shows how it appears on my iPad

Sorry about the missing attachments. I hope this helps.

Thanks again,

Dennis

|

Mark as:

Currently Being Moderated

6. Steve Werner,

May 22, 2012 6:35 AM in reply to Bob Levine

Report

Welcome to the world of how different EPUB readers handle the same HTML and CSS code.

I just did a test with a picture which had the Relative to Page Size and Custom Rasterization settings from InDesign CS5.5 and CS6.

As far as I can tell each version of InDesign is writing the correct code but in a different way. ADE responds to it the same, but iBooks on your iPad does not.

Here are the details: I created a 45 pica wide text frame and anchored a 14 pica wide graphic frame.

InDesign CS5.5 exports the relative size as part of the image tag like this:

InDesign CS6 creates a class for the <div> tag for the graphic frame and references it in the CSS it creates. Here's the HTML:

Here's the CSS for frame-1:

}
img.frame-1 {
width : 27%;
}

I would say that both of those are correct code. However, iBooks handles the CS6 version differently.

Here's how the CS5.5 version looks in iBooks:

And here's how the CS6 code looks:

It handles it differently. So I'd say, if it's important that on the iPad, that it be smaller, you should edit the code to insert the scaling attribute into the HTML tag instead of the CSS,

|

Mark as:

Currently Being Moderated

7. Dennis W.,

May 22, 2012 9:05 AM in reply to Steve Werner

Report

Steve,

Thanks so much for explaining what was happening.

It looks like I have to educate myself on how to edit the HTML and CSS to solve my problem. I was hoping by using Adobe products that I would eliminate the need to manipulate the ePub code. An ideas on how I should proceed to gain the needed knowledge?

While you are saying the iPad is interpreting the ePub differently I interpret that to be a polite way of saying the iPad ePub reader has implemented the ePub Spec incorrectly. It clearly appears as an error to me since the code calls for a size of 27% and it's being displayed on the iPad at about 60%. I also know that I am not capable of convincing Apple to correct it's ePub reader.

Thanks again for all the help.

|

Mark as:

Currently Being Moderated

8. Steve Werner,

May 22, 2012 10:30 AM in reply to Dennis W.

Report

I sent this info to a couple people who know more than I do and I'll let you know if I find out more.

|

Mark as:

Currently Being Moderated

9. Dennis W.,

May 22, 2012 12:35 PM in reply to Steve Werner

Report

Thanks - I would appreciate that.

|

Mark as:

Currently Being Moderated

10. Dennis W.,

May 23, 2012 3:22 PM in reply to Steve Werner

Report

Steve,

In working with the ePub to understand how to make changes I noticed a discrepancy in a file size of the first photo in my ePub.

After running many test I discovered that all jpeg files anchored to a text frame will have a resolution equal to the one specified in the image page of the epub export options and not the resolution specified in the object export options. However all illustrator files have a resolution equal to the resolution specified in the object export options as they should.

Following is detailed data supporting my discovery.

Object export options for all 4 files follow:

Image page of the epub export options follow with resolution set at 150ppi:

Results:

Note that file # 1 has a output resolution of 150 and it should be 300.

Image page of the epub export options follow with resolution set at 300ppi:

Results:

Note that file # 2 has a output resolution of 300 and it should be 150.

Also note that all illustrator files have the correct file ppi in all tests so far.

I cannot explain this as it is my understanding that the Object Export Options should override whats on the image page of the epub export options.

Is this an error in inDesign or am I missing something?

Thanks,

Dennis

|

Mark as:

Currently Being Moderated

11. ukzembla,

May 31, 2012 4:50 AM in reply to Dennis W.

Report

I've had similar problems with image export overrides being ignored. I've found that the only half-decent way of getting around this is to paste the image into another identically sized and pointless box, which is then custom rasterised correctly.

This only seems to affect custom rasterisation of one image; if the setting to preserve appearence from layout is enabled, it seems to work OK (but creates duplicate cover files for my ebooks, which I find annoying).

Alex

|

Mark as:

Currently Being Moderated

12. FragileMedia,

Dec 11, 2012 10:21 AM in reply to Dennis W.

Report

Sorry to bring up an old thread, but I'm having a similar problem.

When I export an ePub out of ID CS6, all my images fill the width of the iPad screen. They should not. When exported out of CS5.5, they are the proper size (maybe 40-50% width).

My images/graphics are set to "relative to page width" in the Object Export Settings. I checked my ePub Export Options and they look correct.

Also, the images look correct when viewed in Adobe Digital Editions or other viewers. It's only on the iPad that they are too large. I didn't have this issue when usuing CS5.5.

Any ideas / fixes?

(Note: I'm using an iPad 1 with OS 5.1.1 and InDesign CS6 vers. 8.0.1)

|

Mark as:

Currently Being Moderated

13. ukzembla,

Dec 11, 2012 10:33 AM in reply to FragileMedia

Report

Have you tried the fix I suggested above – creating a new box, pasting into that and rasterising it? I created a script to wrap it for me and I can live with it.

|

Mark as:

Currently Being Moderated

14. FragileMedia,

Dec 11, 2012 10:45 AM in reply to ukzembla

Report

Well, most of my graphics are groups of text in a text box, that's placed/anchored in the main text box and exported as a JPG. Is that what you mean?

|

Mark as:

Currently Being Moderated

15. ukzembla,

Dec 11, 2012 11:48 AM in reply to FragileMedia

Report

Pretty much, though these days I do everything as fixed size. I set up a few object styles (e.g. for landscape / portrait) and then post-process the HTML into percentage widths based on the object style, as I found the "relative" setting to be a bit flaky.

|

Mark as:

InDesign

ePub graphics are not sized correctly

May 21, 2012 1:15 PM

More Like This

Bookmarked By (0)

Answers + Points = Status