WANTED: Correct image integration via <img>

chaot · 03-06-2017, 12:54 PM

I am looking for an easy recipe to embed images (covers & others) into ePubs. It should be Aspect Ratio correct & stabil.

Code:

  <div>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 500 751" preserveAspectRatio="none">
      <image width="500" height="751" xlink:href="cover.jpeg"/>
    </svg>

  </div>

This code or similar is very usual - but for me incomprehensible & doesn't fit the requirements.

After much testing I create a very simple code: (looks too simple

).
Works generally fine, but not 100% - and I can't find out why!

Code:

<body>

  <img src="cover.jpeg" max-width="100%" height="100%"/>

</body>

Code:

body {
  font-family: Arial, sans-serif;
  display: block;
  margin: 0;
}

Another way of writing the same code

Spoiler:

Turtle91 · 03-06-2017, 09:29 PM

This is a question that is brought up quite often here and you will find many different answers depending on the target device. I would recommend searching both the workshop and the epub threads to see all the pro's and con's for each technique.

My personal favorite is using the svg wrapper code that you mentioned. It does take a little bit of study to understand, but it isn't too bad. The svg wrapper will allow you to properly scale an image to fill the whole screen while keeping the proper aspect ratio.

The height portion of <img> is not reliable - so I only use <img> for inserting images of a specific size onto a page.

Cheers,

GrannyGrump · 03-07-2017, 04:02 AM

@ Dion --- now, BE CAREFUL with that phrase "fill the screen". People say that all the time, but they never stop to explain --- your image will fill the screen in the *longest dimension*. It will NOT fill the screen all the way around, to all four edges, UNLESS the image just *happens* to be the exact same aspect ratio as the device screen. Otherwise, you will have, for example, white borders along the sides if the image is tall and narrow.
Or, UNLESS you don't "preserveAspectRatio", and then the image distorts.

Novice bookmakers can get confused when they see "fill the screen", and wonder why their images have white borders along the sides, or along the top & bottom. (I throw this out there in remembrance of my own new bafflements and confusions)

@chaot --- your svg code is missing the setting that will preserve aspect ratio, and keep your image from getting stretched or squashed. If you use "None", the image will distort to match the screen aspect ratio.

Try adding it like this (by the way, Sigil will always *alphabetize* the tags, which I hate, I want them in logical order, not alphabetic. But they work either way.)

Spoiler:

If you use "preserveAspectRatio="xMidYMid meet", the image will never get distorted, no matter the size of the device screen. But you will, of course, get borders along the edges that don't meet the screen edge.

chaot · 03-07-2017, 12:22 PM

Quote:

Originally Posted by Turtle91

The svg wrapper will allow you to properly scale an image to fill the whole screen while keeping the proper aspect ratio.

As @GrannyGrump also mentioned: Reading your statement, I thought at once: That can be so only by luck!

A word to your recommendation to look around. I know you mean this amicably and I can make you sure: It isn't like I wake up in the morning with an question and think: OK, let's ask in mobileread. I grappled with this image issue already since weeks - I looked obviously on the wrong places.
Of course I recognized preserveAspectRatio="none" in the malfunctional code and that it should say something else than none. But please keep in mind: Knowing nothing (or not enough) it's difficult to decide, what is important to look for.

Quote:

Originally Posted by GrannyGrump

If you use "preserveAspectRatio="xMidYMid meet", the image will never get distorted, no matter the size of the device screen. But you will, of course, get borders along the edges that don't meet the screen edge.

Thanks, your code fits my needs exactly (for covers). But I changed the values as follows: height="800" width="600"
As quick I felt confident I start to change that <img>issue everywhere.

xlink:href="cover.jpg" or xlink:href="../Images/cover.jpg" depends, how the cover-image is named (with path or without). Is that correct???

My images come normaly just as cover.jpg, or after conversion, as cover.png.

GrannyGrump · 03-08-2017, 03:16 AM

Quote:

I changed the values as follows: height="800" width="600"

As long as the values match your image, or are a multiple of your image, it will work.
For example, you should be able to make your view port any multiple of 800x600. But it is simplest to just match the image dimensions.

Quote:

xlink:href="cover.jpg" or xlink:href="../Images/cover.jpg" depends, how the cover-image is named (with path or without). Is that correct???

