webpage images

Rutledge

Insert an Image Into a Webpage

Obtain the Image

Sources:

Scanner
See my document on Scanning. 75 dpi is sufficient for images that will be used on the web.

Digital Camera
Obtain the image from the diskette or hook the camera up directly to your computer. See me if you need help.

Clip Art or Pictures on Your Computer

Web (be aware of copyright issues)

Types of Files

The image needs to be a jpeg (jpg) or a gif or png. If it is a bmp file you can insert it, right-click the image and choose Picture Properties. With the General tab selected, click either JPEG or GIF to convert the format of the bmp file. Usually use jpeg for pictures and gif for graphics or clipart.
More information on jpg versus gif versus png

Put the Image in the FrontPage Webpage

Click where you want the image to be inserted. To improve placement, make use of tables for the layout of your image and text. (See my how-to page on Tables.)

You can insert an image from your computer or paste an image that you have copied from another source .

Insert Image

Click on the menu Insert, Picture and then either ClipArt or From File.

ClipArt - After you have selected your ClipArt, click the top item in the pop-up list (Insert clip.)

From File - You will get the following window.

#1. Be sure that your webfolder is selected. If not, navigate to it.

#2. Go to Images if the file is already in your web Images folder.

#3. If it is not, click the Select a File on Your Computer button and navigate to the image and select it.

Paste Image
From an image on the web or some other document - You can copy the image and paste it directly into your webpage. You will be forced to save the image when you save the page.

Edit the Image in FrontPage

When you click on the image a Picture Toolbar will appear at the bottom of your screen.

Size - If the image is too large, click on it to select it, and drag a corner handle toward the center until you reach the size desired. Click the Resample button on the Picture toolbar after you have resized an image to shrink the corresponding file size.

Rotate Image

Cropping Tool

Resample

Other basic editing can be done using the Picture toolbar. Point to the various buttons on the Picture toolbar to see their function. Be cautious about changing the Brightness too much. See Thumbnails below to learn more about this feature on the Picture toolbar.

Edit the Image in Another Program

IrfanView, PhotoShop, Jacs PaintShop Pro and other software programs can do more involved photo editing. IrfanView and Microsoft Photo Editor are loaded on all school machines. To start PhotoEditor, go to Start, Programs, Microsoft Office Tools, and Photo Editor. See me if you need help with one of these programs. See the following document for tips on using Photo Editor. Photo Editor - Quick Tips

I like IrfanView best for quick photo editing. Download it from twocows. It is a fast download and an easy program to use.

You may want to try Bluefive PIXresizer instead. http://bluefive.pair.com/pixresizer.htm

The reduced files are saved in a different folder, so your original images are not altered at all. PIXresizer offers several different resizing methods to choose from and can automatically recognize image sizes to calculate the best fit. In addition, it can convert between image formats (JPEG, GIF, BMP, PNG and TIFF), rotate images, convert to grayscale and resize multiple images in batch mode.

Image File Size

There are several things you can do to reduce an image's file size. One is to crop the picture to the section needed. Another is to reduce the dimensions of the image as stated above. Your page and image should not exceed 800x640. A possible goal for a page size is one less than 30kb. A possible goal for an individual image size is less than 17kb.

Information on reducing image file size | More information on image file size.

Save a Page With an Image

When you save a page that has images, you will have to save both the page and the images. It is a good habit to always save the images in you Images web folder.
If the folder is not the correct Images folder. Click on Change Folder to get to the correct folder.

Find your folder in the list, double-click it, double-click Images and OK.	You can rename the file at this point to something more significant. Be sure to leave the extension (.jpg in this case) the same.
Picture Options - Click this button the first time you save a page with a new image to reduce the file size even more.

More information on images and options at http://www.accessfp.net/graphics.htm

Too many images or animations can make a slow loading page. Usually use a few for emphasis.

Thumbnails

The third button on the Picture toolbar will automatically create Thumbnails. If you have many images on one page (such as a page of student art work) you can decrease the load time by using this option. When someone sees the page, they will see smaller thumbnails of the image. Clicking on a thumbnail will open a full size version of the image. Load time is indicated in the lower right-hand corner of your FrontPage screen.
Here is an example I did of use of thumbnails.

Works by Picasso Please click on the images below to see a larger version.

Homepage | MUS homepage