Hallo,

ich versuche mich gerade an der Erstellung eines eBooks im epub-Format aus InDesign heraus. Dabei bereitet mir die richtige Größe/Auflösung von Bildern kopfzerbrechen. Das epub soll zunächst einmal nur im Apple Store verkauft werden - letztendlich aber auch für Android (Samsung Galaxy Tab) und für Kindle. Damit nun Fotos bei jedem Format passen, habe ich bei den InDesign Objektexportoptionen bei der Größe "Relativ zur Seitenbreite" gewählt. Bei dieser Option wird die Breite des Bildes im epub immer prozentual zum Text gesetzt und die Breite müsste ja dann auch proportional angepasst werden. Jetzt sieht das Bild auf dem iPad 2 und iPhone auch gut aus und passt sich immer in die Seite ein. Auf dem Samsung Galaxy Tab 10.1N jedoch (in dem Reader eBook) wird das Bild zwar in der Breite richtig skaliert, in der Höhe aber einfach abgeschnitten, weil es wohl nicht mehr ganz auf die Seite passt. Um herauszufinden, ob das iPad vielleicht auch etwas in der Höhe abschneidet, falls das Bild noch höher ist (bei gleicher Breite), habe ich das Bild einfach mal im Photoshop in der Höhe ganz krass verzerrt und dann im epub-File das alte durch das neue (verzerrte) ersetzt. Das Ergebnis war erstaunlich: das iPad hat das Bild wieder komplett (und seitenfüllend!) angezeigt! Auch war das Bild nun in der Höhe nicht mehr so verzerrt, wie ich es abgespeichert hatte! Passt das iPad Bilder vielleicht in der Breite UND in der Höhe an und verzerrt sie damit? Bei Doppelklick auf das Bild wurde es dann nämlich auch richtig dargestellt - mit dieser krassen Verzerrung welche ich extra so im Photoshop erstellt hatte!
Wie kann ich die Bilder nun sowohl auf den Android- als auch auf den Apple-Geräten richtig anzeigen (also immer in 100% Seitenbreite)?
Könnte mir bitte jemand helfen? Das ganze ist noch Neuland für mich und diese Bilder-Geschichte verwirrt mich ziemlich. Vor allem, weil ich es eh schon so schwer finde, die Bilder in der richtigen Auflösung für möglichst alle Endgeräte zu exportieren.
Vielen Dank schon einmal!!!!

Hallo Nadine,

entschuldige die verspätete Antwort.

Hast du bereits einige Quellen wie Bücher oder Videos zur ePub Herstellung herbeigezogen? Wenn ja, welche?
Ich interessiere mich dafür um zu wissen auf welchem Kentnisstand du bist.

Bei der ePub Herstellung gibt es einige Regeln die man befolgen muss um eigenermaßen gut ins Ziel zu kommen. Ansonsten kann man viel Falsch machen.

Kein Problem, hatte schon Angst, dass gar niemand mehr antwortet ;-).

Ja, ich habe mir schon diverse Video-Tutorials angesehen - hauptsächlich von video2brain das Tutorial Elektronisch publizieren mit InDesign, welches ich so ziemlich komplett und auch schon mehrfach angesehen habe. Ansonsten habe ich mir auch einige mir wichtig erscheinende Stellen aus dem video2brain-Tutorial eBooks mit InDesign CS5 - der leichte Einstieg angesehen und was ich sonst noch so, gerade zum Bildexport, im Internet finden konnte. Dort hieß es allerdings überall nur, man sollte das Bild maximal 600x800 Pixel groß machen, allerdings konnte ich nicht herausfinden, mit welcher Auflösung am besten und wie man genau vorgeht, wenn man die Bilder jeweils prozentual (z.B. über width="100%" im img-Tag) an die Seiten anpassen möchte.
Könntest du mir da vielleicht weiterhelfen?

Viele Grüße,
Nadine

Hallo,

ok, ich versuche es. Da du von den Objektexportoptionen sprichst, gehe ich davon aus, dass du CS5.5 hast.

Zu der Breite von 100%:
Die Option "Relativ zur Seitenbreite" hat nichts mit der Breite vom iPad, Galaxy Tab und Co. zu tun und betrifft nur bedingt die Seitenbreite in InDesign.

