pictures

[joyandjohn]

I want to resize my pictures on our website but I'm not sure of the html code for it. What is the recommended picture size (kb or mb?) i should use to upload?

[Marble]

How are you resizing them. ie. what software, etc...

If they are photographic type images then save as jpegs to save on file size.

[Simon]

There are two ways to change the size of images that display on your website.

(a) Resize the actual images in a graphics editor and resave.
(b) Specify different width and height values in the HTML.

The second way is *never* recommended. I'm a web designer and don't think I've ever done this in the last several years. The graphics will look more pixelated and the filesize may be larger than necessary.

Most graphics on your website shouldn't be more than several kilobytes each (probably 20-30kb max unless it's necessarily big). I aim to make most of my sites' home pages less than 100kb (adding up all graphics and HTML content), or less than 50kb if possible.

The home page for this site I made is about 100kb - but moderately graphics intensive.
http://www.caleb.org.au/

And remember - use GIF for clip-art type images with few colours and large areas of a single colour - use JPG when you need millions of colours for photos and gradients. Compress them as far as you can while retaining acceptable quality.

< Simon >

[Sardtok]

PNG is also a good alternative to GIFs.
A 8-bit PNG is often smaller than the equivalent GIF (which is also 8-bit),
PNG can also be 24-bit images if you need to use an image format without quality-loss when compressed, this is a good option,
but for most 24-bit images you should use jpg.
If you have Photoshop I'd recommend that you use the save for web with the split-view and see the different file sizes for PNG and JPG while still retaining a good enough quality.
(For web graphics that require 24-bit images, I'd recommend PNg while for photos I'd recommend JPG, but you should still see which one ends up bigger)...

[Marble]

and I wish IE would support alpha transparency of png. That would sure make guis much cooler.
I am with Sardtok, png's are my fav, but they can get pretty big fast.

[Simon]

I've never used PNGs for sites - several years ago they weren't too widely supported so I didn't bother. What about these days? Do most browsers display PNGs?

I suppose even those that do have varying levels of support for alpha channels as you mentioned.

< Simon >

[Marble]

They display them fine, but not the alpha transparency. But if you have it on a solid background it's fine.

[Sardtok]

IE doesn't support the 32-bit PNG format (the one with 8 bit transparency)...
But It supports all others, 8-bit palette with single color transparency, is supported, and usually ends up smaller than an 8-bit GIF, and you don't need a program that has payed for the compression system (keep forgetting its name)...
I almost only use PNG, as I make graphics which I don't want to lose quality, where lines have to align, but alot of it can't be done with only 256 colors, and I would like to avoid dithering as much as possible...

The problem with alpha trasnparency in IE is that it always uses gray as the background color.
If of course gray was defined the background color in the PNG that would be ok, but if a background color is not set, the background color of the document should show, and even if a bg-color is set, IE ignores it and uses gray anyhow, so mostly I would avoid using 24-bit images with 8-bit alpha.
You can use 32-bit images with java though and java would show them correctly, but I see that as a way of getting nice anti-aliasing on images used in java progs, and not a way to draw images on the website.