Image sizes for art websites
by aisling d'art ©January 2005
Creating your first website? When artists are new to the Internet
and website building, they often have problems with graphics at their websites.
Broken images at your website
When a graphic won't load at all--a broken graphics symbol or red X--it almost always means that the person who wrote the HTML entered the file name incorrectly. Or, he or she forgot to upload the corresponding file to the hosting service. Re-check the file names, and see if this is the case.
When a graphic doesn't fully load--it looks funky or only part of it shows up--it's usually one of these problems, in order of likelihood:
The graphic was garbled in the file reduction process. You'll usually see this at the server, but not on your computer when you're doing the file reduction.
Your (or your server's) FTP program stalled during the process. Some FTP programs just don't handle large files well, which is why you can get download programs that pick up where the download stalled. For uploading, my best advice is to try again, and perhaps with a different FTP approach.
The server timed-out while opening the graphics. In the case of a free or cheap server, this is still fairly rare, but it can happen.
Your computer timed-out while opening the graphics. This is rare, but if your Preferences are set to limit image sizes (people paying by-the-minute for their connections sometimes insist on a fast download or they'll skip the graphics, thank you), that can happen.
Large, slow-loading images
While we're talking about graphics, here's another lesson that I learned the hard way:
When you are creating a webpage, resizing your graphics in HTML will not reduce the load time if the original image--the one in your files--is large. A 500K photo of your kids will still open as a 500K photo, even if you use HTML to make it look like a 100 x 100 pixel icon.
The only way to make load time shorter is by reducing the size of your graphics in a graphics program. If you don't have a good graphics program that will do this, there are some online services. Search on Google and you'll find several. Here are a couple of them: http://www.spinwave.com/, and http://www.jpegwizard.com/.
There's a free program that can help, too. One is at http://www.freeserifsoftware.com/software/PhotoPlus/default.asp.
There are many others. Look for graphics programs and optimizers at TuCows.com and any other site that features freeware programs.
You also need to tell the browser what size the image is going to be when the page finishes loading. This should appear after the URL of the image, in your IMG SRC code. You'll use height="150" and width="250" (or whatever the size actually is).
That tells the browser how much space to leave open so that people can read your webpage while the images load. Without that information, your images and text can jump around as your browser puts the pieces together like a jigsaw puzzle.
If you don't know how big your image is in pixels, your graphics program should tell you in "Image Size." Otherwise, you can display the image and right-click on it, selecting "Properties." That will tell you what the size is, in height and width.
(Bonus points if you also include a brief description of your image in the IMG SRC brackets, following the word "alt." For example, if you're showing a picture of your dog, the code might read: alt="Photo of the cutest doggie in the world.")
Keep your computer graphics small
Graphics pros at NetMechanic.com say that if your webpage doesn't load in 8 seconds or less (on 56K connections, in early 2005), you'll lose 1/3 of your visitors. They won't wait.
If your page takes more than 30 seconds to load, expect to lose the vast majority of your visitors... over 95%, and that may be a conservative figure.
With art websites, you may be able to get away with larger images. As long as your visitors know that they're waiting for some fabulous art, they'll often surf in another window while your graphics load.
But, it's still smart to show them a quick-loading version with clickable thumbnail images on an index-type page. Let your website visitors decide if they want to click to see the bigger versions.
Designing your art website for a changing Internet