Saving Your Screen Captures for the Web

Once you have optimized a screen capture as far as size, it must be saved in web format in order to be utilized on your website. These steps are a continuation of optimizing  screen shots in Adobe Photoshop.

Saving Your Screen Captures for the Web
Instructions and Screenshots
Step 1

Once the file has been resized, you now need to save it in web format. Choose File - Save for Web...

graphic depicting the File - Save for Web  choice in Photoshop
Step 2

For most graphics, select the Gif format and click on the 2-Up tab to compare sizes between the original and the new file. The goal is to keep the graphic size under 10 K. Also note the download time listed underneath the size.

Graphic sample showing the size and download requirements of a gif file

In the above example, the new graphic has been reduced to 1.41K in size and will take 1 second to download and display over a 28.8 modem.

Tip:

If the file is still larger than 10K, try reducing the colors.

Click on Save to complete the process.

graphic pointing out gif file settings
Step 3

Type in a meaningful name next to filename: and click on the Save button.

Step 4

Close the original graphic in Photoshop. When prompted to save the changes to the original, choose No.

graphic depicting the Save Changes screen for a  Photoshop image

In FrontPage - choose File - Import to bring your graphic into your web folder so that it is ready to use.

Tip: Don't forget to include your Alt tag when inserting into your page! (Right-click on the graphic, choose Picture Properties. Click on the General tab and type in a description of the graphic in the Text: field under Alternative representations.)

Go to top of page