Image width

Discussion in 'HTML' started by shapper, Jul 2, 2009.

  1. shapper

    shapper Guest

    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
    shapper, Jul 2, 2009
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed shapper <>
    writing in news:76682ae2-1de4-42c1-b72e-1f0d25eefce6
    @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.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Jul 2, 2009
    #2
    1. Advertising

  3. Adrienne Boswell wrote:

    > 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"

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jul 2, 2009
    #3
  4. shapper

    Nico Schuyt Guest

    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

    --
    Nico
    Nico Schuyt, Jul 2, 2009
    #4
  5. shapper

    dorayme Guest

    In article <Xns9C3C6157A52A6arbpenyahoocom@188.40.43.213>,
    Adrienne Boswell <> wrote:

    > Gazing into my crystal ball I observed shapper <>
    > writing in news:76682ae2-1de4-42c1-b72e-1f0d25eefce6
    > @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
    >

    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
    dorayme, Jul 3, 2009
    #5
  6. shapper

    dorayme Guest

    In article <4a4cf4dd$0$67814$>,
    "Nico Schuyt" <nschuyt (AT)gmail(DOT)com> wrote:

    > 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


    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?

    --
    dorayme
    dorayme, Jul 3, 2009
    #6
  7. shapper

    Nico Schuyt Guest

    dorayme wrote:
    > "Nico Schuyt" wrote:
    >> 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


    > 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

    --
    Nico
    Nico Schuyt, Jul 3, 2009
    #7
  8. shapper

    dorayme Guest

    In article <4a4d4bdc$0$72808$>,
    "Nico Schuyt" <nschuyt (AT)gmail(DOT)com> wrote:

    > dorayme wrote:
    > > "Nico Schuyt" wrote:
    > >> 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

    >
    > > 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


    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".

    --
    dorayme
    dorayme, Jul 3, 2009
    #8
  9. shapper

    Nico Schuyt Guest

    "dorayme" wrote
    > "Nico Schuyt" wrote:
    >> dorayme wrote:
    >> > "Nico Schuyt" wrote:
    >> >> 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

    >>
    >> > 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

    >
    > 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

    --
    Nico
    Nico Schuyt, Jul 3, 2009
    #9
  10. shapper

    Nik Coughlin Guest

    "Nico Schuyt" <nschuyt (AT)gmail(DOT)com> wrote in message
    news:4a4d9a67$0$20620$...
    >
    >
    > 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 :)
    Nik Coughlin, Jul 3, 2009
    #10
  11. shapper

    Neredbojias Guest

    On 02 Jul 2009, "Nik Coughlin" <> wrote:

    > "Nico Schuyt" <nschuyt (AT)gmail(DOT)com> wrote in message
    > news:4a4d9a67$0$20620$...
    >>
    >>
    >> 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 :)


    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.

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
    Neredbojias, Jul 3, 2009
    #11
  12. shapper

    Nico Schuyt Guest

    "Ben C" wrote:
    > On 2009-07-03, Nico Schuyt <nschuyt> wrote:
    >> "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!

    --
    Nico
    Nico Schuyt, Jul 3, 2009
    #12
  13. shapper

    dorayme Guest

    In article <4a4dcba2$0$82583$>,
    "Nico Schuyt" <nschuyt (AT)gmail(DOT)com> wrote:

    > "Ben C" wrote:
    > > On 2009-07-03, Nico Schuyt <nschuyt> wrote:
    > >> "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!

    --
    dorayme
    dorayme, Jul 3, 2009
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    773
    Bruce Barker
    Oct 10, 2005
  2. Xu
    Replies:
    11
    Views:
    8,554
    Andrew Thompson
    Jul 16, 2005
  3. Sean Jorden
    Replies:
    1
    Views:
    594
    laurie
    Aug 19, 2003
  4. kris
    Replies:
    11
    Views:
    873
  5. Replies:
    1
    Views:
    740
    Beauregard T. Shagnasty
    Dec 29, 2007
Loading...

Share This Page