Scale Image using CSS

[shapper]

Hello,

I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.

Can I scale the image using CSS?

Thanks,
Miguel

[Ben C]

On 2008-04-28, shapper <md*****@gmail.comwrote:

Hello,

I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.

Can I scale the image using CSS?

Yes, just set its width (or height, or both) to whatever you want.

e.g.

img.foo { width: 40px }

The browser will resize it but not very nicely. If you want better
quality, make up separate files for the different sizes using your
favourite image editor such as the GIMP.

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2008-04-28, shapper <md*****@gmail.comwrote:

Hello,

I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.

Can I scale the image using CSS?

Yes, just set its width (or height, or both) to whatever you want.

e.g.

img.foo { width: 40px }

The browser will resize it but not very nicely. If you want better
quality, make up separate files for the different sizes using your
favourite image editor such as the GIMP.

Going up or going down from native size determines the level of
'niceness'. I am taking the comparison between doing it yourself with
img programs and letting browser do it. And I suppose one can expect the
enlargement direction, being a rather impossibly difficult thing to do,
will be handled worse by a non-specialist program like a browser

There are upsides and downsides to the practice of allowing a browser to
do the sizing. The advantage is reduced author bother and having less
complex server files (less names, less files, often less folders). The
disadvantages are less quality. But the details of all this stuff I
leave out unless someone is particularly interested to pursue it with
open mind.

In my own practice, almost invariably, I prepare pics for the size I
want for each page and I reduce complications with naming by having
exactly the same names for all sizes but batch the different sizes into
separate folders. And I almost never increase the size of a picture, no
matter if I use the classiest software (there is some software that
makes claims to be able to enlarge well but they can never really
succeed, imo, without a developed AI - and none have this!).

Nevertheless, the question of quality of image for many pics on the web
is not as clear cut as it might seem. At least FF and Safari don't do
all that much worse to quality img software. One can pretty well see if
you look closely the difference when browser resizes up cf. with img
software enlargement (both doing a lousy job!). But in reduction, the
difference does not exactly scream out at you.

<http://dorayme.890m.com/alt/browserReduction.html>

--
dorayme

[Jonathan N. Little]

dorayme wrote:

>
Going up or going down from native size determines the level of
'niceness'. I am taking the comparison between doing it yourself with
img programs and letting browser do it. And I suppose one can expect the
enlargement direction, being a rather impossibly difficult thing to do,
will be handled worse by a non-specialist program like a browser

Getting something from nothing is always a tricky process except with
the fantasy in CSI....

>
There are upsides and downsides to the practice of allowing a browser to
do the sizing. The advantage is reduced author bother and having less
complex server files (less names, less files, often less folders). The
disadvantages are less quality. But the details of all this stuff I
leave out unless someone is particularly interested to pursue it with
open mind.

Another downside is bandwidth. A page of "virtual" thumbnails is
absolutely no savings other than "screenspace" since the full data must
be downloaded regardless of the html attribute| css property
constraints. I just love those photographer online galleries with the 50
odd 50x50 "thumbnails" and a hefty multi-megabyte download! It is so
much fun watching those itsy little pics paint over the minutes....

>
In my own practice, almost invariably, I prepare pics for the size I
want for each page and I reduce complications with naming by having
exactly the same names for all sizes but batch the different sizes into
separate folders. And I almost never increase the size of a picture, no
matter if I use the classiest software (there is some software that
makes claims to be able to enlarge well but they can never really
succeed, imo, without a developed AI - and none have this!).

Sometimes, depending on the quality of the original image, subject
matter, and paying with filters and selective filtering you can get some
decent results. But there are definite limits. Just love those cop shows
where they have a 6 pixel enlargement of a ATM's snap of a license
plate, and poof! All 8 digits are clearly rendered! Yeah!

>
Nevertheless, the question of quality of image for many pics on the web
is not as clear cut as it might seem. At least FF and Safari don't do
all that much worse to quality img software.

Maybe the way some people use software, or really cheap consumer
software. Most browsers employ pixels dropping to reduce an image and in
no way is this close to anti-aliasing algorithms used by image editors
and depending on how much you reduce an image some sharpen or adaptive
unsharpen mask filter will most assuredly improve the result.

One can pretty well see if
you look closely the difference when browser resizes up cf. with img
software enlargement (both doing a lousy job!). But in reduction, the
difference does not exactly scream out at you.

<http://dorayme.890m.com/alt/browserReduction.html>

Kind of hard to say without seeing the original large image, but a quick
attempt, literally 30 seconds, with a little filtering and tricks to
remove some artifacts...

http://www.littleworksstudio.com/tem...specslarge.jpg
specslarge.jpg (JPEG Image, 600x451 pixels)

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Jeff]

Ben C wrote:

On 2008-04-28, shapper <md*****@gmail.comwrote:

>Hello,

I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.

Can I scale the image using CSS?

Yes, just set its width (or height, or both) to whatever you want.

e.g.