I think you MUST include the entire path to be safe. I use Sigil to edit, and if the path is not included, the image will not display at all in Sigil, or in ADE for PC. (ADE is the rendering engine for majority of e-ink reading devices.)

The image without path WILL display in Calibre reader, which suggests it might be ok for QT-based reading apps, but it would be best to always include the path in your href definition.

A long time back, Jellby gave me this link for a great tutorial on SVG links at the W3.org wiki : https://www.w3.org/wiki/SVG_Links. Well worth your time to step through the tutorial. And the rest of their wiki, too.
The MobileRead wiki has information about SVG also, which can get you started.

chaot · 03-08-2017, 11:50 AM

I must admit that my apathy against long-winding and incomprehensible code structures (I count <div><svg ... </div>: 241 characters (without empty spaces)) for to right place a cover ... wow!! ... is partly the reason for why I got hung up to find a way of integration via <img>.

Structures like that remember me to the modes from the 50s (of the 18th century) - that time we phrase 3 sentences just to say: That's sh..!

Click image for larger version

Name: cover.jpg without path.png
Views: 266
Size: 57.6 KB
ID: 155515

cover.jpg without path works fine in my ereader. But to make that issue future-proof, I agree to change.

So I add

Code:

OEBPS/Images/cover.jpg

in the File Browser - automatically changed here: xlink:href="OEBPS/Images/cover.jpg" - and functions!

But adding

Code:

../Images/cover.jpg

change also xlink:href="../Images/cover.jpg" - but doesn't function.

Thanks for the recommended reads: I'm tired of experiments without positive results. Too time consuming!

JSWolf · 03-08-2017, 12:09 PM

When you use SVG, you have to specify the dimensions using the actually height and width of the images. ADE has a bug where if you don't do it like that, the aspect ratio will be distorted.

I've seen plenty of cases where 1600x1200 or 800x600 is used and with ADE, they don't work. But using the actual pixels of the image will work in all cases.

Tex2002ans · 03-08-2017, 01:59 PM

Quote:

Originally Posted by chaot

I am looking for an easy recipe to embed images (covers & others) into ePubs. It should be Aspect Ratio correct & stabil.

To insert covers, I just always use Sigil's Tools > Add Cover. This creates a cover.xhtml page + automatically adds the correct Cover metadata.

For images in the middle of your book, RbnJrg recently told me about this Sigil Plugin, InsertImageSVG:

https://www.mobileread.com/forums/sh...d.php?t=283333

It makes creating the typical SVG wrapper so much faster/easier.

BetterRed · 03-08-2017, 02:09 PM

Quote:

Originally Posted by chaot

I must admit that my apathy against long-winding . . .

I suspect you mean . . . antipathy, if not why bother with posting about . . .

Don't worry, many English speakers also misuse them. Also, long-winded is the more common expression, but I quite like long winding, it conveys the same figurative sense, and it rhymes with much binding . . .

BR

Turtle91 · 03-12-2017, 05:44 PM

Quote:

Originally Posted by GrannyGrump

@ Dion --- now, BE CAREFUL with that phrase "fill the screen". People say that all the time, but they never stop to explain --- your image will fill the screen in the *longest dimension*. It will NOT fill the screen all the way around, to all four edges, UNLESS the image just *happens* to be the exact same aspect ratio as the device screen. Otherwise, you will have, for example, white borders along the sides if the image is tall and narrow.

Thanks for the clarification - you are, of course, correct. To fix the white border - sorta - I add a "background-color:black" to the <body>. Most covers look better with a black border than a white border but you can change that color to best compliment the cover. In those cases I import the image into photoshop where I can use the eyedropper to get the RGB values of the best color and then use "background-color:RGB(x,x,x)". Of course, this all relies on the device honoring the inline style and supporting color...

03-06-2017, 12:54 PM	#1
chaot Head of lunatic asylum Posts: 349 Karma: 77620 Join Date: Jun 2012 Location: UTC +1 Device: Tolino Vision 3HD	WANTED: Correct image integration via <img> I am looking for an easy recipe to embed images (covers & others) into ePubs. It should be Aspect Ratio correct & stabil. Code: <div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 500 751" preserveAspectRatio="none"> <image width="500" height="751" xlink:href="cover.jpeg"/> </svg> </div> This code or similar is very usual - but for me incomprehensible & doesn't fit the requirements. After much testing I create a very simple code: (looks too simple ). Works generally fine, but not 100% - and I can't find out why! Code: <body> <img src="cover.jpeg" max-width="100%" height="100%"/> </body> Code: body { font-family: Arial, sans-serif; display: block; margin: 0; } Another way of writing the same code Spoiler: Code: <body> <img src="cover.jpeg"/> </body> img { max-width: 100%; height: 100%; }

