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.
Image editors allow you to crop, resize, and optimize (compress) a JPEG. Be sure to edit a COPY of the original camera file!
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.
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.
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.
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:
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:
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).
The PDQ Library is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.