img.foo { width: 40px }

The browser will resize it but not very nicely. If you want better
quality, make up separate files for the different sizes using your
favourite image editor such as the GIMP.

As with almost everything, YMMV.

If you choose to use browser sizing, you'll probably want an
unsharpened base image. That's also true with resizing images in your
favorite image editor. Don't sharpen before resizing.

A more interesting example would have been to see the effect of
browser resizing on sharpened, or images with hard edges. That's where
you can expect some ugly results. Typically this is all about edges and
what happens to them.

Now, with my CMS stuff, I resize base images and have found that not
all resizing algorithms are similar (there's 10 or so that I know of).
And what works very well for one type of image, may work very poorly for
another.

I posted more info on this some time ago to a related group, and as
is often the case, no one was interested. My current favorite is
"Blackman". For large numbers of images that you want resized you may
wish to consider speed also. Once again, if you are rescaling different
kinds of images than I am, you may find something else works better.

If you don't have access to your image editors resize algorhithms,
google will yield some general techniques.

Although I never resize up browser images, scaling up a third on
"normal" images usually works fairly well.

Jeff

[dorayme]

In article <a7**************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:

dorayme wrote:

Going up or going down from native size determines the level of
'niceness'. I am talking the comparison between doing it yourself with
img programs and letting browser do it. And I suppose one can expect the
enlargement direction, being a rather impossibly difficult thing to do,
will be handled worse by a non-specialist program like a browser

Getting something from nothing is always a tricky process

Yes. One tricky part of the process is to know what to add for what
purpose. Things machines are particularly bad at guessing purposes.
Never mind, other difficulties.

There are upsides and downsides to the practice of allowing a browser to
do the sizing. The advantage is reduced author bother and having less
complex server files (less names, less files, often less folders). The
disadvantages are less quality. But the details of all this stuff I
leave out unless someone is particularly interested to pursue it with
open mind.

Another downside is bandwidth.

This seemed too obvious to mention but I am glad you have. <g>

The point of my post and examples was simply that for a whole lot of
pics, a great many people would be none the wiser if the browser reduced
the px size (to take the more sensible direction) or it was done by a
quality image program. We are prone to say, as Ben said and I often say
and think, that browsers are lousy at it or not very good or some such.
But in fact they are not *all that bad* for a real lot of pics.

In a site devoted to quality photography, it would matter more than for
many other sites which use pics to illustrate things.

Sometimes, depending on the quality of the original image, subject
matter, and paying with filters and selective filtering you can get some
decent results.

Indeed. In fact, this is something I do often for print design work
where none of my own pics are suitable and it is a bother to go make
one. But when I do have access to something interesting but very small.
Given the level of abstraction that is suitable, one can make a super
large pic that is absolutely fine. But here we are getting away from the
idea of preserving the original. I also recognise your point that one
can do for the latter with a bit of filtering or other methods (heavy
re-touching being the extreme).

Nevertheless, the question of quality of image for many pics on the web
is not as clear cut as it might seem. At least FF and Safari don't do
all that much worse to quality img software.

Maybe the way some people use software, or really cheap consumer
software. Most browsers employ pixels dropping to reduce an image and in
no way is this close to anti-aliasing algorithms used by image editors
and depending on how much you reduce an image some sharpen or adaptive
unsharpen mask filter will most assuredly improve the result.

We all know the spiel. But there is another side to things which I was
hoping to draw your attention, one of actual results in the real world.
I was imagining a test that might surprise us all. Bu I won't describe
it unless anyone is real keen.

>

One can pretty well see if
you look closely the difference when browser resizes up cf. with img
software enlargement (both doing a lousy job!). But in reduction, the
difference does not exactly scream out at you.

<http://dorayme.890m.com/alt/browserReduction.html>

Kind of hard to say without seeing the original large image

This is a misunderstanding. You can see the *relevant* original. That
was the whole point.

--
dorayme

[Gus Richter]

dorayme wrote:

In article <a7**************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:

>dorayme wrote:

>>Going up or going down from native size determines the level of
'niceness'. I am talking the comparison between doing it yourself with
img programs and letting browser do it. And I suppose one can expect the
enlargement direction, being a rather impossibly difficult thing to do,
will be handled worse by a non-specialist program like a browser

Getting something from nothing is always a tricky process

Yes. One tricky part of the process is to know what to add for what
purpose. Things machines are particularly bad at guessing purposes.
Never mind, other difficulties.

>>There are upsides and downsides to the practice of allowing a browser to
do the sizing. The advantage is reduced author bother and having less
complex server files (less names, less files, often less folders). The
disadvantages are less quality. But the details of all this stuff I
leave out unless someone is particularly interested to pursue it with
open mind.

Another downside is bandwidth.

This seemed too obvious to mention but I am glad you have. <g>

The point of my post and examples was simply that for a whole lot of
pics, a great many people would be none the wiser if the browser reduced
the px size (to take the more sensible direction) or it was done by a
quality image program. We are prone to say, as Ben said and I often say
and think, that browsers are lousy at it or not very good or some such.
But in fact they are not *all that bad* for a real lot of pics.

In a site devoted to quality photography, it would matter more than for
many other sites which use pics to illustrate things.

>Sometimes, depending on the quality of the original image, subject
matter, and paying with filters and selective filtering you can get some
decent results.

Indeed. In fact, this is something I do often for print design work
where none of my own pics are suitable and it is a bother to go make
one. But when I do have access to something interesting but very small.
Given the level of abstraction that is suitable, one can make a super
large pic that is absolutely fine. But here we are getting away from the
idea of preserving the original. I also recognise your point that one
can do for the latter with a bit of filtering or other methods (heavy
re-touching being the extreme).

>>Nevertheless, the question of quality of image for many pics on the web
is not as clear cut as it might seem. At least FF and Safari don't do
all that much worse to quality img software.

Maybe the way some people use software, or really cheap consumer
software. Most browsers employ pixels dropping to reduce an image and in
no way is this close to anti-aliasing algorithms used by image editors
and depending on how much you reduce an image some sharpen or adaptive
unsharpen mask filter will most assuredly improve the result.

We all know the spiel. But there is another side to things which I was
hoping to draw your attention, one of actual results in the real world.
I was imagining a test that might surprise us all. Bu I won't describe
it unless anyone is real keen.

>>One can pretty well see if
you look closely the difference when browser resizes up cf. with img
software enlargement (both doing a lousy job!). But in reduction, the
difference does not exactly scream out at you.

<http://dorayme.890m.com/alt/browserReduction.html>

Kind of hard to say without seeing the original large image

This is a misunderstanding. You can see the *relevant* original. That
was the whole point.

Perhaps y'all can consider using this method (one image with the
thumbnail included):

