Working with images

Acquiring Images

HTML documents can contain references to images. These images can be photographs, designs, icons, or logos and can be acquired in several ways, such as:

 

Buying or downloading ready-made images.

   

Digitizing photographs. This can either be accomplished with a digital camera or a scanner. The University offers four workshops that address these issues.

  

Creating your own images. To design your own images, an image-editing program must be used, such as Adobe Photoshop or Adobe Photoshop Elements.

Image Copyright

Copyright laws must be considered in any use of audio and video recordings, images and any work authored by another person or entity. Do you have permissions to use that image or video? Or, will using them fall under fair use? Be safe by following guidelines which provide a "safe harbor" within which to make choices about using others’ materials or portions thereof. Refer to the Copyright section for additional information.

Image File Format

The two most common image formats on the Web are:

GIF (Graphic Interchange Format) – used for illustrations without gradients.

JPEG or JPG (Joint Photographic Experts Group) – used for photographs, illustrations with gradients and large images.

 

Image File Size

Whenever you include an image in a Web page, you need to be aware of your image file size. If your image file sizes are large, they will take longer to download (or appear) on the Web page.

In general, try to keep images file sizes as small as possible, without degrading the quality too much.

How do you find out the file size? You can either right-click the image (or Cmd+click on the Macintosh), and then click ‘properties.’ You may also open the picture within an image-editing program, such as Adobe Photoshop Elements.

Image File Location

Before inserting an image into your Web page, it is important that it is located within your Web site folder. Images should be stored in an images folder that is located in your Web site folder. This is very important for file organization and file management. Here is an example:

TIP: When using image editing tools, be sure to keep a copy of your original image in case you wish to use it later. Also, remember to resize your image to the correct size before it is placed in a Web editor.

 

 

 

 

 

 

http://www.csus.edu/training/handouts/workshops/WebDesign.pdf