Preparing Your Images for the Web

This article is a check list of definition and advice on how images are seen, stored and named for a website. I start with the most basic definition (a pixel) and go through file format and naming conventions for the web. Pixels A pixel (short for picture element) is the smaller square of color on your computer monitor. Put a bunch of pixels together, and you get an image! Typically, a monitor will have something called "resolution" which defines how many pixels across can be displayed. The higher the number, the better the picture on your screen. The most common resolution will be 1024 pixels by 768 pixels. Images are often described in terms of pixels: the width and height are defined in x number of pixels across, and y number of pixels in height. Again, the higher the number, the more information will be contained in the file, and the better the picture will be. Why should you care? Knowing that most users will display their screen at 1024 by 768 pixels, it is no use putting images on the web that are larger than that. The more pixels you have, the bigger the file will be, the longer it will take to download. Given that the browser will take up some of your screen real estate, images that are larger than 640 pix by 480 pix will be wasted real estate and most likely will not display without the user having to scroll the screen. Most images on the sites I designed are no bigger than 500 pixels. Mega pixels A mega pixel is 1 million pixels, and is often used to describe the quality of a picture taken from a digital camera. A mega pixel for a digital camera describes the size of the picture in terms of width and height. For example, a camera that takes pictures at 3.1 mega pixels means that the picture is 2048 1536 , which multiplies to 3.1 million Naming conventions Most operating systems try to be as user friendly as possible. They do not want you to worry about the underbelly of the computer and how it works. Though a very nice concept in theory, it is to a certain extent a disservice to the user. Why? Because you are unlikely to know what the server where your site is going to be hosted uses as an operating system, and some have stricter rules about naming conventions than others. To be safe, I restrict myself to the alphabet and numbers. Underscores and dashes seem to be universally accepted, but I stay away from question marks, forward and backward slashes and their ilk. Simply put: keep your names descriptive such as blueflower.jpg and simple. Try to limit yourself to the alphabet and numbers. Everything else might be asking for trouble. There is a very comprehensive (and short) article on file name conventions that was published on slashdot: Del.icio.us | Yahoo! My Web | www.garbanisculpture.com