When I say "images," I am talking primarily about photographs. But any document is handled about the same way. If you have a file, you can put it on the web. On this page, I am going to tell you primarily about photographs. Start to finish. (Remember, what I say may not be factually correct!)
I am assuming you have a way to produce the images you want to put on your web site. You can use a digital camera and some photo software which is the most efficient and direct route, or you can use scanned images of photos or transparencies. A scanner is perhaps the cheapest way, but not the best. My advice is to buy a digital camera. Most come with the software necessary to generate efficient images. (Make sure and ask if that is true first.) And buy one with at least "three megapixels" for image capture. I would recommend that you buy at least a 3 megapixel camera. Better yet, a 4 or 5 megapixal camera. A better camera will offer you greater latitude in image production. You need images for other ends. For example, if you enter juried shows, it is advantageous to be able to take a photo of your accepted entry and send it along with the piece as a printed photo or a "tiff" file on a cd, even if they already have a slide. If a gallery director has a photo quality 5x7 or 8x10 of your piece, there is a good chance he or she will use it for publicity- either announcements, newspaper reviews or whatever. A basic camera- a 1 megapixel camera- will not give you an acceptable image for such applications. I run 1/4 page ads in magazines and a better camera- an "Olympus D40" 4 megapixal- allows me to compose my own ads. The camera gives me an image and "Adobe Photoshop" allows me to manipulate the photo and add text. If you were to pay a photographer to create a single magazine ad start to finish, chances are you could pay the difference between a "good" and a "better" camera. Certainly you could if you did it more than once.
First, some basic info about photos and the web. Keep this in mind: you want files to be "efficient." As you are no doubt aware, photos take time to download off the web. If you are putting photos on the web you have to make decisions about the size of your files (photos) and decide just where the reduction in file size begins to affect the image quality. I recently heard that 80% of surfers are still on dail-up internet accounts. A "dail-up" is the most basic (slowest) internet connection. On a dail-up, a 50k photo will take about 15 seconds to download. There is a limit to what folks will tolerate. Unless you really have something you know the public wants to see, you have to be concerned about download times. Timewise, text files are generally insignificant to download.
Here is a tip. Adobe Photoshop is the best and also the most expensive photo software. It's about $700 retail and it is a very powerful program. You can work with it for years and still have to learn what it can do. I use it for "optimizing" my photos. However, I bought it at the local community college. If you are a student you can get it for $250. One great thing about Photoshop is that you can click and save a pic for the web. And it will show you the same picture with different file sizes and you can choose which photo is the best for the file size. And that is about 1% of what Photoshop can do for you. If you can afford it, buy it.
You also want to consider the size of the image you are going to put on the viewer's screen. There is a wide diversity of monitors and operating systems out there and you can guesstimate pretty close, but never be quite be sure what size image will show up on a viewer's screen. However, there is a standard to which you want to save your photos. The web wants 72 dpi images. There is no point in asking a viewer's monitor to display anything higher. So when you are "saving" photos for the web, you always choose 72 dpi and then set the size of the image. And generally, you always save photos as "jpegs."
Let me give you a few paragraphs about resolutions, jpegs, tiffs, etc. It is very confusing as these terms mean different things in different situations. A digital camera takes a digital image and saves it as a tiff file. A tiff file has ALL the information about the photograph. Tons of information you never see and will probably never need. It is generally a very large file. If you are dealing with tiffs in a software program, you 'd better be prepared to sit around waiting all the time. There is so much info in a tiff that even the fastest computer will seem pokey. My ISP (internet service provider) will not allow me to send tiffs over the phone lines because they are too big and tie up the line. Your camera will download a jpg (or "jpeg") file to your desktop. A jpeg is a compressed tiff file. It has a much smaller file size, gives you the same visual results and more or less deletes or hides unneeded data from the file. A good optimizing software is going to take the jpeg and compress it more. A tiff might be compressed by a factor of 100 and still visually show you the same image on the monitor. So you can see why it is important to optimize photos.
One more concept about photos you should understand. I have a 4 megapixel camera that sends me about a 24 X 30 inch photo out of the camera at 72 dpi. That is the raw image. If I send that to my printer, I will get a poor quality 24 X 30-inch photograph. The size (24X30) and the dpi (72) are inversely proportional. Using my photo software, I can reduce my size and raise the dpi and vice versa. One goes down the other goes up. I can change my photograph's parameters from at 24" x 30" image at 72dpi to an '11" x 14" at 170 dpi. The latter will be a photo quality image where the former will not. Today's ink jet photo printers need a resolution of about 160 or higher dpi to give you a crystal clear and sharp photo. That's why I recommend that you by at least a 3 megapixal camera. If you ever want to print your photos and have "photo quality" results, you need a lot of raw data to get a good size print. A 1 megapixal camera will give you (approximately) a photo quality print of 3 x 5 inches. A 2 meg camera, a 5 x7. A 3 mg camera gives you a 8 X 10. And a 4 meg about a 11 x 14 picture. Remember that here I am talking about PRINTED photos. The web will only accept 72 dpi images because that is all your monitor can display. That is why you can see the dot pattern on your monitor. So, in theory, you can get by using the cheapest, low resolution camera for your web photos. Again, my advice, buy a better camera. You will find that you will need and use it. I bought a 1 meg and six months later, I "needed" something better.
Ok, one more quick "tip." Buy your camera and camera equipment on ebay. There are "traders" that move huge amounts of this equipment through auctions. I don't how, but they are auctioning equipment the day it is released and you always get it 10 to 20 % under retail and pay no sales tax. Here is an example: I bought my latest camera from a trader that was selling a lot of the same cameras on ebay. He had a good track record and I felt confident about buying. The camera was $700 retail everywhere in St. Louis. He was letting them go for $560 on ebay. I called him and asked if I could just buy one for $560. He said no to $560, but yes to $580. That's $120 less than current retail and no tax of 7+%. In the box, sealed, full warranty. A significant savings.
Once you get a handle on how to optimze your photos, you should be able to get photo file sizes down to 15 or 20 k files. That is for something like a 5 x 7 photo on the monitor. Save all your photos to your web site folder. Remember, no spaces in the file description. Depending on how you want to organize things, you might want to put all your photos in a new folder in your web site folder and title it something like "pics." Again, no spaces in the folder title. I''ll address more about organization later. For now, put your photos- or any image you want to use on your site- in the "web site" folder.
I have to give you another tip. When you open, optimize, and save your photos, always save the camera's photo description and add a title. My camera puts out photos with titles like "P9290023.jpg" which gives you a date and time of when you took the photo. When I am finished optimizing the photo, I'll save it as "P9290023-snowpot.jpg." Two reasons. First, I don't corrupt the original information the camera gave me. When I click "save" for the "P9290023-snowpot.jpg" the computer asks me if I want to save the changes to the original photo (P9290023.jpg) and I always respond with a "no." Second, I have the info on hand to find the original photo in my photo library. Without that preface from the camera, it can take forever to find a photo in the library.
When you look at my site NEWARTPOTTERY.COM you will notice that I use photo backgrounds for most of my pages. The main reason is because it is quick and easy and it looks good. Every time I make a change on my web site, I always make sure to change at least the background on my home page. This immediately signals any return viewers that there has been some activity on the site. There are two ways to deal with photo backgrounds. You can have a photo big enough to cover the entire background of the monitor screen or you can have a given picture "tile" the background. There are advantages to doing it both ways. If you use a single big photo, you have to really reduce the file size. My software- Photoshop- lets me reduce it to the point where it starts to become unrecognizable due to lack of information in the file. I'll reduce an 11 x14 inch photo to 5k. I use them like wallpaper. You don't have to really notice what it is. It just provides atmosphere. Or you can tile the background. Optimize and save your photos to 2 x 2 inches. The picture will be sharp and the file size tiny- 2 or 3k. Your browser will default to that picture and repeat it over and over until it covers the bachground of your browser window, regardless of how big the window is. And because you are repeating the image, it loads very quickly and just defaults to the repeating pattern. Just like ceramic tile on the wall. One consideration to be remembered: If you are going to use the image as a background and have text in front of it, you will have to reduce the brightness and contrast of the image so that text will stand out enough to to be readable. Any photo software will allow you to do that.
I need you to put some kind of picture file in your web site folder. Anything will do. I am going to ask you to put a background on your index.html page. Please copy and paste the following link into your index.html just below your open body tag (<body>):
After you copy and paste that, delete the "your-image-title-here" and put your file name in that spot. Do a save and click your browser window and REFRESH. Voila! A background. If by chance you do not have a background image yet, let's plug in a background color. You have to have some type of tag chart for all the color titles. You can find them on the web. You will have to find it yourself. Just type "html tag colors" into any search engine. If you don't have an image how about you go to the SOURCE of this page and find the <body BGCOLOR="#______">, and copy and paste the color description into your index.html page. It will give you the background color of this page.
Here is an important point to remember about backgrounds. Always put this background color <body BGCOLOR="#FFFFFF"> tag after the closed title tag at the top of your page. While Interent EXPLORER defaults to a white background, NETSCAPE defaults to an ugly grey. Also, Netscape will not display background pictures unless you first assign it a white background. So if you do not assign the white background, Netscape users are going to see a grey background and if you are assigning the browser to display a photo background, again NETSCAPE users will not see it UNLESS YOU ASSIGN THE WHITE BACKGROUND FIRST. I suggest you always assign the white "FFFFFF" background, unless of course you are assigning another color background as I did on this page.
Here is another tidbit about photo images and the web. Did you know you can download any image you see on the web? I am not talking about a screen capture. I mean you can download the entire file of a photo that you see. If you are on a Mac, you simply put the cursor on the image, hold down the "control" key and click the mouse. On a PC you move the cursor to the image and right click the mouse. In both cases, a menu option will open and you can decide what to do with the copied image.
Next? A few different WAYS TO USE IMAGES on your website.