Images and the Web
To be displayed on the web, images must be one of three file types. These types are indicated by 3-letter suffixes that tell web browsers how to display an image. Web images end with .jpg, .gif or .png.
If you have a file that does not end in .jpg, .gif or .png, you may be able to convert it using image-editing software such as Adobe Photoshop or GIMP (it's free).
The dimensions of digital images are measured in units of measurement called pixels. For example, an 800 x 600 pixel image is a little more than 11 x 8 inches. You can change the dimensions of your image by using image editing software such as Adobe Photoshop or GIMP. Making images smaller is no problem. Making images larger can often cause them to look blurry or pixilated, and is not always a good idea.
In addition to the dimensions of your image, you'll need to be aware of its file size. The file size of an image is how much room it takes up in your account. You have a finite amount of space on your Angelfire account and you don't want your page to take forever to load, so you'll want to make sure your images stay small.
The simplest way to make an image smaller is to reduce its dimensions (as explained above) or its resolution. You can edit either of these using an image editing program such as Adobe Photoshop, Corel Paintshop or GIMP.
Resolution refers to how finely detailed your picture is, and is measured in DPI, or Dots Per Inch. Your computer monitor does not display any finer resolution than 72 DPI, so unless you're planning on printing the pictures on your webpage anything larger than that is just wasted space.
To check on the file size of any image on the web or saved on your desktop, right click on the image with your mouse and select Properties. Remember, the smaller the file size, the better, as larger files take longer to download. Depending on what the image is being used for, different image file sizes are acceptable. Background images, for example, may end up being much larger sizes than say images that are displayed inline with text. If your images are up in the 200 KB file range though, you may need to re-evaluate how you're saving your files for the web.
Uploading Images
On Angelfire, we offer a few different ways to upload your images.
To upload an image, you'll need to use the Angelfire Web Shell. If you're unfamiliar with the Web Shell, take a look at our Intro to Web Shell Tutorial. If you're familiar with Web Shell, follow these easy steps...
- Check to be sure you're in the directory you want to put your image in. You'll need this information later, to include the image in your webpage. You can see what directory you're in by looking under File Management for the words Current Directory. If you're not in the right directory, navigate to the directory you want to upload your image to before uploading. If you're not sure what directory to put your image in, don't worry about it -- uploading images to your primary, or home directory, is fine.
- Under File Upload (underneath your file list) click Browse.
- A pop-up window will open. Using this window, find the image you wish to upload.
- Once you have found the image you want, and can see its name in the File Name space in the pop-up window, click "Open".
- The pop-up window will close, and your image's name will appear in the text field. Click "Upload" to upload your image. The page will refresh, and you'll see your image under File Management.
- If you have more than one image to upload, you can click on Upload Multiple Files and upload up to 10 at a time. You'll be able to browse to each image as you did the one above.
It is also possible to use the Image Transloader to upload images to Web Shell from other websites. (Make sure you have permission to use the image first -- it's not nice to steal other people's work.)
The Transloader is located right next to the File Upload section of the Web Shell. To upload a file, you have to type in the exact URL location of the file you wish to copy. (You can find the full path of any image on the web by right-clicking on the image with your mouse, and selecting Properties.)
You also have the option of changing the file name to a different name. This is handy if you are copying over a file that has the same name as a file you already have on your website. If you DO want to replace the file on your website with the file you are copying over, be sure to check the Check to overwrite box.
Once you have finished filling out these fields, click the Move it button to copy the file to your website.
Adding images to your website
Now that you've uploaded an image to your Angelfire account, you'll need to include it on one of your webpages. You can do this using either the Basic or the Advanced Editor. In either case, you'll first need to make sure you have the complete and correct image path. The image path is the directory where you uploaded your images. If you uploaded your images to say, an Images folder then the image path would look something like: images/file-name.jpg. If you uploaded your image to a folder within a folder, it would look something like: foldername1/foldername2/file-name.jpg.
There are two ways to add an image to your website. The first is as an inline image. You can add an image to your webpage using the Web Shell Basic Editor. When following the Basic Editor's wizard, there will be multiple places that you may be prompted to browse to and find an image to use.
If you are using the Advanced Editor or just writing your own HTML file to upload, you would need to know the proper HTML code to place an image on your page. The code would look something like this:
<img src="images/file-name.jpg" />
The img src stands for Image Source. It's looking for the image path to where your image has been uploaded to.
Adding a background image calls for some knowledge of CSS. What you want to do here is, in the Web Shell Advanced mode, or in a HTML/CSS file of your own, use the direct file location of your image and add it to a particular HTML element on your page.
For instance, to add an image to the background of your entire website, you would create a CSS rule for your <body> tag. It might look something like this:
body{background-image:url(images/backgroundimage.jpg);}
That particular rule would take whatever your background image was, and tile it on the background of your website. If you didn't want the image to tile, the CSS code would look like this:
body{background:url(images/backgroundimage.jpg) no-repeat;}