Preparing Your
Pictures for the Web
Pictures are one of the best ways to make your web
site unique. We've prepared this step-by-step tutorial to simplify the process
of making your pictures look great and load fast for your web site
visitors.
Skip to a specific step or read the whole
tutorial:
- Scan
Get your picture into your computer.
- Prepare
Prepare your picture for use on your web
site.
- Add
Add your file to your account.
- Place
Place your file on a specific page of your web
site.
What Kind of Pictures Can You Use on Your Web
Site?
Photographs, illustrations, drawings, logos, you name it. If you
already have these on your computer, you'll just need to make sure they're in a
file format that will work on the Web. You may skip to step 2,
Prepare, to learn more about your pictures' formats.
Many office-supply stores, copying centers, or
print shops will scan images, format them, and give them back to you on disk.
You can even have your pictures developed and put on disks or online. Explore
your options. If you have someone else process your images, ask to save them as
GIFs (pronounced "giffs" or "jiffs") or JPEGs ("jay-pegs").
Scanners
A scanner is a machine that
makes a digital copy of your photograph or drawing and saves it in a format
your computer can understand. If you don't own a scanner, you can rent time on
a scanner at a local office supply store, print shop, or copying company.
If you're going to rent time on a scanner, we
suggest you begin building your web site and make note of pages that would look
better with pictures. When you've got a good list of pictures that you'd like
to add to your site, go out and scan them all at the same time.
Every scanner works a little differently. At its
most basic, scanning requires:
- Running scanning software on your
computer.
- Laying photographs or drawings on
the scanner's flat screen.
- Using your scanning software to
tell your scanner what to do (the scanner takes a picture of whatever you've
laid on the scanner's flat screen).
- Saving the picture on a disk or
your hard drive and opening it up in a graphics program.
- Saving the picture again as a GIF
or a JPEG. (These file formats are explained later in this tutorial.)
About Image Resolution
The
resolution of your scanner determines the amount of detail your scanner
will grab from your original picture. The higher the resolution, the more
detail you're scanning in, and the larger your final image file will be (in K,
or kilobytes — your storage space). On the Web it's best to use
pictures with small dimensions that take up a small amount of K. The smaller
the picture in dimensions and file size, the faster it will load into a web
browser (like Netscape Navigator or Microsoft's Internet Explorer). If your
picture takes up a lot of K, your web pages will load very slowly and frustrate
your users. Also, big (very tall and wide) pictures will not look their best on
the Web.
Changing Image Resolution
Check your
scanner's documentation to learn how to change the resolution settings when you
scan your pictures. If you are scanning a small picture, like a logo on a
business card, you can use a high-resolution scan, such as 200 dpi. (The term
dpi stands for "dots per inch." This measure of printer and scanner
resolution refers to the number of dots that fit on a line at this resolution.
The finer the resolution — the finer the detail in the picture — the
more distinct dots are visible on a line. A 200 dpi picture has 200 dots per
inch-long line, or 40,000 dots per square inch. A dot is roughly the size of a
printed period in a newspaper column.) Most of the time you'll be able to get
good scans using a lower resolution, like 150 dpi. Try to avoid scanning at a
resolution higher than 300 dpi (unless you're scanning something with very,
very small dimensions), or you will end up with huge picture files.
Remember: big picture + high
resolution = slow web site.
Scanning Your Pictures
Whether you use
your own scanner or rent one, you'll scan your pictures and save them onto your
hard drive, or onto a disk or storage cartridge. Then you'll need to reopen
your pictures in a graphics program to prepare them for the
Web. (Common graphics programs that you might have on your computer include
Photoshop, Paint Shop Pro, PhotoImpact, Photo-Paint, PhotoDeluxe, or Kai's
Power Soap, to name a few.)
Some scanners work directly with graphics software
on your computer, allowing you to scan images directly into that program
(bypassing the scanner software completely). If you need help scanning your
pictures, we recommend reading the help files that go along with your scanner,
calling the company that makes your scanner, or seeking assistance from someone
in the office-supply store where you're scanning your images.
Digital Cameras
A digital camera takes
photographs electronically, bypassing film and eliminating the scanner. Most
digital cameras come with software that you'll use to get your pictures from
the camera to your computer.
Next you'll need to prepare your
picture to appear on your web site.
[ T O P
]
Saving Your Picture
Using software that
came with your scanner or digital camera, save your picture as a file in your
graphics program. Your scanner or camera software might give you the option to
save your picture as a GIF or JPEG, but don't do that yet. If you're given the
option, save your picture as a BMP (for example, picture.bmp). Remember where
you've saved the picture on your computer and what its file name is. Make sure
your file name doesn't contain any spaces.
Windows users: If you don't already have a
graphics program installed on your computer, download a copy of Paint Shop Pro
from Jasc Software using one of the links shown below. This is a fully
functional evaluation version that you'll be able to use free for 30 days. At
the end of the trial period, you may decide to pay for it. It'll cost $70-$100
Paint Shop Pro 7 for Windows
95 or 98 or Windows NT 4.0
28.6 megabytes (will take
about 2 hours with a 28.8K modem)
Paint Shop Pro 3.11 (16-bit)
for Windows 3.1x or Windows NT 3.51
1.8 megabytes (will take
approximately 10 minutes with a 28.8K modem)
The best program to use, and one that we will
have a class for in the near future is Photoshop Elements by Adobe. It's $99
for the program. Buy it at your local computer or office supply store.
Macintosh users: If you don't already have
a graphics program installed on your computer, download a copy of
GraphicConverter, which is very similar to Paint Shop Pro. GraphicConverter is
shareware, which means you can test the program for as long as you like,
although you should pay for it if you find it to be useful. GraphicConverter
costs $35.
GraphicConverter 4.0.2 for Macintosh
3.4 megabytes (will take approximately 25 minutes with a
28.8K modem)
Once you've saved your scanned picture, you'll need
to change it from the graphics program's format to a format that works on the
Web. GIFs and JPEGs are the two most common graphic file formats for the Web.
These formats compress the electronic version of your picture, making the file
take up less storage space on your hard drive or web site without much change
to the appearance of the picture.
When you change the picture's format, remember where
you've saved the picture on your computer and what its computer file name is
(studio.jpg, for example). When you add the picture to your Image Library,
you'll have the opportunity to name and describe the picture in greater
detail.
Should You Save the Picture as a GIF or a
JPEG?
Photographs usually look best in JPEG format. GIF format is best
for drawings, line art, or illustrations made on the computer. Also, if your
drawing or photo has large areas that are all one color, a GIF is probably your
best choice. Not sure? Save it as a JPEG.
| |
As a GIF: 3K |
|
As a JPG:
4.7K |
| |
| This illustration is best saved as a GIF because of its areas of flat
color. File size savings: 40%. |
| |
| |
As a GIF: 4.6K |
|
As a JPEG: 3.2K |
|
| |
| This picture is best saved as a JPEG because it's a photographic
image. File size savings: 40%. |
Small Is Beautiful, Part One: Pixel
Dimensions
You should be aware of the two sizes of an image: pixel
dimensions and file size. Size matters on the Web — the bigger the image
in height, width, and file size (K), the longer your web site visitors will
have to wait to see it.
First let's look at the pixel dimensions of an
image: its height and width.
Pictures in your computer are measured in pixels. A
pixel is the smallest possible thing you can see on your computer screen. The
period at the end of this sentence is a single black pixel, while the logo at
the top of this page is about 200 pixels wide.
Generally speaking, pictures on your web site
shouldn't be more than 500 pixels wide. Ideally, they should be even more
narrow. Many people have small monitors, and they'll have to scroll
horizontally to see wide pictures. Also, your visitors will have to wait a long
time for large pictures to download. Don't do this to your customers!
Changing Pixel Dimensions
- Open the picture file in
your graphics program. Most programs indicate the picture's dimensions
somewhere on the toolbar. For example, Paint Shop Pro displays your picture's
pixel dimensions in the lower right-hand corner.
- Go to the Image
menu.
- Choose
Resize.
- Make the picture's
height or width smaller. (Please note that if you change the picture's width,
its height should change proportionally, and vice versa.)
Although the menus differ from
program to program, the general process of resizing your image's dimensions
should be the same no matter which software you use. Some programs are easier
to use than others, so this can be tricky. If you run into trouble, search for
Resize or Image Size in the program's help files.
Small Is Beautiful, Part Two: File Size
The second kind of picture size is its file size, usually measured in K, the
amount of storage space it will occupy on your computer. A picture's file size
is directly related to how long it takes for the picture to download. The
larger the file size, the longer the download time. For this reason, you should
always check the file size of your image before you add it to your web
site.
Checking Your Picture's File Size
Try to
keep your images smaller than 30K. A good rule of thumb to remember is that it
takes approximately one second to download three kilobytes (K) over a 28.8K
modem.
Windows users: To
check the size of a picture, right-click on it, then choose Properties. A popup
window will show you information about the file, including its size. The
illustration below shows the properties for a 15K picture, which would take
five seconds to download over a 28.8K modem.
Macintosh users: To
check the size of a picture, click on the file in the Finder. Choose File in
the menu bar, then Get Info.
Slimming Down Your JPEGs
To make your
JPEGs as small as possible, play with the compression settings in your graphics
program. If your program allows it, save the picture as a progressive
JPEG. Unlike other web pictures that load slowly from top to bottom,
progressive JPEG pictures appear to fade in gradually as they load. This
fade-in loading gives progressive JPEGs the illusion of appearing more quickly.
To save your pictures as progressive JPEGs in Paint Shop Pro, open your
picture. In the File pulldown menu, choose Save As... Double-check that your
file name doesn't contain any spaces. Then follow these steps:
- Make sure that JPEG is selected
as the file type.
- Click on the Options... button.
- Click to choose Progressive
encoding.
- Pick a compression setting
between 3 and 10.
The process of saving progressive JPEGs in graphics
programs other than Paint Shop Pro will vary; check the software's help files
to see what's involved.
Checking Your Picture
Sometimes your
picture will look different in your graphics program than it does on your web
site. To avoid any surprises, make sure you know how your picture will look to
your web site visitors. To check your picture, drag-and-drop the file into an
open window of a web browser like Netscape Navigator or Microsoft's Internet
Explorer. Make sure that you're satisfied with the picture's size and quality.
(Netscape Navigator will display the pixel dimensions of your image in the
title bar, as shown below.) Always remember to do this quick check before
uploading your picture to your Image Library or File Manager.
If You're Unsatisfied
If you are
unsatisfied with the image quality, try saving the JPEG again with a higher
quality setting. Each time you create a new JPEG, you should start from the
original picture file, like a BMP file. Why? Each time you save a picture as a
JPEG, your graphics program reduces the image quality. Opening a JPEG, editing
it, and resaving it as a JPEG is like making a photocopy from a photocopy
— each copy will lose progressively more detail until your picture becomes
unrecognizable. To avoid this, always make your JPEGs from a master file.
Like It?
Happy with how your picture
looks? Right-click on your picture's icon on your desktop and choose
Properties... to display the picture's file size. The file size should be less
than 30K. If it's much bigger, go back to your graphics program and lower the
image quality to lower the file size. When you're adding this picture to a page
of your web site, you'll want to keep in mind its size in relation to other
pictures on the page. Each picture should be less than 30K, and generally
speaking, you should try to avoid more than 60K of images on any single
page.
If You Don't See the Picture
If you don't
see your image at all, there is something wrong with the picture file. In this
case, you might see a broken image icon (Netscape) or a white box with a red
X in it (Internet Explorer). This probably means that you accidentally
saved it in a format that's not compatible with the Web. Try opening your
original file and resaving it as a GIF or JPEG.
Now that your pictures are prepared for the Web,
adding them to your online business will be a simple process.
[ T O P
]
Depending on your level of service, you will have
access to either the Image Library feature or the File Manager feature.
Image Library
If your level of service
includes this feature, all the pictures you've prepared for the Web will go
into your Image Library, a tool that helps you store and organize every picture
you'll use on your site. You have to put your pictures in the Image Library
before you can add them to your web site. Anytime you're in a page layout task
that involves adding an image, we'll ask you to browse through your Image
Library and pick one of the pictures there.
To add pictures to your Image Library, go to the
Image Library task and choose Add Picture. Then you'll need to tell us where
your pictures are saved on your computer. To do that, you'll browse through
your hard drive to the folder that holds your pictures. (You'll find
step-by-step instructions in the task.)
File Manager
If your level of service
includes File Manager, you can use this tool to add all kinds of files to your
web pages (including picture files, PDFs, sound files, and more). First you'll
need to upload the files to your File Manager. To upload files to your File
Manager (up to five at a time), go to your File Manager and click on the Upload
button. Then you'll need to tell us where your files are saved on your
computer. To do that, you'll browse through your hard drive to the folder that
holds your files. (You'll find step-by-step instructions in the File Manager
task.)
File Manager also allows you to use FTP to transfer
many images to your File Manager at once. If you're planning to use a large
number of images on your site, you'll appreciate the convenience and time
savings of this option. For more information on using FTP to upload images to
your File Manager, please read our FTP tutorial.
How to Save Time
Make a list of all the
files you'd like to use on your site. Prepare your pictures for the Web,
following the steps above. When they're ready, add your files one at a time to
your Image Library or File Manager, in one sitting. You can add individual
files to your web site at any time, but adding a number of files in one sitting
is very efficient.
[ T O P
]
After you add files to your Image Library or File
Manager, they'll be stored there indefinitely. You'll be able to add any file
in your Image Library or File Manager to your homepage, custom pages, employee
bios page, catalog or portfolio pages, and other pages within your online
business.
Please note that the files in your Image Library or
File Manager won't appear on the pages of your web site until you edit a
specific page and choose to place a picture or other file there. For instance,
once you've added a picture of your store to your Image Library or File
Manager, you can edit your homepage and add that picture to the content on that
page. Once a file is in your Image Library or File Manager, you can add it to
any page, and on as many pages of your web site as you like.
[ T O P
]
|