03-07-2017, 04:02 AM	#3
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	@ Dion --- now, BE CAREFUL with that phrase "fill the screen". People say that all the time, but they never stop to explain --- your image will fill the screen in the longest dimension. It will NOT fill the screen all the way around, to all four edges, UNLESS the image just happens to be the exact same aspect ratio as the device screen. Otherwise, you will have, for example, white borders along the sides if the image is tall and narrow. Or, UNLESS you don't "preserveAspectRatio", and then the image distorts. Novice bookmakers can get confused when they see "fill the screen", and wonder why their images have white borders along the sides, or along the top & bottom. (I throw this out there in remembrance of my own new bafflements and confusions) @chaot --- your svg code is missing the setting that will preserve aspect ratio, and keep your image from getting stretched or squashed. If you use "None", the image will distort to match the screen aspect ratio. Try adding it like this (by the way, Sigil will always alphabetize the tags, which I hate, I want them in logical order, not alphabetic. But they work either way.) Spoiler: <div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 900 1300" > <image height="1300" width="900" xlink:href="../Images/MyImageName.jpg"/></svg> </div> If you use "preserveAspectRatio="xMidYMid meet", the image will never get distorted, no matter the size of the device screen. But you will, of course, get borders along the edges that don't meet the screen edge. Last edited by GrannyGrump; 03-07-2017 at 05:24 AM.

03-08-2017, 11:50 AM	#6
chaot Head of lunatic asylum Posts: 349 Karma: 77620 Join Date: Jun 2012 Location: UTC +1 Device: Tolino Vision 3HD	I must admit that my apathy against long-winding and incomprehensible code structures (I count <div><svg ... </div>: 241 characters (without empty spaces)) for to right place a cover ... wow!! ... is partly the reason for why I got hung up to find a way of integration via <img>. Structures like that remember me to the modes from the 50s (of the 18th century) - that time we phrase 3 sentences just to say: That's sh..! cover.jpg without path works fine in my ereader. But to make that issue future-proof, I agree to change. So I add Code: OEBPS/Images/cover.jpg in the File Browser - automatically changed here: xlink:href="OEBPS/Images/cover.jpg" - and functions! But adding Code: ../Images/cover.jpg change also xlink:href="../Images/cover.jpg" - but doesn't function. Thanks for the recommended reads: I'm tired of experiments without positive results. Too time consuming!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Aura Kobo Aura image (.img)	Sinseman	Kobo Reader	49	01-29-2022 07:02 AM
correct way to set background image to pdf's	ni_c	Editor	0	09-08-2015 02:17 AM
First Contact/Alien Integration wanted	artifact	Reading Recommendations	25	08-10-2014 03:08 AM
[SOLVED] Aligning text inside a <p> and an image <img> vertically (iBooks)	AlPe	ePub	1	10-20-2012 12:00 PM
"Insert Image" renames .jpg's incorrectly... but shows the correct image!	megacoupe	Sigil	4	03-06-2011 08:13 PM

03-06-2017, 09:29 PM	#2
Turtle91 A Hairy Wizard Posts: 3,093 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	This is a question that is brought up quite often here and you will find many different answers depending on the target device. I would recommend searching both the workshop and the epub threads to see all the pro's and con's for each technique. My personal favorite is using the svg wrapper code that you mentioned. It does take a little bit of study to understand, but it isn't too bad. The svg wrapper will allow you to properly scale an image to fill the whole screen while keeping the proper aspect ratio. The height portion of <img> is not reliable - so I only use <img> for inserting images of a specific size onto a page. Cheers,

03-08-2017, 12:09 PM	#7
JSWolf Resident Curmudgeon Posts: 73,896 Karma: 128597114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	When you use SVG, you have to specify the dimensions using the actually height and width of the images. ADE has a bug where if you don't do it like that, the aspect ratio will be distorted. I've seen plenty of cases where 1600x1200 or 800x600 is used and with ADE, they don't work. But using the actual pixels of the image will work in all cases.

Advert

Advert