Fall1: Dein Bild ist nicht im Text verankert
InDesign nimmt die Grösse des Bildes relativ zu deiner Seitenbreite. D.h.: Wenn deine Dokumentgrösse in InDesign 768x1024px beträgt, musst du dein Bild in InDesign in einen Bildrahmen platzieren der eine Breite von 768px hat, damit später in der ePub-Datei die volle Breite von 100% genutzt wird.

Fall 2: Dein Bild ist im Text verankert
"Relativ zur Seitenbreite" nimmt zur Angabe der Bildbreite deinen Textrahmen in InDesign. Hat dein Textrahmen eine Breite von z.B. 768 px, muss dein verankertes Bild auch eine Breite von 768px besitzen.

Die Bildgrösse von 600x800px ist ein Richtlinie an die man sich für die meisten Geräte halten kann. Um also beim ePub direkt eine Breite von 100% zu bekommen benutzt du entweder "Fall 1" eine Dokumentgrösse 600x800px und platzierst deine Bilder auf die ganze Seitenbreite, oder bei "Fall 2" darf dein Textrahmen in dem das Bild verankert ist eine Grösse von 600x800px besitzen und dein verankertes Bild muss auch in einer Breite von 600px platziert sein. Die Höhe muss allerdings keine 800px betragen, sollte den Wert aber nicht überschreitten, ist die ePub-Datei für mehrere Tablets gedacht.


Auflösung:
InDesign kann die Bilder in 72, 96, 150 und 300 ppi in ein ePub ausgeben. Du brauchst dir also nicht die Mühe machen dies direkt in Photoshop zu rechnen (Ausser du willst es so). Sorge einfach dafür dass dein in InDesign platziertes Bild (auf Endgrösse platziert) eine mindest effektive Auflösung hat von dem Wert den du gerne in das ePub exportieren möchtest.


Unterschiede zwischen den Readern:
Unterschiede zwischen Readern lassen sich nicht vermeiden. ePub ist zwar ein Standard, doch den legen die Hersteller von Tablets oder Reader Programmen grosszügich aus. Solltest du oben angewandte Tipps berücksichtigen, sollte es keine Verzerrungen geben, es sei denn du hast diese extra erzeugt.

Guten Morgen :-),

vielen Dank für die ausführliche Anwort, das hilft mir schon ein bisschen weiter! Schätze, ich muss auch einfach ein bisschen rumprobieren.
Ich habe übrigens Fall 2 verwendet und ja ich arbeite mit CS5.5 ;-)!

Könntest du mir vielleicht auch noch sagen, an welche Pixelmaße ich mich bei den Bildern halten sollte, wenn das eBook nachher als Doppelseiten angezeigt wird? Denn diese Option gibt es ja sowohl beim iPad als auch beim Samsung Galaxy Tab. Die Höhe der Bilder dürfte dann ja quasi 600 Pixel nicht überschreiten, oder? Aber bei welcher Breite?

Und ist es wirklich unbedingt nötig, dass mein Textrahmen in InDesign genau 600x800px hat? Kann ich nicht mit einem kleineren Textrahmen arbeiten - z.B. weil das Buch schon gedruckt wurde und ich mir die Arbeit sparen möchte, das ganze komplett umzubauen - das Bild dann aber trotzdem in der Breite des Textrahmens platzieren und dann halt bei den Objektexportoptionen eine größere Auflösung angeben? Und dann müsste ich vermutlich auch darauf achten, dass das Bild bei einer proportionalen Skalierung bei einer Endbreite von 600Px die 800Px in der Höhe nicht überschreitet, oder?

Ich hoffe, ich hab mich jetzt nicht wirr ausgedrückt ;-)!?

Viele Grüße,
Nadine

Hallo,

Zitat

Könntest du mir vielleicht auch noch sagen, an welche Pixelmaße ich mich bei den Bildern halten sollte, wenn das eBook nachher als Doppelseiten angezeigt wird? Denn diese Option gibt es ja sowohl beim iPad als auch beim Samsung Galaxy Tab. Die Höhe der Bilder dürfte dann ja quasi 600 Pixel nicht überschreiten, oder? Aber bei welcher Breite?

