Home « Forum « Author Hangout

Forum: Author Hangout

html image sizing question

Crumbly Writer
Updated:

For a while, I've been using graphic chapter heads (i.e. graphic images of chapter titles in a specific font, rather than trying to embed the font into the epub file), however the best I can do as far as adjusting the size is to "width=75%".

Yet, when I submit my source document to Amazon, they manage to shrink the image to the specified size, regardless to the dpi. How do I do this (specify the image dimensions in inches) in html? This is an issue because, on a phone, the title will be tiny (75% of a phone width isn't much) while on a desktop it'll be HUGE (75% of a 28" monitor).

For the first time I'm trying the same thing with B/W images, so I need to really clean up the code for these images!

Update: I tried using "in;" (not accepted) and both "cm;" and "mm;" but it seems to translate both into "pixels".

Crumbly Writer

Sigh! Just examined a copy of one of my Amazon books in Calibre. It never specifies any dimensional data, so Amazon must be handling the sizing within it's app/programs/readers, rather than coding it inside of anything. Still, I'm unsure how it knows what the page dimensions are if it's not encoded somewhere.

Replies:   Dominions Son
Dominions Son
Updated:

@Crumbly Writer


Still, I'm unsure how it knows what the page dimensions are if it's not encoded somewhere.


It doesn't. Page size is device / device settings dependent. There is no fixed page size

Replies:   Crumbly Writer
Crumbly Writer

@Dominions Son

It doesn't. Page size is device / device settings dependent. There is no fixed page size

Well, aside from the fact that I meant "image dimensions" and not "page dimensions", then how to websites/epubs handle images which are too large for the page? Do they display the full 300dpi image, even on tiny devices, or does the device somehow know how big to make it, and if so, how?

In the end, I suspect I'll need to research this, as I suspect I'll have to do several 'width specific' conditionals where I quiz the device for the page width and then specify what percentage of the page to make it (i.e. 90% of a small phone but only 50 or 60% of a full monitor).

Replies:   Dominions Son
Dominions Son

@Crumbly Writer

then how to websites/epubs handle images which are too large for the page?


I can't speak to either websites or epubs, but my Kindle paperwhite automatically scales images to fit the display. This is handled on the device itself. I have sent 16mp phots to my paperwhite Kindle. Other than being grey scale rather than color they display just fine.

Do they display the full 300dpi image


There is no such thing as a 300dpi image. The image is simply x pixels by y pixels. It knows nothing about display resolutions or inches.

Replies:   Crumbly Writer
Crumbly Writer
Updated:

@Dominions Son


There is no such thing as a 300dpi image. The image is simply x pixels by y pixels. It knows nothing about display resolutions or inches.


Only, my PC based Amazon display (which Amazon uses to preview how the book appears on any given device) doesn't show the images as full page displays, but instead seems to know precisely how big to make them. (Or maybe not, I'll have to go back and check it again. They may simply default to a set percentage for all images.) However, for most images displayed on a phone/tablet, there are the number of pixels, and the physical dimensions of the image (inches or centimeters), or at least that's how Photoshop stores the information, and how I thought they were passing the information along to each device.

However, you're right. When I view an image on a phone/tablet, it fits it onto a page, unless the image is too small, at which point it'll only display it at its maximum pixel count (the point, beyond which it pixelates).

If I'm not misinformed, you can query the device to determine the dimensions of the display (though I've never tried it myself), so it should be possible to adjust the size of the image on the fly so it doesn't make it either too large or too small.

Dominions Son

@Crumbly Writer

least that's how Photoshop stores the information


That information is stored in Photoshop's internal settings. Some image formats have general purpose meta data that it might be able to store that information in a specific image for, but that data is still mostly specific to Photoshop. Other image viewers/editors may pick it up, or may ignore it.

Dominions Son

@Crumbly Writer

When I view an image on a phone/tablet, it fits it onto a page, unless the image is too small, at which point it'll only display it at its maximum pixel count (the point, beyond which it pixelates).


Or if the image is too big, and the aspect ratio of the image doesn't match the aspect ratio of the display, the image will be shrunk to fit the display, but won't take up the whole display.

Ernest Bywater

I think you'll find the reading device is auto-shrinking the device to match the display while maintaining the ratio.

I use GIMP to make a copy of the images for the size to put in the document. GIMP is a free program that works much like Photoshop 5.

Lazeez Jiddan (Webmaster)

@Crumbly Writer

For the first time I'm trying the same thing with B/W images, so I need to really clean up the code for these images!


Usually it's handled with CSS.

So you do:
< img src="http://example.com/image.jpg" width="500" height="500">

and then for the CSS you do something like:

img{
width: 100%;
max-width:1024px;
height: auto;
}

Width:100% makes it fit fully on any screen regardless of the screen size. However, max-width:1024px limits it to maximum of 1024px, so if the window is 900 pixel wide, the image will be displayed at 900 pixels. If the window is 1540 pixels wide, then the image will be limited to 1024 px and it will be displayed at 2/3 the width of the window.
The 'height:auto' makes sure that whatever the width is, the height is set to keep the image in proper aspect ratio.

Replies:   Crumbly Writer
Crumbly Writer

@Lazeez Jiddan (Webmaster)

Width:100% makes it fit fully on any screen regardless of the screen size. However, max-width:1024px limits it to maximum of 1024px, so if the window is 900 pixel wide, the image will be displayed at 900 pixels. If the window is 1540 pixels wide, then the image will be limited to 1024 px and it will be displayed at 2/3 the width of the window.
The 'height:auto' makes sure that whatever the width is, the height is set to keep the image in proper aspect ratio.

Technically, from what I've observed, if you only set one (either width or height), the overall image retains proportionality (i.e. the ratio between them doesn't change so the image isn't distorted).

However, your code provides an ideal solution.

TechnicDragon

Also keep in mind the css is usually a separate file and not one you may have access to on a given site. So while the html document may refer to the file, without direct access to it yourself, you'll never know what code is included. On top of that any code you write into the files you submit may be stripped out before the reference to the site css is added, thus enforcing the use of only the code the site provides.

Replies:   Crumbly Writer  graybyrd
Crumbly Writer

@TechnicDragon

Also keep in mind the css is usually a separate file and not one you may have access to on a given site. So while the html document may refer to the file, without direct access to it yourself, you'll never know what code is included. On top of that any code you write into the files you submit may be stripped out before the reference to the site css is added, thus enforcing the use of only the code the site provides.

We were essentially discussing CSS as it relates to ePubs, rather than on a site like SOL which has it's own site-wide restrictions, though for me, I can also implement the same CSS instructions on my own website.

graybyrd

@TechnicDragon

Also keep in mind the css is usually a separate file and not one you may have access to on a given site.


I've often been able to open the source listing of the HTML page (or the ePub) and find the URL or location of the CSS file. That URL can be entered in a browser and the CSS downloaded. Useful to see what's going on, or for study.

Back to Top