Image embed ettiquite question

[malymin]

I'm working on a post that discusses use of color in a series' character designs and peripheral media, so I have to embed lots of images in order to make my point. I've been designing "photosets" by hand using css and html. The simplest way for me to make these image sets is to have a grid of images, where all the images in a row shrink and grow to match the width of the visible post-space.

However, some images, even if placed in a "photoset" with this technique, still stretch a page vertically quite badly. For example, a full image of a character standing in place with no background is often very vertical. This ends up visually "overwhelming" the text, which I don't want to do. Yes, putting the image under a cut prevents it from being annoying in reading page and journal-page views, but I also want the image to look nice while visible, and not overwhelm the paragraphs above and below it.

Is there any common etiquette for the maximum height (in pixels) of an embedded in-post image in a post published to a community?

Comments

[yourlibrarian]

I can't say I've heard any specifics, but I run a few communities, one of which is about photos only. There the photos are not supposed to be wider than 700px or higher than 400px, and one must cut tag after the first one.

However if you're using a grid, I could see that being a problem if it's not flexible. I've noticed that when people post icons they only do a maximum of 6 across though the verticals can be quite long. However they generally have no text, which is your concern. I sometimes have the same issue when posting in common_nature that the photos can obscure a few lines of text.

As a side note, this sounds like an intriguing post! Do share it at meta_warehouse when you've sent it out.

[malymin]

400px by 700px, got it!

So, let's say that I want to share these screenshots of a DVD special feature, originally posted by a tumblr blog:

The original images are quite big - they're inconsistently cropped, but roughly 1000px across and 600px tall each.

Should both images be a maximum width of 700 pixels across, or should their combined width be 700 pixels? As currently displayed, I've set both images to be individually 400px tall, and for the width of their combined display in the box to be 700px.

[yourlibrarian]

If they're going to be side by side then max 700px. The image above looks like a fine size to me.

Like I said, others might have different advice, but I've noticed that many people have rather narrow layouts here for their blogs, and very wide images will break them. Back when artists created banners regularly, I noticed they tended to stay under 1000 px for an account header, and even smaller when within a post (hence the 700px).

Yes, Dreamwidth does not automatically resize images (Pillowfort will, and if they're past a certain size it won't upload them at all). More work unfortunately!

[malymin]

Oh, the images I'm posting should automatically shrink themselves when the viewport is smaller! I wrote some inline css to make it happen. For a standalone image, for example, I could set the image to have the following values:

• width:100% (this css is described here)
• max-width:700px (this css is described here)

This would basically tell the post "the image should fill the width of the post that it's inside (but be no wider than that element) if the width of the viewed post is 700 or fewer pixels, but it should be no wider than 700 pixels if the post takes up a wider amount of space."

Just "width:100%" in the inline css for an image helps prevent it from spilling "outside" the width of the viewport and shrinks it to fit, because it means "100% of the width of the html element it's contained inside", not "100% of the image's original width." (the height adjusts itself to fit the original aspect ratio, unless specified otherwise.)

I'd already started using this to resize large embedded images to be no bigger than the width of the post-element.

My main problem has been that on larger viewports, like widescreen monitors or even just an ordinary laptop, just setting an image to "width:100%" made it overwhelmingly huge in both width and height (although it still fit "inside" the post" unless it was already a very horizontal image, and the image would end up dwarfing the text that I want people to read and making it hard to read the text without scrolling a lot.

Sorry if I'm poorly articulating myself...

[yourlibrarian]

Not at all, I forgot that from your first comment. But yes, as a widescreen monitor user myself, I know it would be really big 😉