Fast richtig! In InDesign kannst du nur die Breite eines Bildes bestimmen. Du kannst dem Bild also immer nur sagen es soll x Prozent der Bildschirmbreite ausfüllen. Deshalb steht dann auch nur später im CSS: width="xx%". Somit füllt das Bild immer nur den angegebenen Prozentsatz deines "Bildshirm Satzspiegels" auf dem iPad oder Galaxy Tab aus.

Dabei wird die Höhe automatisch proportionell angepasst! Wechselst du also auf Doppelseien Layout, ist deine Breite ja auch keine 600px mehr. Und deshalb existiert aber auch diese Faustregel, dass ein Bild zur allgemeinen Nutzung, nur 600x800px haben soll. Oder anders gesagt ein Proportionsverhältnis von 3/4 (drei zu vier) sollte nicht unterschritten werden (z.B. 3,5/4 wäre gut. 2,8/4 wäre nicht gut).

Nun mach aber nicht den Fehler und definiere manuell im CSS: width="100%" height="100%". Beide Codes zusammen geschrieben stehen in keiner Relation zueinander und deformieren das Bild.

[Klammer auf]Die Interpretation von ePubs ist doch sehr verschieden von Gerät zu Gerät und Programm zu Programm. Die Faustregel von 600x800px greift leider nicht immer. So kann es vorkommen, dass trotz aller Vorsicht, ein Bild in der Höhe abgeschnitten und auf mehrere Seiten aufgeteilt wird, wenn das Bild die Satzspiegelbreite ausfüllt.[Klammer zu]

Zitat

Und ist es wirklich unbedingt nötig, dass mein Textrahmen in InDesign genau 600x800px hat? Kann ich nicht mit einem kleineren Textrahmen arbeiten - z.B. weil das Buch schon gedruckt wurde und ich mir die Arbeit sparen möchte, das ganze komplett umzubauen - das Bild dann aber trotzdem in der Breite des Textrahmens platzieren und dann halt bei den Objektexportoptionen eine größere Auflösung angeben?

Nötig ist es nicht und du kannst die Auflösung in den Objektexportoptionen hochsetzen. Dann reicht es aus die Bilder auf deine Textrahmenbreite zu setzen (im ePub sollte das Bild dann mit width="100%" angegeben sein).

Zitat

Und dann müsste ich vermutlich auch darauf achten, dass das Bild bei einer proportionalen Skalierung bei einer Endbreite von 600Px die 800Px in der Höhe nicht überschreitet, oder?

Genau

Zitat

Ich hoffe, ich hab mich jetzt nicht wirr ausgedrückt ;-)!?

Dieser Wirrkopf hats zumindest verstanden ;-)

Hi,

super, vielen Dank - ich habs hinbekommen. Obwohl ich sagen muss, dass ich es mehr durch ausprobieren rausbekommen habe, wie hoch ich die Bilder jetzt wirklich machen darf, damit sie noch auf mein Samsung Galaxy Tab passen, ohne einfach abgeschnitten zu werden (in der Doppelseiten-Ansicht). Aber jetzt passts :-)!

Zitat

Nun mach aber nicht den Fehler und definiere manuell im CSS: width="100%" height="100%". Beide Codes zusammen geschrieben stehen in keiner Relation zueinander und deformieren das Bild.

Das war mir klar, da ich bereits etwas HTML/CSS-Erfahrung habe ;-)!

Aktuell tüftel ich nun noch daran, wie ich am besten vorgehe, wenn ich 2 Bilder nebeneinander haben möchte (also quasi 2-spaltig) und am besten das erste Bild dann linksbündig steht und das zweite eher rechtsbündig (damit ich einen Abstand zwischen den beiden habe). Aber das werde ich schon auch noch rausbekommen.

Vielen Dank nochmal, schätze, ich werde mir dein Buch zulegen - du hast mich überzeugt ;-)!

Viele Grüße,
Nadine

Hallo!

Zitat

Auflösung:
InDesign kann die Bilder in 72, 96, 150 und 300 ppi in ein ePub ausgeben. Du brauchst dir also nicht die Mühe machen dies direkt in Photoshop zu rechnen (Ausser du willst es so). Sorge einfach dafür dass dein in InDesign platziertes Bild (auf Endgrösse platziert) eine mindest effektive Auflösung hat von dem Wert den du gerne in das ePub exportieren möchtest.

