Scale Image using CSS

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • shapper

    Scale Image using CSS

    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

    #2
    Re: Scale Image using CSS

    On 2008-04-28, shapper <mdmoura@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.

    Comment

    • dorayme

      #3
      Re: Scale Image using CSS

      In article <slrng1ci3q.d0i .spamspam@bowse r.marioworld>,
      Ben C <spamspam@spam. eggswrote:
      On 2008-04-28, shapper <mdmoura@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.co m/alt/browserReductio n.html>

      --
      dorayme

      Comment

      • Jonathan N. Little

        #4
        Re: Scale Image using CSS

        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 "screenspac e" 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.co m/alt/browserReductio n.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...


        specslarge.jpg (JPEG Image, 600x451 pixels)

        --
        Take care,

        Jonathan
        -------------------
        LITTLE WORKS STUDIO

        Comment

        • Jeff

          #5
          Re: Scale Image using CSS

          Ben C wrote:
          On 2008-04-28, shapper <mdmoura@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

          Comment

          • dorayme

            #6
            Re: Scale Image using CSS

            In article <a726$4817ef0d$ 40cba7af$14742@ NAXS.COM>,
            "Jonathan N. Little" <lws4art@centra l.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.co m/alt/browserReductio n.html>
            >
            Kind of hard to say without seeing the original large image
            This is a misunderstandin g. You can see the *relevant* original. That
            was the whole point.

            --
            dorayme

            Comment

            • Gus Richter

              #7
              Re: Scale Image using CSS

              dorayme wrote:
              In article <a726$4817ef0d$ 40cba7af$14742@ NAXS.COM>,
              "Jonathan N. Little" <lws4art@centra l.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
              >>disadvantag es 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).
              >
              >
              >>Nevertheles s, 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.co m/alt/browserReductio n.html>
              >>>
              >Kind of hard to say without seeing the original large image
              >
              This is a misunderstandin g. 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

              Comment

              • dorayme

                #8
                Re: Scale Image using CSS

                In article <mZKdnXOS1v7Rxo TVnZ2dnUVZ_v7in Z2d@golden.net> ,
                Gus Richter <gusrichter@net scape.netwrote:
                ><http://dorayme.890m.co m/alt/browserReductio n.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

                Comment

                • Gus Richter

                  #9
                  Re: Scale Image using CSS

                  dorayme wrote:
                  In article <mZKdnXOS1v7Rxo TVnZ2dnUVZ_v7in Z2d@golden.net> ,
                  Gus Richter <gusrichter@net scape.netwrote:
                  >
                  >>>><http://dorayme.890m.co m/alt/browserReductio n.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

                  Comment

                  • dorayme

                    #10
                    Re: Scale Image using CSS

                    In article <BeCdnXoqDvBD8Y TVnZ2dnUVZ_oWdn Z2d@golden.net> ,
                    Gus Richter <gusrichter@net scape.netwrote:
                    dorayme wrote:
                    In article <mZKdnXOS1v7Rxo TVnZ2dnUVZ_v7in Z2d@golden.net> ,
                    Gus Richter <gusrichter@net scape.netwrote:
                    >>><http://dorayme.890m.co m/alt/browserReductio n.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

                    Comment

                    • Gus Richter

                      #11
                      Re: Scale Image using CSS

                      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

                      Comment

                      • Bergamot

                        #12
                        Re: Scale Image using CSS


                        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

                        Comment

                        Working...