Image width

[shapper]

Hello,

I am displaying a few images which width goes from 60px to 80 px.
What is the correct way to resize all images to 60px width and keep
the proportions?

Just setting the width to 60px and not setting the height?

Thanks,
Miguel

 

[Adrienne Boswell]

Gazing into my crystal ball I observed shapper <[email protected]>
writing in @a7g2000yqk.googlegroups.com:

Hello,

I am displaying a few images which width goes from 60px to 80 px.
What is the correct way to resize all images to 60px width and keep
the proportions?

Just setting the width to 60px and not setting the height?

Thanks,
Miguel

The best way to resize an image is to use an image editor, not the
browser. There are several reasons for this:
1. Browsers do a shitty job
2. The user still downloads the original image, so if you have an image
that is 8x10 inches and use a browser to reduce it to 100x200 pixels,
the user still has to wait for the entire 8x10 to download. On a slow
connection, that can be a very long time.

 

[Jonathan N. Little]

2. The user still downloads the original image, so if you have an image
that is 8x10 inches and use a browser to reduce it to 100x200 pixels,
the user still has to wait for the entire 8x10 to download. On a slow
connection, that can be a very long time.

Here, here! Damn tired of those 8-megapixel "thumbnails"

 

[Nico Schuyt]

shapper wrote

I am displaying a few images which width goes from 60px to 80 px.
What is the correct way to resize all images to 60px width and keep
the proportions?
Just setting the width to 60px and not setting the height?

Or (in the head of the page):
<style type="text/css" media="all">
img {width: 60px} /* (or img.classname to apply the size only to specific
images) */
</style>


Better (as explained by Adrienne Boswell and Sid): resize the images in an
editor. IrfanView (free) makes it very easy to resize images in batch

 

[dorayme]

Gazing into my crystal ball I observed shapper <[email protected]>
writing in @a7g2000yqk.googlegroups.com:


The best way to resize an image is to use an image editor, not the
browser. There are several reasons for this:
1. Browsers do a shitty job

If you provide an 80px wide image on the server, it would be fine at
60px in the browsers I use. Which browsers would it look shitty in?

 

[dorayme]

shapper wrote


Or (in the head of the page):
<style type="text/css" media="all">
img {width: 60px} /* (or img.classname to apply the size only to specific
images) */
</style>


Better (as explained by Adrienne Boswell and Sid): resize the images in an
editor. IrfanView (free) makes it very easy to resize images in batch

Only better if the OP's 80pxers look lousy at 60px. Care to show some
examples and the browsers you are seeing this in for our information?

 

[Nico Schuyt]

Only better if the OP's 80pxers look lousy at 60px. Care to show some
examples and the browsers you are seeing this in for our information?

Test page: http://www.nicoschuyt.nl/test/testimage.htm

http://www.nicoschuyt.nl/test/testimage-ie6.jpg as shown in IE6 en Opera
9.32

FireFox does a better job

 

[dorayme]

Test page: http://www.nicoschuyt.nl/test/testimage.htm

http://www.nicoschuyt.nl/test/testimage-ie6.jpg as shown in IE6 en Opera
9.32

I had in mind a test is to keep the aspect, not to distort it. Look at
OP's reasonable requirements to "keep the proportions".

 

[Nico Schuyt]

I had in mind a test is to keep the aspect, not to distort it. Look at
OP's reasonable requirements to "keep the proportions".

Sorry, I thought for a moment that the "Just setting the width to 60px and
not setting the height" was his suggestion for a solution.
Proportional resized:
http://www.nicoschuyt.nl/test/testimage.htm
http://www.nicoschuyt.nl/test/testimage-ie6.jpg

 

[Nik Coughlin]

Sorry, I thought for a moment that the "Just setting the width to 60px and
not setting the height" was his suggestion for a solution.
Proportional resized:
http://www.nicoschuyt.nl/test/testimage.htm

What editor are you using? The HTML and CSS resized images look _nicer_ in
Firefox than the editor resized one

 

[Neredbojias]

What editor are you using? The HTML and CSS resized images look
_nicer_ in Firefox than the editor resized one

And in ie8 and in Opera, incl. 9.80 (10 beta), and in Safari. Image
resizing, esp. small images resized at lesser pencentages, is fine as
performed in modern browsers.

 

[Nico Schuyt]

"dorayme" wrote [...]
Sorry, I thought for a moment that the "Just setting the width to 60px
and
not setting the height" was his suggestion for a solution.

You may have missed the point: if you just set the width and leave the
height as auto, according to CSS specs the browser maintains the aspect
ratio automatically for you.

I just shouldn't join in the discussion at two O'clock in the morning

The quality of rescaling in (some) modern browser is impressive!

 

[dorayme]

"dorayme" wrote [...]
Sorry, I thought for a moment that the "Just setting the width to 60px
and
not setting the height" was his suggestion for a solution.

You may have missed the point: if you just set the width and leave the
height as auto, according to CSS specs the browser maintains the aspect
ratio automatically for you.

I just shouldn't join in the discussion at two O'clock in the morning

The quality of rescaling in (some) modern browser is impressive!

The quality of downsizing especially is good enough for small
differences (especially like 80 to 60px). Your screenshot tells a
dismaying story about IE6 (and perhaps other IEs?). A perfectly good
technique of resizing (down) in the HTML (used in moderation) faces this
show stopper of IE!

A curiosity: in Mac Opera, between 330% and 340% zoom, the CSS resized
triple Vs are very noticeably bigger than the HTML resized one!