Yves, teste das mal bitte, denn diese Annahme ist leider falsch. Hierzu folgender Test:
1. Ein Bild hat Original 72, Effektiv 720 ppi
2. Export mit 150 ppi
3. Ergebnis: Das Bild landet mit 72ppi im EPUB
4. Bild in PS auf Original 400 ppi umgestellt, Effektiv 720 ppi
5. Export mit 150 ppi
6. Ergebnis: Das Bild landet mit 150ppi im EPUB

Das Ergebnis hängt also von dem Wert unter Original und nicht von Effektiv ab!

Antwort auf:

Zitat Nun mach aber nicht den Fehler und definiere manuell im CSS: width="100%" height="100%". Beide Codes zusammen geschrieben stehen in keiner Relation zueinander und deformieren das Bild.

Das war mir klar, da ich bereits etwas HTML/CSS-Erfahrung habe ;-)!

Ich empfehle euch, zusätzlich zu width: 100% im CSS für das Bild height: auto zu setzen, da manche Reader (hauptsächlich Desktop-Reader) die proportionale Skalierung ohne den Wert für Höhe nicht hin bekommen.

In der EPUB-Spezifikation 2.0.1 sind übrigens keine Angaben für width und height im HTML vorgesehen. D.h. die Angabe sollte grundsätzlich im CSS stehen.

Antwort auf:

Aktuell tüftel ich nun noch daran, wie ich am besten vorgehe, wenn ich 2 Bilder nebeneinander haben möchte (also quasi 2-spaltig) und am besten das erste Bild dann linksbündig steht und das zweite eher rechtsbündig (damit ich einen Abstand zwischen den beiden habe).

Versuch mal folgendes:
1. Dein linkes Bild steckt in einem div class="bild L"
2. Dein rechtes Bild steckt in einem div class="bild R"
3. Beide Bilder liegen im div.container

Code

html, body, div, p { 
	margin: 0; 
	padding: 0; 
} 
.container { 
	margin: 0 auto; 
	text-align: center; 
	font-size: 0; 
}        
.bild { 
	width: 45% !important; 
	display: inline-block;	 
} 
.L { 
	margin-right: 2.5%; 
} 
.R { 
	margin-left: 2.5%; 
} 
img { 
	width: 100% !important; 
	height: auto; 
} 

Wenn du .L und .R heraus nimmst, kleben die Bilder in der Mitte zusammen. Wichtig ist hier font-size: 0, da inline-block ansonsten einen weißen Streifen von 4px generiert.

Hallo Kai,

Zitat

Das Ergebnis hängt also von dem Wert unter Original und nicht von Effektiv ab!

In der tat, du hast Recht. Da habe ich nicht in meiner Aussage aufgepasst.

Tschuldigung! Also vor dem Import in InDesign die Bilder bitte mindestens auf die gewollte Auflösung bringen.

Mir wär es lieber, ich hätte hier nicht recht: 98% der Anwender wissen das nicht. Hinzu kommt die falsche Beschriftung von "Relativ zur Seite", anstelle von "relative to parent" oder die Tatsache, dass manche Reader die width und height-Attribute im img-Tag nicht unterstützen.

CS6 macht es leider nicht besser :(

Hallo,

also erst einmal vielen Dank für die weiteren Infos. Das ist wirklich gut zu wissen.
Allerdings ist das Vorgehen von InDesign schon auch ein bisschen ärgerlich. Heißt das, dass ich nun manuell (im HTML) durch das ganze ePub gehen muss/sollte und die width-Angaben aus dem img-Tag löschen muss, da es in der ePub-Spezifikation nicht vorgesehen ist? Denn InDesign schreibt da ja automatisch die Angaben rein und ich kann es ihm ja nicht verbieten - oder etwa doch?

Das mit den zweispaltigen Bildern versuche ich gleich - vielen Dank für den CSS-Code!

Viele Grüße und einen schönen sonnigen Tag,
Nadine

So, jetzt habe ich alles ausprobiert.
Das mit den 2 Bildern nebeneinander funktioniert so - super :-)!

