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!
- Make a copy of the original camera file to edit!
- Crop the image to eliminate excess background or improve
the "composition".
- 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.
- Using editing tools to increase the brightness or contrast
can sometimes improve a photo significantly.
- 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.
- 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.)
- 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.
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:
4.2 KB @ 1.4 KB per second = 3 seconds
Start up a graphic image in a browser = 2 seconds.
Total = 5 seconds.
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:
- 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).
- 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.
- 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.
- 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.
- 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.
- Eliminate unnecessary graphics from your page. Voila! Faster.
- Use a background color for your page instead of a background graphic.
This creates a nice look with no extra loading time.
- 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.
- 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).
|