<http://www.simplebits.com/bits/photo_zoom.html>

--
Gus

[dorayme]

In article <mZ******************************@golden.net>,
Gus Richter <gu********@netscape.netwrote:

><http://dorayme.890m.com/alt/browserReduction.html>

Perhaps y'all can consider using this method (one image with the
thumbnail included):

<http://www.simplebits.com/bits/photo_zoom.html>

What quite is this relevant to, Gus?

--
dorayme

[Gus Richter]

dorayme wrote:

In article <mZ******************************@golden.net>,
Gus Richter <gu********@netscape.netwrote:

>>>><http://dorayme.890m.com/alt/browserReduction.html>

Perhaps y'all can consider using this method
(_one image with the thumbnail included_):

<http://www.simplebits.com/bits/photo_zoom.html>

What quite is this relevant to, Gus?

Hmmm, image resizing vs. 2-images ........

I "tried" to point out a third alternative. The link demonstrates the
use of _one_ image containing the small _and_ the large version. This
avoids the use of CSS resizing _or_ using 2-images. Isn't this quite
relevant?

Ignore the usage applied in the demo. Look at the image. Then re-apply
the principle to other uses whereby CSS resizing is not used and neither
are two separate images required.

--
Gus

[dorayme]

In article <Be******************************@golden.net>,
Gus Richter <gu********@netscape.netwrote:

dorayme wrote:

In article <mZ******************************@golden.net>,
Gus Richter <gu********@netscape.netwrote:

>>><http://dorayme.890m.com/alt/browserReduction.html>
Perhaps y'all can consider using this method
(_one image with the thumbnail included_):

<http://www.simplebits.com/bits/photo_zoom.html>

What quite is this relevant to, Gus?

Hmmm, image resizing vs. 2-images ........

I "tried" to point out a third alternative. The link demonstrates the
use of _one_ image containing the small _and_ the large version. This
avoids the use of CSS resizing _or_ using 2-images. Isn't this quite
relevant?

Well, not really, no. Not saying what you offer is not interesting in
itself, Gus.

I was not merely outlining different methods of presenting the "same"
image but rather making a point about browser versus
image-software-preparation quality. Your photo_zoom is just another case
of the author doing the image work beforehand.

Here is one thing at the heart of what I am saying:

The average punter who looks at the average thumbnail would not have a
clue whether it was prepared "properly" or simply reduced by the browser.

--
dorayme

[Gus Richter]

dorayme wrote:

>
Here is one thing at the heart of what I am saying:

The average punter who looks at the average thumbnail would not have a
clue whether it was prepared "properly" or simply reduced by the browser.

I agree. I also believe that in most instances CSS resizing is
acceptable, IMHO. As always, it depends .....

--
Gus

[Bergamot]

Gus Richter wrote:

>
Perhaps y'all can consider using this method (one image with the
thumbnail included):

<http://www.simplebits.com/bits/photo_zoom.html>

I don't see how this is much of an improvement over simply changing full
size image dimensions in HTML to fake a thumbnail. It's still loading a
full size image, but now it's a full-size image plus thumb. Pity those
poor folks on dial-up.

--
Berg