Web Graphics Help

[meblumen]

I have been learning html and css and while I have found a decent book and a couple of great links that discuss the code part, I'm struggling quite a bit with the graphics portion. First, and foremost, now a days what is the target screen resolution and then say I wanted a header to span that entire section, how wide would it be?

Also, I understand the programs like photoshop and gimp make bitmap files and illustrator makes vector images. What I don't get is often I see people taking images and then resizing them with code. Don't vector images scale better than the gifs and jpegs people are using? So should images be made to be the size that you want them displayed on the screen and then how do you plan for that?

Any assistance or direction on creating graphics for the web would be greatly appreciated.

[Force Flow]

The only images that can be shown on webpages without any add-ons on all platforms are gifs and jpegs. Then to some degree, png (IE has a little trouble with transparency with these) and bmps (although I'm not 100% if these would only appear on windows)

So, by the time you post images on a webpage, they're raster anyway. The only vector graphics shown on webpages are found in flash.



The safe target resolution these days 1024x768. Anything larger and you'll alienate visitors. Just recently, we had an issue on PCM here with a visitor unable to view the site in 800x600, so that resolution is still being used.

IMHO, make your design liquid, rather than static. Liquid is when the site expands and contracts (for the most part) depending on the size of the browser. Just be careful with letting it expand too large, especially with widescreen resolutions.


Resizing images with code is quite simple. Just use the height and width elements in CSS or HTML. But, it's best to size the image to the target size you want in order to save bandwidth (if you're shrinking the size with code instead), trying to retain image quality (resizing with code does odd things to the quality), and keeping your code slim and easy to understand.

Usually with headers, I either do a table with three columns (left column fixed at the image width, center column at 100%, and right column fixed at another image's width...you can of course mix this up a bit), or do virtually the same thing with CSS, although I've found tables to be more reliable and less prone to browser bugs and the like. But, you'll find plenty of CSS vs table arguments; both sides have merit, but tables are fading fast.