Common web image gaffes

Using graphics for body copy
Some sites out there use graphics for body copy on web pages, in order to get more typographical
control than CSS allows. However, using graphics for body copy causes text to
print poorly—much worse than HTML-based text. Additionally, it means the text can’t be
read by search engines, can’t be copied and pasted, and can’t be enlarged, unless you’re
using a browser (or operating system) that can zoom—and even then it will be pixilated. If
graphical text needs to be updated, it means reworking the original image (which could
include messing with line wraps, if words need to be added or removed), re-exporting it,
and reuploading it.
As mentioned in the “Image-replacement techniques” section of Chapter 3, the argument
is a little less clear-cut for headings (although I recommend using styled HTML-based text
for those, too), but for body copy, you should always avoid using images.

Not working from original images
If it turns out an image on a website is too large or needs editing in some way, the original
should be sourced to make any changes if the online version has been in any way compressed.
This is because continually saving a compressed image reduces its quality each
time. Also, under no circumstances should you increase the dimensions of a compressed
JPEG. Doing so leads to abysmal results every time.

Overwriting original documents
The previous problem gets worse if you’ve deleted your originals. Therefore, be sure that
you never overwrite the original files you’re using. If resampling JPEGs from a digital camera
for the Web, work with copies so you don’t accidentally overwrite your only copy of
that great photo you’ve taken with a much smaller, heavily compressed version. More
important, if you’re using an application that enables layers, save copies of the layered
documents prior to flattening them for export—otherwise you’ll regret it when having to
make that all-important change and having to start from scratch.

Busy backgrounds

When used well, backgrounds can improve a website, adding visual interest and atmosphere—
see the following image, showing the top of a version of the Snub
Communications homepage. However, if backgrounds are too busy, in terms of complicated
artwork and color, they’ll distract from the page’s content. If placed under text, they
may even make your site’s text-based content impossible to read. With that in mind, keep
any backgrounds behind content subtle—near-transparent single-color watermarks tend
to work best.
For backgrounds outside of the content area (as per the “Watermarks” section in Chapter 2),
you must take care, too. Find a balance in your design and ensure that the background
doesn’t distract from the content, which is the most important aspect of the site.

Lack of contrast
It’s common to see websites that don’t provide enough contrast between text content and
the background—for example, (very) light gray text on a white background, or pale text
on an only slightly darker background. Sometimes this lack of contrast finds its way into
other elements of the site, such as imagery comprising interface elements. This isn’t always
a major problem—in some cases, designs look stylish if a subtle scheme is used with care.
You should, however, ensure that usability isn’t affected—it’s all very well to have a subtle
color scheme, but not if it stops visitors from being able to easily find things like navigation
elements, or from being able to read the text.

Using the wrong image format
Exporting photographs as GIFs, using BMPs or TIFFs online, rendering soft and blotchy line
art and text as a result of using the JPEG format—these are all things to avoid in the world
of creating images for websites. See the section “Choosing formats for images” earlier in
this chapter for an in-depth discussion of formats.

Resizing in HTML
When designers work in WYSIWYG editing tools, relying on a drag-and-drop interface, it’s
sometimes tempting to resize all elements in this manner (and this can sometimes also be
done by accident), thereby compromising the underlying code of a web page. Where
images are concerned, this has a detrimental effect, because the pixel dimensions of the
image no longer tally with its width and height values. In some cases, this may lead to distorted
imagery (as shown in the rather extreme example that follows);

it may also lead to
visually small images that have ridiculously large files sizes by comparison. In most cases,
distortion of detail will still occur, even when proportion is maintained.

Not balancing quality and file size
Bandwidth can be a problem in image-heavy sites—both in terms of the host getting hammered
when visitor numbers increase, and in terms of the visitors—many of whom may be
stuck with slower connections than you—having to download the images. Therefore, you
should always be sure that your images are highly optimized, in order to save on hosting
costs and ensure that your website’s visitors don’t have to suffer massive downloads. (In
fact, they probably won’t—they’ll more than likely go elsewhere.)
But this doesn’t mean that you should compress every image on your website into a slushy
mess (and I’ve seen plenty of sites where the creator has exported JPEGs at what looks like
90% compression—“just in case”).
Err on the side of caution, but remember: common interface elements are cached, so you
can afford to save them at a slightly higher quality. Any image that someone requests
(such as via a thumbnail on a portfolio site) is something they want to see, so these too
can be saved at a higher quality because the person is likely to wait. Also, there is no such
thing as an optimum size for web images. If you’ve read in the past that no web image
should ever be larger than 50 KB, it’s hogwash. The size of your images depends entirely
on context, the type of site you’re creating, and the audience you’re creating it for.
There are exceptions to this rule, however, although they are rare. For instance, if you
work with pixel art saved as a GIF, you can proportionately enlarge an image, making
it large on the screen. Despite the image being large, the file size will be tiny.

Text overlays and splitting images
Some designers use various means to stop people from stealing images from their site and
reusing them. The most common are including a copyright statement on the image itself,
splitting the image into a number of separate images to make it harder to download, and
adding an invisible transparent GIF overlay.
The main problem with copyright statements is that they are often poorly realized (see the
following example), ruining the image with a garish text overlay. Ultimately, while anyone
can download images from your website to their hard drive, you need to remember that if
someone uses your images, they’re infringing your copyright, and you can deal with them
accordingly (and, if they link directly to images on your server, try changing the affected
images to something text-based, like “The scumbag whose site you’re visiting stole images
from me”).

As for splitting images into several separate files or placing invisible GIFs over images to try
to stop people from downloading them, don’t do this—there are simple workarounds in
either case, and you just end up making things harder for yourself when updating your
site. Sometimes you even risk compromising the structural integrity of your site when
using such methods.

Stealing images and designs
Too many people appear to think that the Internet is a free-for-all, outside of the usual
copyright restrictions, but this isn’t the case: copyright exists on the Web just like everywhere
else. Unless you have permission to reuse an image you’ve found online, you
shouldn’t do so. If discovered, you may get the digital equivalent of a slap on the wrist, but
you could also be sued for copyright infringement.