Nothing will have quite as much effect on the look of your Shopsite store as quality images. Most of us are not artists or graphic designers, and only few are Photoshop experts. Therefore, we either need to hire experts to do our work for us--or we need to practice a little, arm ourselves with some good advice, and use the right tools.
Adobe Photoshop is the standard for creating and editing graphics for the Web. But it's a complicated and expensive piece of commercial software that has many features that the average web designer will never use. It costs about $900 and can be purchased wherever you can purchase software. Fortunately there are some less expensive shareware alternatives:
For Windows
LView Pro:
A great shareware application that allows you to convert and edit graphics for web pages.
Paint Shop Pro:
A larger and more extensive program, Paint Shop Pro has more tools for illustration and image creation, along with conversion.
For Macintosh
Graphic Converter:
With each new release Graphic Converter takes on more of Photoshop's functions, and has multi-file conversion capability that probably surpasses what the new Photoshop 4.0 will have when it's released. It's especially suited for file conversion, but has editing features as well.
General Graphics Information On-line:
Creating High Impact Documents:
This Netscape resource has all the most important information about graphics. This is a must-read.
Make Your Scanner A Great Design Tool:
This excellent and beautiful site is a must read for anyone who has a scanner. You may never have realized what your scanner was good for.
Animated GIFs
Read this c/net article about gif animation, then
download gif Animation software for Windows or Mac.
Trimming For Speed
A well executed graphical element lends credibility to a site. It says: I value this site
enough to invest the time needed to make it visually appealing. This is especially
important for merchants. Let's face it, the web is full of fly-by-night operations. You won't
get the business until customers feel that you're there for the duration. Graphics can also
define your public image. There are no faces on the internet, no hands to shake, no
body language. An individual's personal aesthetic can say a lot about their personal
sensibility. This is your big chance to make a proper first impression.
Graphics also add functionality to your site. Although reading comes naturally to most
of us, having graduated from picture books in our childhood, most of us think that
pure text is more professional. It is important to realize, however, that a screen full of text is
nothing like a page full of text. You should notice that as you read this paragraph your
eyes become fatigued quickly. This is because the text on the screen is actually
vibrating very quickly, and your eye is constantly trying to compensate for the change.
Graphics can communicate volumes of information at a glance, and don't (often)
require the same scrutiny that text does.
A few technical considerations.
On the internet, quality means speed. Speed, speed, speed. Have I mentioned speed? Graphics,
therefore, must download quickly--or at least appear to download quickly (I'll get to
that in a moment). A few factors dictate the speed of a download:
- The size of the graphic--how much memory it takes... how many "k"
- The speed of the server where it is being stored
- The speed of the surfer's access to the internet
- The current traffic a server is handling (how many people are accessing the server at
any given moment)
- The speed of the surfer's own computer
Each of these larger factors are, in turn, affected by other variables. The size of the
graphic is determined by its resolution (pixels or lines per inch), its actual
measurements, number of colors and compression.
The speed of the "home" server is predicated by the internet connection (is the server
on a T1, a T3 ISDN, or on a common phone line, and the actual
number-crunching capabilities of the computer.
The speed of the surfer's access is, in turn, conditioned by modem speed (28.8 or 33.6
being high-end, 2400 being neanderthal) and the access provider's hookup.
The current traffic is completely random.
The surfer's own computer, finally, dictates download speed by processor speed, graphics
capability, and RAM. Sixteen megs of RAM is the lowest I would recommend if you are trying
to run a new operating system like Windows 95 or Mac system 7.5.
How can I use this information to my advantage?
You only have control over the first two variables: The size of a graphic & the
speed of the server where it is being stored. Concerning the latter, ask your service
provider how fast their server is and factor that information into your desicion. In the
case of the former, let's talk about graphics.
Let's talk about making your graphics fast... or at least making them appear fast (in
both senses of the word: "seem" and "materialize").
As I mentioned earlier, the size of a graphic is determined by its actual size, resolution,
palette, and file format (compression). Size, of course, is determined a lot by your
needs, but you should keep a few things in mind:
- Create/Save your pictures at 72 dpi (refer to your graphic program's manual). 72 dpi
is the resolution that a computer monitor displays everything. If your graphics are saved at
a higher resolution, they will still appear at 72 dpi on-screen and the rest of the resolution
will translate into wasted time and disk space.
- At 72 dpi, your images should not exceed 7 inches in width (preferably 5 or so).
Anything greater will not fit inside the common computer monitor.
- The size of image that you need may be smaller than you think. Most logos do not need to be more
than 300 pixels wide and 60 pixels tall. Most product images do not need to be more than 150x150.
- If possible, reduce your color palette. Many graphics editors will allow you to convert a
"thousands of colors" graphic down to 256 or 16 or 4 colors. Some will let you choose a specific number.
A logo that contains only three distinct colors should have its pallette reduced to those three colors for
optimum performance.
- Decide on gif or jpeg images. Gifs are better for drawings and line art and logos, because
it is easy to reduce their color palette down to a few colors. Jpegs are better for photographs
because they support 24 bit color, and because they compress the image, allowing a more vibrant image
with a smaller disk size.
- When possible (when you control the HTML) be sure to delineate height and width
measurements in the "img height=X width=X src=X" tags. This will markedly improve download
speed. All images specified using pull down menus in the Shopsite system will have size
tags inserted automatically.
- Interlace GIFs if at all possible. Interlaced GIFs aren't any faster than their
cousins, but appear so because something comes onto the screen and then fades into clarity,
which gives surfers something to gawk at while they wait.
- If you are having problems making good images on your own, hire a professional. It may seem
expensive, but not as expensive as presenting a less-than-professional store to your prospective
customers.
