Web Images

Most web sites use JPEG (JPG) files to display photos to get a full range of colours. Other formats (below) are PNG, SVG and GIF.

To convert your camera photo file into a file to publish to a Web site or include in emails, you need to use an image editor. Four programs that you might choose are Jasc's Paint Shop Pro, Ulead's PhotoImpact, Adobe's Photoshop Elements or Macromedia's Fireworks. Paint Shop Pro allows you to set up your favorite tools in a toolbar. PhotoImpact has a Smartsaver tool that allows you to see your optimization results in side-by-side images. Elements is a baby version of professional software (I've never tried it but Photoshop is NOT intuitive), Fireworks has powerful tools but also not intuitive for beginners.
[More about : Digital Cameras : Favorite Software ]

Image editors allow you to crop, resize, and optimize (compress) a JPEG. Be sure to edit a COPY of the original camera file!

1. Make a copy of the original camera file to edit!
2. Crop the image to eliminate excess background or improve the "composition".
3. Then reduce the photo size to use in the web page or email. Remember not everyone can view a photo larger than 600 x 400 pixels, the resolution of smaller screens.
4. Using editing tools to increase the brightness or contrast can sometimes improve a photo significantly.
5. Last, you optimize as you save the JPEG file. You can use the standard 70% compression, or even less, to create a smaller file without degrading the quality. Trial and error works best.
6. To insert the file into your web page move this new file to your web site folder, and insert it into the page using your favorite web page editor. (To add it to an email, use your mail editor tools.)
7. Publish it. Voila!

JPEG (JPG) Image File Format

JPEG has quickly become the most widely used digital image format used by digital camers, the web and email. However, it is a compressed file format that permanently, irreversibly loses quality each time the image is opened, edited and saved. You will get better quality photos if you save your original JPEG, and make a copy in an image format that is not lossy (TIFF, BMP, PNG). Save this version for further editing. Save a file in JPEG format file to insert into web pages or email. (In Windows, JPEG files are usually saved with a .JPG extension.) JPEG should not be used where precise colour matching is important, as colour shifting can result from JPEG compression.

GIF (Graphics Interchange Format)

GIF is used for line art, logos, and animated images, rarely photos. Recently, UNISYS has begun demanding payment of $5000 if you use even one GIF image on your website that was created by an unlicensed program. Try to replace your GIFs as soon as possible! PNG is a free alternative that is better and faster. [More: BurnAllGIFs.org ]

PNG (Portable Network Graphics)

PNG, pronounced "ping", is a powerful and free compression technique. Both Netscape v4 and Internet Explorer v4 support the PNG format. PNG doesn't reduce quality or number of colours. PNG files cannot do animated GIFs, but there is a MNG format that supports animation that may be supported soon in browsers.
[http://www.w3.org/Graphics]

SVG (Scalable Vector Graphics)

SVG may be used in the future to draw images as geometric shapes that are filled and outlined. This makes file size much smaller. All the image formats currently in use are bit maps, which use a huge grid of colour information to draw the image.

View our list of acceptable file formats for your Web site information.

Palettes

Some images have palettes that look great in one Web browser, but not in others. When you create your image, you can choose which palette it will use. Test the image in several common browsers if you are designing web pages with images where the colors are important.

Many people never change the default 256 screen colours set by Windows software. To learn how to change it to a higher resolution and be able to view the thousands of colours as well as some really beaufitul Web sites read the Screen Colours page. The current standard for the Internet is 800x600 and 16-bit colour.

• Browser Safe Colour Palette

File size

A large file loads into a web browser slowly; people are impatient. Ten 1-KB files will take longer to load than one 10 KB file.

A standard 14.4 Kbps connection can download 1.5 KB per second plus an additional loading time for each file. In 5 seconds, people on the Internet can see one web page plus one image file if both add up to 4.2 KB. To calculate how long it will take to load under ideal conditions:

Image size

A large image (or group of images) may display in other people's browser windows with the dreaded "horizontal" scroll bars. It is worth taking a bit of extra effort to code your page so the images display in ALL browsers, not just yours.

Here is a 700-pixel wide image that you can display in your browser to show you how wide it is. Many people still use screen resolutions that are 800 pixels wide.

How to Speed up Graphics

Here are some techniques to make graphics files smaller and/or faster:

1. GIF allows for any number of colors between 2 and 256. The fewer colors the smaller the file. If you create graphic art (not photos), use basic colors, even the 16-color palette, if that will do the job. The file size will be much smaller compared to a 256-color palette. Programs that can do this are: Abode Photoshop(Mac/Win), GIFConvertor(Mac), and PhotoGIF(Mac), Picture Publisher(Win), Paint Shop Pro 3.0(Win), LVewPro, WebImage from Group42, Graphic Convertor(Mac), Fractal Painter, Painter 2.0, PhotoStudio from ArcSoft, ImageMagick, ClarisPaintShop, PaintIt, ColorIt and ToolWorks 2.2(SGI Indy).
2. Always use the WIDTH and HEIGHT parameters so that advanced browsers (like Netscape Navigator) can allocate space for the graphic as it is downloading the main page. This is faster. Good HTML authoring software will automatically add this for you.
3. Make the graphic or photo smaller in physical size. The corresponding file will be smaller. All graphics software can select a smaller part of the image to display ("clip", "crop", or "trim") as well as scaling or reducing the size of the image.
4. Create a hot-link to a URL instead of using an inline reference for any graphic that is not necessary for the context of the web page. The person can decide whether to view it or not (depending on modem speed, desire, browser, etc.) if you make a clear description of the content of the picture.
5. If you use transparent GIFs, make the background color the same as your page background color so it will blend regardless of the web browser being used to view your page. Not all browsers display transparent GIFs. By trimming such a graphic to reduce extra "background", the file will be smaller.
6. Eliminate unnecessary graphics from your page. Voila! Faster.
7. Use a background color for your page instead of a background graphic. This creates a nice look with no extra loading time.
8. If you use a background graphic, experiment with the size. Since the graphic is "tiled" to fill the screen, using a very small clipping of a "pattern" can often produce the same look.
9. If you wish to keep the large graphic, create a small icon. Use the icon (cat-sm.gif) as a hot link to get the larger image (cat-lg.gif), but only if the person wishes to see it:
   <A HREF="cat2.gif" WIDTH=300 HEIGHT=400 ALT="Cat 47kb"> <IMG SRC="cat.gif" WIDTH=30 HEIGHT=40 ALT="Cat 47kb"> Photo: Cat in a Hat (47kb)</A>

When choosing images for a Web page, consider that many people turn off automatic loading of images in their browser so they don't have to wait to read the page. Many others do not even use a graphics-capable browser (e.g. Lynx web browser is text-only).