Images in HTML pages

[Greg]

Very good post for people just starting out. [Note from admin: Greg is referring to the starter post of the thread from this thread was split on 11 August 2006.] One thing I would have added though, as I see many new people making this mistake:

For the image tag, the HEIGHT and WIDTH are for telling the browser how much room to allocate for the image (from back in the days when the page couldn't render until it knew how much room to set aside until the image loads).

Many people use this to RESIZE the image. This is a big mistake. Not only are you using the tag incorrectly, but the user still has to download the entire file size.

For a simple example, see http://www.stow.oh.us/MayorFritschel/MAYORHOME.htm
the photo can be viewed alone at http://www.stow.oh.us/MayorFritschel/mayorKF2.jpg

That picture is 125k in size. I resized the image properly (opened it in fireworks and resized the image to the size they display it on the page) and then saved it back out. The image is now only about 17k. Now instead of a vistor having to download 125k, they only download 17k. For broadband visitors, this isn't so bad, since there is only one like that on the page.

Anymore, most digital cameras create large picture files by default. My 4Megapixel camera on next to highest setting makes pictures about 1.8megs. (1800k). Many people take those pictures, put them in their webediting program and resize them. However, in most cases this only changes the HEIGHT and WIDTH tags, and the user still ahs to download the full size image.

Consider if I made a page with 5 photos from my camera. If I don't properly resize them, then users will have to download over 9 megs of images!!! Properly resized, I could get this down to probably 100k.

For a extreme example of this gone bad, visit http://www.neo.rr.com/REACT/Gallery.html -- With broadband that still took approx 13 seconds to fully load the entire page. With dialup, well you can get some quiet time in pray and read your bible. This whole page, with all images is a whopping 8.2Megs! On dialup, well that would be well over 20 minutes to fully load everything! **

NOTE, also on that last sample page I get, check out how the browser resizing the black and white picture (4th one down), makes it appear with a patern (looks like it was taken through a chain link fence). This can be avoided witha graphics program.

I went and resized all these images to the size displayed on the web page (I use fireworks, and saved them back out as 90% quality JPEG's). After doing each image, now the whole page with all the images is only 184k. As you can see, a big improvement!

So be sure to get your images to the final size BEFORE they are displayed, do not have the browser size them. Also, my personal preference, never replace your original image. Anytime you edit an image, it is always best to start with the largest copy possible then resize down.

Hope this helps.

-Greg

** A note on how long it takes dialup users to get pages. Some dialup accelerators I have been told will actually see that the original image is larger than the intended display size, and will resize the image before sending it to you, therefore taking a step the webmaster should have properly taken. This is one way they "speed up" the connection, it's not faster, you are just downloading less. So if you use one of these, you would not need to wait as long as I mentioned above.

[flutem3]

Re: File sizes for photographs

I found a nifty program which optimizes photo files very well...up to 300 kb.

http://tools.dynamicdrive.com/imageoptimizer/


I use it on all of our photographs and everything else under the sun. For anyone who might be really new to doing this you can find the URL of the photograph by:

1. If the photograph is already on the website, place the pointer on it and right click.

2. At the bottom of the box that opens it the word,"properties." Click that.

3. When that box opens, you will find the URL (address) of the picture.

4. Underline the address and right click copy.

5. Go to the above website and paste the URL where it asks for the address.

6. Hit the optimize button. You can also change the format of the picture as well if you need to for some reason.

If your picture is not on a website:

1. Go to the website above.

2. Click the browse button. That will take you to your pictures.

3. Select your picture. Click the open button.

4. Your picture will come up on the optimizer.

5. Click optimize.

6. In both cases click the space where it asks whether you want to see the pictures.

7. Select the size that best meets your needs.

Carol

PS If you have any difficulty, let us know and we will help you. :D

[Greg]

Just to avoid confustion, while the link the optimizer was great, this is not what I was refering to in my post, I was refering to taking an image that is say 1500x700 pixels and trying to display it at 150x70, which you can use a program to do, usually it is called RESIZING or RESAMPLING.

This is a great topic, lets keep the "commonly seen newbie mistakes" coming here.

-Greg

[Faithhb_lutheran]

Another thing to remember especially when posting batches of photos to the web, is that all that detail your great camera captures can't be seen by the browsers, saving images as color reduced gifs instead of full blown jpegs will save a lot of download time.

[Greg]

Another thing to remember especially when posting batches of photos to the web, is that all that detail your great camera captures can't be seen by the browsers, saving images as color reduced gifs instead of full blown jpegs will save a lot of download time.
GIF's should not be used for photos, they should always be saved at JPG's.

Most systems today are set for at least 16bit color, which can display over 65,000 colors. Why limit the picture down to a maximum of 256 colors?

You can always use a higher compression setting on a JPEG photo still get a better overall quality than a color limited GIF file while still having a smaller final file size.

See http://66.39.121.82/imgtest/quality.html I took the same image and using Fireworks, created each image with the settings listed. For JPEGs, I used no smoothing. For GIFs, I didn't use dithering. For the JPGs, with the lowerfile size you can start to notice the effect of the compression on the sharp ede lines of the walls to the right of the fireplace. for the GIFs, you can really notice the lack of colors in the areas with shading, like the white shaded area above the fireplace. As you can see, you have to take a gif to the lowest setting (only 16 colors) to get a file smaller than the JPEG at 80% which is the setting I usually use for photos.

For those new, some programs use different number values for the compression setting of the JPG's. Fireworks uses 0-100% quality setting, where 100% is the least amount of comrpession (larger filesize). Other programs may give you an option to set the level of compression, where smaller the number gives you the sharper picture (larger filesize). Also I have seen some programs that use a scale of 0-255. Play around, see what works best for you. The image optimier link above looked pretty good to demonstrate differeces.

-Greg

[flutem3]

Just to avoid confustion, while the link the optimizer was great, this is not what I was refering to in my post, I was refering to taking an image that is say 1500x700 pixels and trying to display it at 150x70, which you can use a program to do, usually it is called RESIZING or RESAMPLING.

This is a great topic, lets keep the "commonly seen newbie mistakes" coming here.

-Greg

I think I must be totally confused. :confused: When a picture that is that large, pixil-wise, I can just make it smaller while keeping it in the same proportions. But I don't think that is what you mean, is it? Maybe Homestead lets me automatically make a picture the width and height I want.

Is this the same? If it isn't, would you tell me what the difference is? I do understand making the entire file smaller...and changing the width and height. I guess what I do not understand is the need for an additional program to do it. Maybe I need to check out the program to see what it does before I open my mouth. :)

Carol

[Faithhb_lutheran]

GIF's should not be used for photos, they should always be saved at JPG's.

Most systems today are set for at least 16bit color, which can display over 65,000 colors. Why limit the picture down to a maximum of 256 colors?

You can always use a higher compression setting on a JPEG photo still get a better overall quality than a color limited GIF file while still having a smaller final file size.

See http://66.39.121.82/imgtest/quality.html I took the same image and using Fireworks, created each image with the settings listed. For JPEGs, I used no smoothing. For GIFs, I didn't use dithering. For the JPGs, with the lowerfile size you can start to notice the effect of the compression on the sharp ede lines of the walls to the right of the fireplace. for the GIFs, you can really notice the lack of colors in the areas with shading, like the white shaded area above the fireplace. As you can see, you have to take a gif to the lowest setting (only 16 colors) to get a file smaller than the JPEG at 80% which is the setting I usually use for photos.

For those new, some programs use different number values for the compression setting of the JPG's. Fireworks uses 0-100% quality setting, where 100% is the least amount of comrpession (larger filesize). Other programs may give you an option to set the level of compression, where smaller the number gives you the sharper picture (larger filesize). Also I have seen some programs that use a scale of 0-255. Play around, see what works best for you. The image optimier link above looked pretty good to demonstrate differeces.

-Greg

Greg,

Good point, but I think you overlooked something, the browsers can't render in 16-bit they just don't have the capacity to tell the monitor anything more than 8-bit color ( and that's the newer ones).

[Greg]

Good point, but I think you overlooked something, the browsers can't render in 16-bit they just don't have the capacity to tell the monitor anything more than 8-bit color ( and that's the newer ones).

Can you provide a link to where you learned this? I remember back in like 1997 having to worry about only using 256 colors on web sites, but then around 1999 didn't have to worry about that anymore. I remember the dreadful days of properly optimizing all images on the website to have the same palette so you didn't get unexpected results. Yuck. LOL I would like to read up on this if it is still the case. Thank you for pointing that out.

Still the JPG does procude a smaller file with better quality, and if the end use wants to save the image off, with jpeg, they will ahve full color. :-)

-Greg

[Faithhb_lutheran]

Greg,

couldn't tell you where I first heard this from. I remember hearing something about Firefox going to true color with this last set of upgrades, so that is the way things are moving, but with a lot of people still on IE, which to my knowledge just has 8-bit ( I think IE 7 is supposed to have 16). One more thing, most of the dialup programs, will limit the colors o the way in, especially the accelerators, they cut it down to the old levels, so it depends on your audience whether this is an issue or not. I will agree that jpegs are always better quality. There are a lot of ways to preserve bandwidth and quality, like set up a album page with gifs, that loads quickly and a sub folder with the jpegs for download. stuff like that works well when dealing with audiences with a variety of technologies.

[David Gillaspey]

All,

Allow me to make the following comments, just to ensure we're not confusing terms.

My comments are about "8-bit" color vs. "16-bit" color vs. "24-bit" color.

In the early days of the internet, monitors were 8 bit. That meant 8 bits of computer data per pixel, and only one color channel. (That's an important point, so hold that thought.) That equals 2 to the 8th power or 256 total colors that could be viewed on a monitor. They could be ANY color you wanted — 256 tones of red if you preferred. Just a total of 256 colors.

Mac and PCs, however, had a slightly different set of colors to comprise those 256 colors. That led to the infamous "web safe colors" — colors that were the same more or less on both platforms. However, that didn't overcome the other problem, one of gamut. PC monitors are slightly darker than Mac monitors — because of a difference in gamut between the two platforms — and that affects how images or video are displayed. And still does.

Monitors sold these days are capable of 24-bit color, at least. (Thus, web safe colors are not necessary anymore.) That's 8 bits of color per color channel. There are three now: red, green, and blue. Notice how the definition for specifying "color depth" (that's what we're talking about here) has changed! Same terms mean something a bit different now. Once we only had one color channel implicitly in mind; now, there's three. So, 256 colors per color channel. The data underlying that can be arranged in 16 million different ways, which is why we equate 24-bit color with "millions" of color (16 million colors, actually). This is also known as "true color" because, for the most part, it is. That's the number of colors, more or less, that the human eye can perceive.

In between is something called "high color," which is a color depth yielding 65,000 or so colors. Now, since the way we define color depth changed fundamentally between 8-bit and 24-bit, one might well ask, how is this color depth defined?

Good question.

The answer is at wikipedia.org:

http://en.wikipedia.org/wiki/Color_depth

According to this article, high color also defines color depth in terms of three color channels. But ... 16 doesn't divide by three evenly. Here's the explanation, quoted from the article:

16-bit color uses 5 bits to represent red, 5 bits to represent blue, but (since the human eye is more sensitive to the color green) uses 6 bits to represent 64 levels of green. These can therefore be combined to give 65,536 mixed colours (32 x 32 x 64 = 65,536).

I mention all this because Kyle in his previous post mentioned 8-bit and 16-bit color depths. I didn't know that browsers were only capable of a certain color depth. I would have thought it was completely dependent upon the hardware being used, but I could be wrong. The article cited above goes on to talk about hardware systems capable of storing and manipulating 16-bit (per color channel = 48-bit) color. (Not, therefore, the same "16-bit" color depth described above.) But, realize that yields far more colors than the human eye is capable of perceiving, so the advantages of 16-bit (per color channel = 48 bit) color are technical, not aesthetic.

Sincerely,

David Gillaspey
President
Great Church Websites

[Faithhb_lutheran]

Thanks for the explanation David. It's hard for me to keep all of those number straight in my head. Let me ty to explain what i was saying earlier, what I had been taught was that IE ( I'm not sure about any other browsers) had a dedicated graphics module that interpreted the colors in an html doc and then that interpretation was sent on the the computers graphics controls. This module was supposedly limited to only 8-bit color. This could of all changed, and I can't seem to find anything from microsoft to tell me either way.