Liquid images?

Is it possible to create images using em's so that the images re-size?

[Riggy]

Hi,

I'm new to building web pages, but have managed to build a basic liquid site, which seems to work on most browsers!

However, the only thing is that my images are specified in pixels and therefore stay static when the page reduces or expands.
I understand that there is a way of making the images change size along with the text, using 'em's'?

I have used a seperate CSS which is linked to each page, - just in case that is of any relevance!?!

I would be very grateful if anyone could point me in the direction as this has got me puzzeled!

Thanks, Riggy

[benihana]

you could use ems or % to resize the images, but the qulaity will reduce dramatically when they are displayed at anything other than their actual size.

[TheDoctor]

If you specify the images as their actual size, including that in the HTML, pages load faster. It doesn't seem like separation of content and design, but speed of loading beats ace high :-)

What you should do is design the text to look good however it flows around the images.

And welcome to WebmasterWorld.

[rcjordan]

This image resize problem is what the liquid-design group tends to ignore while they preach of the miracle healing powers of css, ems, and percentages. Sorry, but I know for a fact that all the text-flowing in the world isn't going to make that real estate photo that was great at 800 res have the same curb appeal when it's postage stamp size at 1280.

The best answer I've come up with is swapping stylesheets based on res and then using something like the Fahrner image replacement technique to load one of a selection of photos properly scaled for that page. But that's a lot of work.

[benihana]

rcjordan

with a liguid layout or not, the photo at 800 will still be postage stamp size at 1280 - it will just look more in proportion to the text etc.

[willybfriendly]

Yes, images can scale with the use of ems.

http*//www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm shows some examples of this, and how to do it.

Images made larger than what they were optimized for may tend to degrade, but going smaller should not be a problem (exept for download times).

WBF

[rcjordan]

>800 will still be postage stamp size at 1280

Right, so you swap the image based on res. Or, to lighten the image inventory you scale using percentages for ranges of resolution, then assign an image to each range.

The point is, except for primarily text pages, liquid design is not a cure-all. For sites that depend on graphic presentations, such as real estate, product catalogs, or even travel destinations, liquid margins/columns/text doesn't solve their problems.

[rcjordan]

>may tend to degrade, but going smaller should not be a problem

Smaller is a problem, too, particularly with heavily patterned (bricks) or angular lines (roof eaves). In fact, of the two (degrades when larger, or gets jagged when smaller) I receive more complaints on scaling down than up.

[TheDoctor]

all the text-flowing in the world isn't going to make that real estate photo that was great at 800 res have the same curb appeal when it's postage stamp size at 1280

Which is why you need to think about design and layout, and check your pages out in different browsers at different resolutions. And be prepared for the fact that different users are going to see different designs.

Web page layout isn't like painting by numbers. You have to keep your wits about you and make real judgements based on the specifics in front of you. Advice like "go liquid" can only be the starting point.