sizing image in css

Discussion in 'HTML' started by Wombatwal, Sep 19, 2006.

  1. Wombatwal

    Wombatwal Guest

    I am experimenting with placing images on a page using float and setting the
    image size.
    I am using an external style sheet. Below is my code in the external style
    sheet, and below that is my code in the html page.
    I have used different numbers for width and height plus px but the images
    are huge, but the right ones, float to the left and right.
    What am I doing wrong, I have scanned the internet with no help. As you can
    see I am struggling with CSS.

    external css sheet
    #photo1 {width: 2; height: 2; float: left; }

    #photo2 {width: 2; height: 2; float: right;}


    html page
    <body>
    <div id="photo1"><img src="Twins.jpg"></div>

    <div id="photo2"><img src="stuart2.jpg"></div>
    --
    Bruce
     
    Wombatwal, Sep 19, 2006
    #1
    1. Advertising

  2. Wombatwal

    Els Guest

    Wombatwal wrote:

    > I am experimenting with placing images on a page using float and setting the
    > image size.
    > I am using an external style sheet. Below is my code in the external style
    > sheet, and below that is my code in the html page.
    > I have used different numbers for width and height plus px but the images
    > are huge, but the right ones, float to the left and right.
    > What am I doing wrong, I have scanned the internet with no help. As you can
    > see I am struggling with CSS.
    >
    > external css sheet
    > #photo1 {width: 2; height: 2; float: left; }
    > #photo2 {width: 2; height: 2; float: right;}


    2 what? hobnobs? ;-)

    I'm just guessing these aren't really 2 pixel images, so I've invented
    a width and height of 100px:

    #photo1{width:100px;height:100px;float:left;}
    #photo2{width:100px;height:100px;float:right;}

    > <div id="photo1"><img src="Twins.jpg"></div>
    >
    > <div id="photo2"><img src="stuart2.jpg"></div>


    That gives the width and height to the divs, not the images.

    <img id="photo1" src="Twins.jpg" alt="twins">
    <img id="photo2" src="stuart2.jpg" alt="Stuart">

    Also: you are saying the images are huge. Even after managing width
    and height through CSS, this means the original size is downloaded to
    the visitor's browser. Means the page will load slower than needed,
    and also the image won't look very good. Resize the images to the size
    you want in the page, and you're eliminating both problems.

    HTH

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/

    Now playing: Dave Edmunds - I Knew The Bride (when She Used To Rock
    And Roll)
     
    Els, Sep 19, 2006
    #2
    1. Advertising

  3. Wombatwal wrote:
    > I am experimenting with placing images on a page using float and setting the
    > image size.
    > I am using an external style sheet. Below is my code in the external style
    > sheet, and below that is my code in the html page.
    > I have used different numbers for width and height plus px but the images
    > are huge, but the right ones, float to the left and right.
    > What am I doing wrong, I have scanned the internet with no help. As you can
    > see I am struggling with CSS.
    >
    > external css sheet
    > #photo1 {width: 2; height: 2; float: left; }
    >
    > #photo2 {width: 2; height: 2; float: right;}
    >
    >
    > html page
    > <body>
    > <div id="photo1"><img src="Twins.jpg"></div>
    >
    > <div id="photo2"><img src="stuart2.jpg"></div>



    Errors:

    #1 width: 2 <-What? Pixels, inches, feet, miles? Unlike HTML attributes
    length values in CSS must have units { width: 2px; }. Exception is
    line-height which can take a decimal value.

    #2 Resizing images by constraining markup and not resampling is a very
    bad idea. The algorithm used by browsers is crude compared to that of
    image editing software and shows quite "clearly" in the results! Also
    when your reduce an image digitally unlike the old days in the dark room
    the image tends to loose detail and requires tweaking with smoothing and
    sharpen filters, (which your browser does not do). Lastly, as digital
    images increase in dimensions their associated file sizes increases not
    linearly but geometrically. So that 5-6 mega-pixel
    fresh-from-the-digital-camera monster will top out about 2-3 MB!
    constraining with markup to 400 pixels *will not* reduce what has to be
    downloaded from the server! If you resample to 400 pixels then not only
    will you get a better looking results but the download will only be
    about 30KB!


    Recommendation: Always resample and optimize images to the exact size
    required when using in a webpage. If you need thumbnails create a second
    set of images resample to the thumbnail dimensions. Do not use the
    full size images constrained with markup.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 19, 2006
    #3
  4. Jonathan N. Little wrote:
    > Wombatwal wrote:
    >> I am experimenting with placing images on a page using float and
    >> setting the image size.


    <snip>

    >
    > Errors:
    >
    > #1 width: 2 <-What? Pixels, inches, feet, miles? Unlike HTML attributes


    <snip my lengthy dissertation>

    Wow I am just too slow in typing, Els beat me to the punch, or maybe I
    don't need to include the complete theory of computing in my posts!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 19, 2006
    #4
  5. On Tue, 19 Sep 2006, Jonathan N. Little wrote:

    > Recommendation: Always resample and optimize images to the exact
    > size required when using in a webpage.


    This is a fine recommendation in many caaes, indeed; but there
    are exceptions. If you want to size images to match your text, then
    you can use CSS to size them in em units. See discussion at
    http://ppewww.ph.gla.ac.uk/~flavell/www/img-em-size.html

    hth

    --

    If the crash doesn't occur immediately, the [development] cycle is broken,
    and the result is called a release. -- detha, in the monastery.
     
    Alan J. Flavell, Sep 19, 2006
    #5
  6. Wombatwal

    Els Guest

    Jonathan N. Little wrote:

    > Wow I am just too slow in typing, Els beat me to the punch, or maybe I
    > don't need to include the complete theory of computing in my posts!


    <g>
    I do type fast, but I'm also just too lazy to write very long stories
    in usenet posts ;-)

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/

    Now playing: AC/DC - Thunderstruck
     
    Els, Sep 19, 2006
    #6
  7. Wombatwal

    Chaddy2222 Guest


    >
    > --


    >
    > Now playing: AC/DC - Thunderstruck


    A dam fine song indeed.
    Although, it's one of the only ACDC albums I don't have, (although I
    got a copy of Jale Break a while ago).
    --
    Regards Chad. http://freewebdesign.cjb.cc
     
    Chaddy2222, Sep 19, 2006
    #7
  8. Chaddy2222 wrote:
    >> --

    >
    >> Now playing: AC/DC - Thunderstruck

    >
    > A dam fine song indeed.
    > Although, it's one of the only ACDC albums I don't have, (although I
    > got a copy of Jale Break a while ago).


    Naw, I was a Uriah Heep fan, give me Salisbury or Easy Livin'

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 19, 2006
    #8
  9. Wombatwal

    Els Guest

    Chaddy2222 wrote:

    >> Now playing: AC/DC - Thunderstruck

    >
    > A dam fine song indeed.
    > Although, it's one of the only ACDC albums I don't have, (although I
    > got a copy of Jale Break a while ago).


    I don't have anything else by them really, just that one song :)

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/

    Now playing: The Clash - Louie Louie
     
    Els, Sep 19, 2006
    #9
  10. Wombatwal

    richard Guest

    "Wombatwal" <> wrote in message
    news:Y%RPg.32208$...
    >I am experimenting with placing images on a page using float and setting
    >the image size.
    > I am using an external style sheet. Below is my code in the external style
    > sheet, and below that is my code in the html page.
    > I have used different numbers for width and height plus px but the images
    > are huge, but the right ones, float to the left and right.
    > What am I doing wrong, I have scanned the internet with no help. As you
    > can see I am struggling with CSS.
    >
    > external css sheet
    > #photo1 {width: 2; height: 2; float: left; }
    >
    > #photo2 {width: 2; height: 2; float: right;}
    >


    Width and height must be defined with something such as px (pixels); inches,
    millimeters and so on.
    You show floating left and right. Which do you want? It is not both.
    Then declare the float property only on the first item. All others follow
    the pattern until the next break .
    If you had more photos, each subsequent photo would float along the same
    order beside the last one.
    Or you could just continue using "left" with each. Until you need to drop a
    line, in which case you would use float:clear.
    Plenty of websites that illustrate this.
    Search for "CSS Float attributes".
    Also, spaces are not needed after the :.

    Division size for images should be sized according to the image size.
    If you need to, resize the image with an editor.
    You might want to try using PNG, instead of JPG, as PNG has a much smaller
    footprint.

    www.1-small-world.com/index2.html

    Just so you can get a better idea of what to expect. Just foolin around with
    it for now.

    >
    > html page
    > <body>
    > <div id="photo1"><img src="Twins.jpg"></div>
    >
    > <div id="photo2"><img src="stuart2.jpg"></div>
    > --
    > Bruce
    >
     
    richard, Sep 19, 2006
    #10
  11. richard wrote:
    >
    > "Wombatwal" <> wrote in message

    <snip>

    >> external css sheet
    >> #photo1 {width: 2; height: 2; float: left; }
    >>
    >> #photo2 {width: 2; height: 2; float: right;}
    >>

    >

    <snip>
    > You show floating left and right. Which do you want? It is not both.


    That is not true, he has float left to on and right to the other. Who
    knows maybe he want text to run down the middle...

    > Then declare the float property only on the first item. All others
    > follow the pattern until the next break .
    > If you had more photos, each subsequent photo would float along the same
    > order beside the last one.
    > Or you could just continue using "left" with each. Until you need to
    > drop a line, in which case you would use float:clear.


    Agreed, if OP desires to just stack images as the browser width allows,
    then float only one direction and they will 2, 3, 4 ... across as room
    allows

    > Plenty of websites that illustrate this.
    > Search for "CSS Float attributes".
    > Also, spaces are not needed after the :.
    >
    > Division size for images should be sized according to the image size.
    > If you need to, resize the image with an editor.
    > You might want to try using PNG, instead of JPG, as PNG has a much
    > smaller footprint.


    I disagree with that though, it depends on the image and the
    application. Photographic type images where lossy compression is not as
    noticeable JPG beats out the PNG almost every time. Paletted images
    flatter graphic images such as logo's GIF and PNG shine. PNG's advantage
    over GIF is that is can handle >256 colors and have alpha
    transparencies. But in my experience with restricted palettes 8, 16, 32
    colors for logos with simple transparency is required the GIF is smaller
    than the PNG even when optimized.


    >
    > www.1-small-world.com/index2.html


    Not sure it relates to the OP and be of much help.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 19, 2006
    #11
  12. richard wrote:

    > www.1-small-world.com/index2.html
    >
    > Just so you can get a better idea of what to expect. Just foolin
    > around with it for now.


    Not a prime example of 'what to expect' ...

    <http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.1-small-world.com%2Findex2.html>

    New documents should be HTML 4.01 Strict.
    Uses unnecessary tables for layout, circa 1995.
    Points (pt) are for printing; use percentages instead.
    Always assign a fall-back font family, e.g.: sans-serif;
    No body background color assigned.
    Etc.

    --
    -bts
    -Motorcycles defy gravity; cars just suck.
     
    Beauregard T. Shagnasty, Sep 19, 2006
    #12
  13. Wombatwal

    dorayme Guest

    In article
    <>,
    "Alan J. Flavell" <> wrote:

    > On Tue, 19 Sep 2006, Jonathan N. Little wrote:
    >
    > > Recommendation: Always resample and optimize images to the exact
    > > size required when using in a webpage.

    >
    > This is a fine recommendation in many caaes, indeed; but there
    > are exceptions. If you want to size images to match your text, then
    > you can use CSS to size them in em units. See discussion at
    > http://ppewww.ph.gla.ac.uk/~flavell/www/img-em-size.html
    >
    > hth


    Yes, may I add a thought: In general, deterioration in quality is
    far more noticeable in scaling up than down. It is true of even
    good image editors for reasons that are not hard to understand.
    And it would likely be even more true of lower class image
    editing functions in browsers. So, website makers that do want to
    occasionally employ this em based dimensioning should consider
    allowing the natural size to be a little bigger than what they
    guess would be the ideal for the majority of users text size
    settings. Yes, this will be at the cost of a little bandwidth.
    But the gains for the very occasional use of this technique might
    well be worth it.

    I have considered it in situations where the banner heading that
    is mainly a picture of styled text looks strangely small when the
    browser text setting is upped and yet one does not want to make
    it bigger because then it is too big for smaller settings...

    --
    dorayme
     
    dorayme, Sep 19, 2006
    #13
  14. Wombatwal

    Wombatwal Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:cNWPg.71360$...
    > richard wrote:
    >
    >> www.1-small-world.com/index2.html
    >>
    >> Just so you can get a better idea of what to expect. Just foolin
    >> around with it for now.

    >
    > Not a prime example of 'what to expect' ...
    >
    > <http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.1-small-world.com%2Findex2.html>
    >
    > New documents should be HTML 4.01 Strict.
    > Uses unnecessary tables for layout, circa 1995.
    > Points (pt) are for printing; use percentages instead.
    > Always assign a fall-back font family, e.g.: sans-serif;
    > No body background color assigned.
    > Etc.
    >
    > --
    > -bts
    > -Motorcycles defy gravity; cars just suck.


    I am overwhelmed by the replies.
    Thank you very much everybody for your input.
    I know now what I have done wrong.
    Thanks again.
    Bruce
     
    Wombatwal, Sep 19, 2006
    #14
  15. On Wed, 20 Sep 2006, dorayme wrote:

    > "Alan J. Flavell" <> wrote:

    ....
    > > you can use CSS to size them in em units. See discussion at
    > > http://ppewww.ph.gla.ac.uk/~flavell/www/img-em-size.html

    >
    > Yes, may I add a thought: In general, deterioration in quality is
    > far more noticeable in scaling up than down. It is true of even
    > good image editors for reasons that are not hard to understand.
    > And it would likely be even more true of lower class image
    > editing functions in browsers. So, website makers that do want to
    > occasionally employ this em based dimensioning should consider
    > allowing the natural size to be a little bigger than what they
    > guess would be the ideal for the majority of users text size
    > settings.


    Agreed. I had a dim recollection of trying to say something very
    similar myself - maybe it was somewhere in a usenet posting - but it
    seems it didn't actually get onto my web page yet. I'll add a comment
    about it.

    thanks
     
    Alan J. Flavell, Sep 21, 2006
    #15
  16. Wombatwal

    dorayme Guest

    In article
    <>,
    "Alan J. Flavell" <> wrote:

    > On Wed, 20 Sep 2006, dorayme wrote:
    >
    > > "Alan J. Flavell" <> wrote:

    > ...
    > > > you can use CSS to size them in em units. See discussion at
    > > > http://ppewww.ph.gla.ac.uk/~flavell/www/img-em-size.html

    > >
    > > Yes, may I add a thought: In general, deterioration in quality is
    > > far more noticeable in scaling up than down. It is true of even
    > > good image editors for reasons that are not hard to understand.
    > > And it would likely be even more true of lower class image
    > > editing functions in browsers. So, website makers that do want to
    > > occasionally employ this em based dimensioning should consider
    > > allowing the natural size to be a little bigger than what they
    > > guess would be the ideal for the majority of users text size
    > > settings.

    >
    > Agreed. I had a dim recollection of trying to say something very
    > similar myself - maybe it was somewhere in a usenet posting - but it
    > seems it didn't actually get onto my web page yet. I'll add a comment
    > about it.
    >
    > thanks



    Obviously, there are alternative strategies for deciding on the
    em size. I was looking at your figures and thinking "mmm, go down
    an order of mag, halve ..." and so on, in other words trying to
    formularise. Not saying you said to do this! I am sure you would
    urge some trial and error. On this theme:

    Everything depends. In a case where I wanted a particular
    "text-heading" to go up and down but nevertheless be an image, I
    made one that I judged to be about right for a case of tired/poor
    eyesight (or plain wanting to sit right back from a screen)
    without being too extreme. The reason for this criterion is that
    any enlargement will be a deterioration, so obviously best to
    make it as big as any somewhat natural extremity. That gets the
    size at one end. If really extreme text enlargements are
    attempted, it is not the end of the world, it becomes a bit less
    crisp. (Bandwidth considerations played no part here, the image
    was black on white and tiny over a range of possible sizes)

    Now I had to decide the em size for the css. For this, I went
    down to what I regarded as the most likely size of text. An
    uncertain quest, true... but one can force oneself to decide by
    imagining putting a weeks wages on it and losing if you are more
    than 10% out after a thorough investigation by a top research
    program into people's habits. You play around till the pic is the
    size that you would have a text heading. Roughly. I did this by
    actually having a real text heading, 180 or 200% above normal to
    compare above the imaged text (deleted/commented out later). This
    gets the proportion as well.

    It then stays sharp for smaller (keener sighted) and bigger too
    up to a reasonable limit.

    Luckily, in the case of a text heading, there are some guidelines
    that are at least intuitively understood. But other pics in other
    situations might require different comparisons.

    I wanted Dom Casual for a heading of one page of a story (small
    amusement for children and playful adults). Here is the page
    concerned:

    http://tinyurl.com/kldmb

    --
    dorayme
     
    dorayme, Sep 21, 2006
    #16
    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. Tim Burda

    Image Sizing Issue

    Tim Burda, Aug 5, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    415
    Curt_C [MVP]
    Aug 5, 2004
  2. tshad

    Not doing image sizing correctly

    tshad, Feb 12, 2007, in forum: ASP .Net
    Replies:
    0
    Views:
    315
    tshad
    Feb 12, 2007
  3. Guest
    Replies:
    21
    Views:
    737
    dorayme
    Dec 19, 2007
  4. MISS CHIEVOUS
    Replies:
    51
    Views:
    2,102
    MISS CHIEVOUS
    Apr 19, 2009
  5. pachuts

    Image auto sizing in asp.net

    pachuts, May 5, 2005, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    111
    Brock Allen
    May 6, 2005
Loading...

Share This Page