Image sizing

So for fun and mostly for a project currently being worked on, I have had to work with images in a variety of orientations and quality.  What’s interesting is finding out what works well, what guidelines request and what you want to work, but just doesn’t.

First:
What worked well was exporting from InDesign, images looked great upon first look, then you crack open the files and look at what I call div land. Essentially as things have been mentioned many times on the #ePrdctn conversation, this alone could be a drinking game. The problem is InDesign will wrap your images in a div, usually 2 I have seen unless you match it up with say a caption, then you get 3 or so. An object div to keep the text and image together is the first level, after that, it gets just plain interesting. Along with this the image has a class with styling, mainly width and height attached to it. Now some of this I will admit, is InDesign, also user. As I setup an object style, changed things in the style, that affects everything. Part of this problem I believe is that you may want to do something simple; say center, margin-top and bottom 24px, just to throw a number there. What happens is you can get 15 lines of css for some other part of one of the divs. I’ve also found choosing relative to page is better, you get the %, however, it doesn’t seem to always work. I’ve had files come out still in px, so I need to further investigate what is holding that. It’s more then likely something overriding a setting in ID that is causing it.

Second: 
Now many people have posted results for what they do for images, Liz Castro posted this, back in 2011 and then again she updated some info in June of 2013 here. Now what is interesting is I have used the meta approach that Liz and Douglas mentioned, right there in the apple spec. I’ve also used the image set on div and image class set to 100%. All have a mix of results for working, nothing 100%. Amazon in their specs say that:

“3.6.9 Image Guideline #9: Controlling Image Aspect Ratio 

To preserve aspect ratio of images, width and height cannot both be set to a fixed percentage. Either width or height can be set to the fixed percentage (such as 100%), but then the other property should be set to “auto” to preserve the aspect ratio.”

Ok, that sounds good, they happen to skip one part and say apply that directly to image or an image wrapped in a div. So I tried it a variety of ways, works if you have no image class and apply it to the div or flip that and don’t have it applied to the div but to the class for the image. Nice, allows you to change the % used for each image if need be or go with one. Looks great on kindle fire, works well. What’s interesting is combining the respect iBooks approach with a div, works off and on, interesting. Also note that, after 3 instances of the respect class; respect, respect-larger and respect-largest, they all worked fine, minute i added a respect-smaller, that class never held, no matter what was done, so their seems to be a limit the meta addition runs into.

Third:
So what is it I wanted it to do? Simple really, scale the image down percentage wise based on a class. Preferred approach would be a div class with the image width at percentage, height at auto and then the image class set at 100% to fill the div, just because I like that. It’s simple, works well, works on kindle fires, works in epub and everyone is happy. That’s what I want, then I feel tempted to grab a sledgehammer and go after kindle for iOS. Reasons for this are many, but here’s a really simple one, everything I just mentioned above that works on iBooks or kindle fire, doesn’t work in kindle for iOS. See, you need a .azk file, which previewer can create for you, however, it seems that .azk has decided to go off the rails and start drinking early. It likes to ignore everything I mention above. Seriously, everything I did that would hold on the kindle fire, hell even kindle for mac and iBooks, it just made every image as large as possible and gave me the finger. Yes, I know it’s a device, but I swear the bastard is laughing.

So after all of this, I can tell you that it’s frustrating. I found adding a couple divs, 2-3 around the image finally held it, but not always. The frustrating part is that this is amazon, all amazon, they could simply have the department working on kindle for iOS, yes, they have separate departments and teams that work on the apps and devices. They could have that team, you know, talk to the others, say hey, what are you doing for this or that? Maybe put out a spec that says, to get this to hold, you will want to do this in our other proprietary format. It’s all about information and communication, and in this regard, amazon has dropped the ball.

Oh, forget about emailing amazon and kindle kdp support or any other, when I asked, they said I needed to call because of the topic. Called, they then told me they offer no phone support for kdp and best of luck. Now if that isn’t top notch go screw yourself, I don’t know what is.

In the end, it’s no better then we were before. You now have to weigh the odds someone will read on their kindle iOS app, is it worth it to worry about a format amazon obviously doesn’t provide any info on. So if someone has a solution, found a work around, found something that, well let’s say mostly consistent, love to hear it. If amazon wants to ever really say why they did this crap in the first place, that’d be great as well since beyond them just putting another wall up, it makes no sense. If it is a development approach, try something else or soon I can see people not caring how it looks on your ipad app and let you, amazon, deal with customer issues, as it is your format and platform.

Update:

so the solution to the amazon sizing if images for azk format is to size everything as pixels in an image class. Have a div for controlling center alignment if needed. The downside is px measurement on screens that adjust and reflow is not ideal. Also amazons own spec recommends to use percentage and says nothing about px use in kf8 or azk. At least it’s known now but seems like quite the step back to be honest.