While a lot of what makes a website is fairly simple, most amateur web workers have trouble - at first - with adding pictures to their website. Here's a primer.
A Special Place
You need a special place on your website to hold your images. This is important because it makes it easier to manage your website...and let's face it: we all need to make it as simple as possible, right? Create a folder in your website's directory to hold your images. I usually name the folder something sophisticated like "images". Once you have a place to put those great pictures, we can get them ready for the web!
Preparing Your Photos
The most significant mistake new web workers make with pictures is to just upload them as-is. The dimensions are huge, the filesize is huge, and the photos don't look as nice as they could. That's a huge problem for every visitor, but especially those still using dial-up connections.
Crop the Pictures
Before you do anything else, crop the photo so that the focus of the image is the part that communicates. If the whole photo is good, don't crop it...but most photos have more impact when the center of attention is larger and isolated.
Resize the Pictures
There are two ways to make your picture display at the dimensions you want: to make the photo the exact size, or to put the dimensions in your HTML. You should never do it with HTML for the following reasons:
- Any mistakes will make the image display improperly. Squishing or stretching the image in only one direction gives the viewer a jarring sensation without knowing exactly why. Nobody wants people to feel that way on their website.
- If your photo is larger than needed, you're making visitors download unnecessary data. That increases the load time for your page, reducing the impact of your website.
- If your photo is smaller than needed, streching it can lead to blocky, pixelated parts of your image known as 'artifacts'. If the point of an image is to convey information or invoke an emotion, make the most of what you have.
Resize the image on your computer before putting it on your website. This ensures that you're putting your best foot forward.
Optimize the Pictures
This part is the most foreign to the average web worker. Let me simplify it: the human eye is capable of seeing much, much more in a picture than a computer monitor can display. If you're going to print a picture on photo paper, you want the highest quality possible because the human eye will be viewing it directly. When you view an image on a computer monitor, you want the image to be the lowest quality possible without looking bad. The process of shrinking an image this way is called optimization. Done properly, optimization reduces the filesize of the image without reducing the quality. Most image-editing programs can optimize a photo for you.
We've all been to websites with pictures that took 5 minutes (or more) to finish loading. This is generally because an unoptimized photo can be hundreds of times bigger than an optimized one. Unless you want your visitors leaving your site before the pictures finish loading, spend some time learning how to optimize them.
Upload the Pictures
When you've cropped, resized, and optimized the photos, they're web-ready. Now you need to upload them to that special folder you created for them. If you're a PageProLive subscriber, you can do this when you're editing the page or blog post that you're working on. If you're not a PageProLive user you'll need an FTP program. FTP stands for File Transfer Protocol, and simply means 'a way to move files from your computer to a web server'.
Link to the Pictures
When the photos are online, you'll need to add them to your page or post. PageProLive users can simply use the built-in image picker to put the pictures right where they want them. If you're editing your own HTML, you'll need to create code like this:
<img src="images/photo.jpg" alt="Description" />
Here's what the parts do:
IMG: this simply says "here's an image".
SRC: this means "source".
IMAGES/PHOTO.JPG: this is the actual location of the photo (in that special folder you created) and the filename (what you called the photo before you uploaded it). This part will be different for everyone, depending on the actual location of the photo. If you make a mistake here, your visitors will see a red X or a blue diamond or a question mark instead of your photo, so be careful.
ALT: this means "alternate text". This is what displays if, for some reason, your photo doesn't load properly. It's very important.
DESCRIPTION: you can put two kinds of information here. First, you can describe the contents of the photo. This is best, as alternate text conveys the photo's message when it can't be seen. Blind internet users rely on good descriptions to understand your website, so make it good. You can put whole sentences in there, so make it work. Second, you can add a few keywords for improved search engine visibility. This is only recommended for images that don't normally convey information, like decorative borders. Do not use search engine tactics in place of real descriptions. In fact, most of the time, your best bet for BOTH types of descriptions is to simply describe the photo. If you've chosen a photo that conveys information or evokes emotion, a good description will serve both functions.
Summary
There you have it. Those are the basics for adding photos to your website. It might seem complicated at first, but it quickly becomes second nature when you do it a dozen times or more. Choose great photos, prepare them properly, and describe them well...and your website will have the kind of impact you're looking for!