Wenn ich allerdings bei allen Bildern die width- und height-Angabe (= auto) nur ins CSS schreibe, dann interessiert das das iPad (iBooks) recht wenig, wenn ich möchte, dass ein Bild nur in 60%, 50% etc. angezeigt werden soll - es skaliert es einfach immer auf Seitenbreite bzw. macht es so breit, damit es auch in der Höhe noch ganz auf die Seite passt. Wenn ich dann die width-Angabe wieder in den img-Tag schreibe wird das Bild wieder so skaliert wie ich es möchte, allerdings nur ohne die Angabe height="auto" im img-Tag. Auf meinem Samsung Galaxy Tab in eBooks wird das Bild in allen Fällen richtig skaliert.
Es scheint das iPad bzw. iBooks also recht wenig zu interessieren, dass nach epub-Spezifikation 2 die Breitenangabe im CSS und nicht im HTML stehen sollte...
Außerdem funktioniert es beim iPad nicht richtig, wenn ich möchte, dass ein Bild rechts neben dem Text steht und von diesem links umflossen wird.

Viele Grüße,
Nadine

Antwort auf:

Heißt das, dass ich nun manuell (im HTML) durch das ganze ePub gehen muss/sollte und die width-Angaben aus dem img-Tag löschen muss, da es in der ePub-Spezifikation nicht vorgesehen ist? Denn InDesign schreibt da ja automatisch die Angaben rein und ich kann es ihm ja nicht verbieten - oder etwa doch?

Du kannst es nicht verbieten und erhältst entweder px oder %-Angaben. Diese Angaben kannst du drin lassen, weil sie das CSS überschreibt oder sauberer: Du löscht sie global per GREP in Textwrangler z.B. über Multi File Search.

Antwort auf:

Wenn ich allerdings bei allen Bildern die width- und height-Angabe (= auto) nur ins CSS schreibe, dann interessiert das das iPad (iBooks) recht wenig, wenn ich möchte, dass ein Bild nur in 60%, 50% etc. angezeigt werden soll - es skaliert es einfach immer auf Seitenbreite bzw. macht es so breit, damit es auch in der Höhe noch ganz auf die Seite passt.

Hast du mein CSS richtig verstanden?
Aus InDesign heraus bekommst du immer ein zusätzliches Blockelement für das Bild, entweder div oder p. Das Bild hat im CSS immer 100%. Die eigentliche Breite kommt dann vom Elternelement.

Antwort auf:

Außerdem funktioniert es beim iPad nicht richtig, wenn ich möchte, dass ein Bild rechts neben dem Text steht und von diesem links umflossen wird.

Funktioniert nicht richtig bedeutet was?

Hallo,

sorry, dass ich so lange nicht geantwortet habe. Ich war bzw. bin immer noch ziemlich im Stress und konnte mich mit der epub-Geschichte nicht mehr beschäftigen.

Ja, ich habe das CSS eigentlich schon verstanden und hab es auch genauso umgesetzt wie du es mir geschrieben hattest. Auf dem Samsung Galaxy Tab 10.1N funtkioniert es ja auch perfekt, nur auf dem iPad 2 halt nicht - das weiß es scheinbar besser ;-)

Bzgl. des Bildes, welches links vom Text umflossen werden soll habe ich folgenden Code im HTML:

Code

<p class="text-normal"> 
   <img alt="5003.jpg" class="rightFloat" src="../Images/5003.jpg" width="47%" /> 
   Zwei, das Fräulein ... 
</p> 

Und folgenden im CSS:

Code

.rightFloat { 
	float : right; 
	margin-left: 3%; 
	width: 47%; 
	height: auto; 
} 

Sieht auf dem Samsung Galaxy Tab in eBook und in Sigil genau so aus wie es aussehen soll, nur das iPad 2 lässt zunächst einen ganzen Teil des Textes im p-Tag über die ganze Seitenbreite laufen und dann kommt irgendwo zwischendrin das Bild und dabei läuft auch noch die 1. Zeile neben derer das Bild steht über/unter (weiß ich jetzt nicht mehr genau, hab das iPad nicht da) das Bild. Ich schätze mal, es liegt daran, dass der eine Teil des p-Absatzes noch auf der vorigen Seite war und dort das Bild von der Höhe her nicht mehr vollständig hingepasst hat und das iPad dann den Text einfach weiterfließen lassen hat anstatt ihn gleich (mit dem Bild) auf die nächste Seite zu packen.

Viele Grüße und schönen Abend noch,
Nadine