 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
CKCS Web Publishing SIG |
|
|
|
|
|
|
|
January -- Images: Use and Optimization |
|
|
| Website images can be used in a variety of roles, including: |
|
|
|
adding clarity |
|
|
|
navigation |
|
|
|
color, interest |
|
|
|
entertainment, educational value |
|
|
| A number of tools can be used to edit and format images in your website. Some of the best ones are free! |
|
|
|
Paint.net |
|
|
|
Irfanview |
|
|
|
ArtRage |
|
|
|
VicMan's Photo Editor |
|
|
| Images should complement site, not overwhelm it.... Too many graphics on site, images that are too large slow download time. May result in visitors leaving your site before it has fully loaded. :) Also, you may want to have fewer images on your intro page than your internal pages. Consider your audience - what is their connection speed - dialup, broadband? And try to choose a host server with a reliable, fast response. |
|
|
| The total size of your webpage = html code + images. Recommendations are for this size to be no more than 40K. |
|
|
|
|
|
| Adding images: |
|
|
| Geocities |
|
|
| Click here for a tutorial on adding images to your page. |
|
|
|
|
|
| Image formats for the Web: GIF and JPG |
|
|
| GIF (.gif) and JPG (.jpg) images are bitmapped raster (pixelated) files. There are pros and cons of each. |
|
|
|
GIF |
|
|
| Best for images with areas of flat color, such as logos, cartoon-like illustrations, and line art. Unlike JPGs, GIFs can be made transparent, which when displayed on the web, can appear to blend with background image or color. |
|
|
| GIFs use an 8-bit indexed color pallet, for a total of 256 colors. Compression (LZW) is "lossless", meaning that no image info is sacrificed in the compression process. Can result in larger files than JPGs. |
|
|
| GIFs can be saved in "interlaced" format, allowing the image to be downloaded on your webpage in a series of passes. |
|
|
|
JPG |
|
|
| JPG images are best suited for photographs and complex images. JPGs use a 24-bit color pallet, meaning they can contain ~16 million colors. However, JPGs use a higher compression rate than GIFs which results in overall decreased image quality. |
|
|
| Saving as a "Progressive" JPG is similar to the Interlaced GIF in that it allows for image downloading in passes. |
|
|
|
|
|
| Notes on optimization |
|
|
|
72 dpi resolution is the "standard" for web images. This is substantially lower than print resolution, but necessary to keep file sizes small. |
|
|
|
Limit the dimensions of your image by cropping away unnecessary/unwanted parts of your image. |
|
|
|
Take advantage of browsers' tendency to cache files by reusing images in your site. |
|
|
|
|
|
| Image Sources |
|
|
|
Scanner |
|
|
|
Digital Camera |
|
|
|
Illustrations |
|
|
|
Photo archives and Clip Art: |
|
|
| Non-commercial: |
|
|
| www.clipart.com |
|
|
| www.free-clip-art.net |
|
|
| www.1clipart.com |
|
|
| webclipart.about.com |
|
|
| Commercial/professional: |
|
|
| www.comstock.com |
|
|
| www.gettyimages.com |
|
|
| www.wonderfile.com |
|
|
| With purchased clipart collections, be sure to read the licensing agreement.... |
 |
|
|
|
|
|
|
|
| MISC |
|
|
| Bandwidth Conservation Society |
|
|
| Web Pages That Suck |
|
|
| Some good web authoring resource links |
|
|
| Cool Site of the Day |
|
|
| Image Maps |
|
|
| Fixed Design for 640x480 |
|
|
 |
|
|
|
|
Earth Healing - Daily Reflections |
|