|
|
Posted by Jonathan N. Little on 09/19/06 13:53
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
Navigation:
[Reply to this message]
|