SMALL BUSINESS WEB SERVICES Internet Consulting San Francisco, Marin, Sonoma

Basic Tips

Websites work with JPG and GIF image formats:

JPEG or JPG - Joint Photographic Experts Group; "jay-peg" is one of the two most common types of images used on the web

GIF - Graphics Interchange Format; the most common type of images used on the web. Developed by Compuserve.

You can grab graphics from anywhere on the web! In Windows you use a Right Mouse Click followed by a "Save Image As..."

Be sure to remember copyright laws on the web are similar for those on print.

The web only displays graphics at 72 dots per inch (dpi). Anything with a higher resolution needs to be saved at 72 dpi to reduce file size.

The web only has 216 safe colors. Here they are:
216 browser safe colors

Now read the article Picture Perfect.

Size Reduction

You have an image and you want to upload it to a website? Follow these steps before you upload, and your image will load much faster.

You will need an image editor like Photoshop or Paint Shop Pro. Work with the TIFF format and when you are done save as either GIF or JPG. GIF works best for small images and icons, JPG works best with photos.

Crop your image to eliminate all unnecessary border area. Crop fearlessly!
Reduce the dimensions of image. Anything over 250 x 400 pixels is overkill.

Save files at 72 dots per inch (dpi).
If it is a large photo save it in JPG format: in photoshop do "save as" and choose lowest resolution.
If it is a small photo or graphic or icon save in GIF format. Reduce the number of colors as far as possible, thereby reducing file size. You can also use Media Builder GIF Optimizer for this.

Interlacing & Progressive Encoding

Use an interlaced GIF or a progressive JPG image. An interlaced GIF, instead of being transmitted and displayed top-to-bottom like a normal image, is first displayed at its full size with a very low resolution, then at a higher resolution, until it finally attains a normal appearance.

Here is an example of an interlaced GIF image:

Here is an example of a progressively encoded JPG image:

Links to further info on Interlacing & Progressive Encoding.

Transparent

Transparent GIFs appear to blend in smoothly with the user's display. They do this by assigning one color to be transparent. Modern web browsers all supports transparency, so the color will be replaced by the browser's background color, whatever it may be. Here is an example of a transparent image:

Thumbnails

Place a miniature version of the image (called a thumbnail) on the page and link it to the complete image. By clicking on the thumbnail your visitors can see the entire image - if they are willing to wait for the download. Here is an example of a thumbnail - click it!:

Graphic In A Table

if you place something (e.g. a graphic) into a table then the table will load in its entirety before the rest of the page starts to loads.

Here is an example of a graphic inside a table:

Low Resolution Preview

Use the LOWSRC tag to display a low-res version of the graphic. This will quickly load first and give the viewer an idea what image is going to be loaded.

Here is an example of a graphic with a low resolution preview:

The HTML for such an image will look like this:
image description

Scanners

If you have photos or graphics of your own you can use a scanner to make a "digital copy" from your "hard copy".

Buy a scanner! But do not get some "el cheapo" model. It may give you bad quality images and break down soon.

Make sure the imaging software that comes with your scanner is top notch. This is just as important as decent hardware!

Good news! Scanner prices have come way down. Do your homework and save money! Use the hardware reviews that are listed at KC Shopping before you spend your cash.

Kahl Consultants Small business web services

ImageTips