Mysterious behavior of pictures in my recent article

[nancylebov]

redbird had trouble with this article with three pictures. They were covering earlier entries on her friendslist.

This is frustrating at my end because I like having pictures in my articles, but I don't want to screw up other people's friendslists, and I can't replicate redbird's problem-- the pictures are well-behaved at my end.

I've replaced the first brocciflower picture (it was either this or this, and I had to tweak the proportions because just changing the size equally for height and width didn't work. Replacing it with a better behaved brocciflower picture didn't help redbird either.

I didn't replace the Gaudi illo, but maybe I should have-- I needed to tweak the proportions for it, too, to make it work.

I've cut the 3d Mandelbrot illo, too, just in case, but I didn't have any weird proportion issues with it.

Anyway, if anyone has any idea about what could have been causing this problem, I'm quite curious. Unfortunately, I didn't save the original post, but the only change is that I added cut-tags.

Comments

[avram]

Looking at it right now, the first two images are fine, but the third is sprawling vertically.

The IMG tag for that third image reads:

<img src="http://defencedebates.files.wordpress.com/2008/12/gaudi-house1.jpg" height="100%" width="65%" />

The bit I've put in bold means that you're telling the browser to display the image at full height and 65% width.

The actual dimensions of the image are 850 pixels wide by 640 tall. For some reason it's displaying much taller than 640 pixels. Even if it was displaying correctly, it would be squashed horizontally.

Also, the images all seem to be hosted on various locations around the net. Are you hot-linking? This is generally considered poor netiquette and a form of bandwidth theft. Furthermore, people who discover their images have been hot-linked sometimes retaliate by replacing the image with a ruder one.

[madfilkentist]

If the images in question are small and few, and if the page using them also provides a link to the contextual site, hot-linking isn't usually considered objectionable. But I do get really annoyed with posts that link to a webcomic (for example) without providing any clue where it came from. 850 x 640 is pushing the bandwidth usage, though.

Technically, using different percentages for horizontal and vertical dimensions is an odd thing to do. For scaling, I'd just specify one dimension which I want to scale to, e.g., width="500" to scale the width to 500 pixels and the height proportionally. (Or is there a reason you [Nancy] want the image distorted? I'm not sure what you're trying for.) Scaling doesn't affect the number of bytes transferred, of course.

As for the friends-list issue, putting the images behind a cut tag is generally considered an acceptable solution.

[nancylebov.livejournal.com]

I didn't realize i could just specify one dimension and generally let the other take care of itself.

[nancylebov.livejournal.com]

I didn't realize hot-linking (to something small, non-commercial, and non-insulting like my lj) was a problem. I assume the alternative is to store the image somewhere (at livejournal?) and link from there.

I wasn't distorting the image for the fun of it-- for some reason, the image was coming out distorted in my preview (likewise for my first brocciflower), so I was correcting it.

[redbird]

I think it was the Gaudi picture that was sprawling all over the page, but I can't find that section of my friends list for yesterday quickly.

"Small" is probably the key point here: some people will object to even non-commercial hot-linking if the linked version is getting a lot of hits.

[nancylebov.livejournal.com]

Even if you could find that section of your friends page, the picture's under a cut now.

How big is "small"? I assume I have maybe 200 readers.

[green-knight.livejournal.com]

The problem with hotlinking is that someone else pays for the bandwidth so you can make use of the image; and it wasn't clear to me that they weren't your images.

That is, as agrumer says, doubtful behaviour. If an image is hosted on a site that provides you with code - like Flickr, which gives you a link to the image _and to Flickr_, that's fine. (Lolcats work the same way - you go to their page, you get the embed code, it contains a link back to their site.).

And no, unless the other person gives you permissions (creative commons license etc), you can't just grab it and store it elsewhere - it's _their_ content. Not yours. It sets a really bad precedent.

(As a photographer, I feel rather strongly about it. I'd make an exception for people using pictures as LJ icons, because that's about a personal expression, but I'd want to be credited anyway.)

[nancylebov.livejournal.com]

I'll probably start using flikr.

The bandwidth issue makes sense to me.

However, I assume that any image on a blog or lj which isn't claimed as having been made by the poster wasn't made by them. I'm not sure that this sort of thing is fair use, but it's got blurry boundaries.

As for the particular images, I'm not a mathematician. I didn't say "here's this cool 3d Mandelbrot image I came up with". I linked to an article by the person who did come up with it.

I could have photographed a brocciflower and Gaudi myself, but what were the odds?

[green-knight.livejournal.com]

I assume that any image on a blog or lj which isn't claimed as having been made by the poster wasn't made by them

This may be a cultural thing, but I assume that any image that isn't attributed belongs to the poster.

I could have photographed a brocciflower and Gaudi myself, but what were the odds

I would not have batted an eyelid at that. I take so many pictures of so many weird items and places that this seems perfectly ordinary behaviour. And I've been known to go and take pictures so that I could put them up on Flickr and share them.

[darius.livejournal.com]

The height="100%" means 100% of the 'containing element' in HTML. Which I suppose is something like the whole page in most people's friends pages (it did sprawl over mine, in Safari). It sounds like you expected it to mean 100% of 850 pixels instead, Nancy.

You could have left out the height attribute and set just the width, and the height would come out in proportion. Giving a number in pixels instead of a percentage seems safer for shrinking it -- some people use large windows.

I don't mind a few large pics with no cut-tag, generally, myself.

[nancylebov.livejournal.com]

The height="100%" means 100% of the 'containing element' in HTML. Which I suppose is something like the whole page in most people's friends pages (it did sprawl over mine, in Safari). It sounds like you expected it to mean 100% of 850 pixels instead, Nancy.

Exactly.

Damfino if there's a more sensible way to express "fills containing element" vs. "same number of pixels as the image linked to".

And the containing element is irresponsibly huge for friends pages. If I were in charge, it would be bigger for going into an lj than it is for the friends page.

[avram]

Different browsers may disagree about just what the containing element is. (This is exactly the sort of thing that Microsoft likes to get wrong.) And it'll vary anyway depending on what LJ layout you're using.

I don't think that means what you think it means

[https://www.google.com/accounts/o8/id?id=AItOawmUTs4EjNltnFL92UB5T07pm_kXHrjm_CE (from livejournal.com)]

No, the part you've put in bold means the picture should be stretched to 100% of the total height of the containing HTML element, which in this case is the entire page, scrollbars included, so as more comments get added, the picture gets bigger and bigger, and, since it doesn't start at the top of the page, some is always clipped off the bottom.

Since the original picture is 850x604, the tag should have been:

{img src="http://defencedebates.files.wordpress.com/2008/12/gaudi-house1.jpg" width="850px" height="604px" />

[dcseain.livejournal.com]

The picture below the broccoflower is so distorted that i cannot even comment on the other post. I'm using Safari on a Mac.

[dcseain.livejournal.com]

Oh, apparently that's Gaudí's Sagrada Familia. WAY tall as displayed.

[thnidu.livejournal.com]

Can't say anything helpful that others haven't already said. Maybe take out the percentages entirely. Maybe specify a pixel value for just the width.

But I hadn't seen the previous post. Wow! (Except that I keep reading "3d Mandelbrot" as "third Mandelbrot"... hey, I haven't even had firsts! ... I'd use "3-D" instead.)