A Website Construction Guide for Visual Artists:

Image Files and Thumbnail Options

As I mentioned before, the first step is to get your work digitized. Photo processing stores can make digital images from slides, but it is pricey (several dollars per image, usually). It's best to get your hand on a digital camera and take new photos. Of course, if the original works are small enough, scanning is the best option. Even if my paintings are too large for the scanner, I'll scan them in sections and piece them together in Photoshop. It's worth it for me to bypass glare and atmospheric deficiencies.

Preparing images

You will need to get access to Photoshop, or another suitable image-editing application, to prepare images for your site. Photoshop is the industry standard for image manipulation and design for either print or the Web. Here are some free alternatives:

• Gimp
• PhotoPlus 6
• Paint.NET
• ImageForge
• Seashore

Sometimes, freeware image-editors do not support GIF format. This is because software developers must pay licensing fees to include GIF technology (which is not the case for JPEG). PNG is an open source format intended to replace GIF, but it has only recently been embraced by browsers. In any case, it's good to read about the features of a program (and supplant this with a Googlesearch for reviews/discussions) before investing time with it.

Typically, I'll need to do the following (in Photoshop) to an image before I'm ready to export to JPEG or GIF format:

• Adjust the levels -- making sure the brights are bright, and the darks are dark. This is done with Image/Adjustments/Levels
  
  
• Color balance -- particularly if I've photographed an image, as opposed to scanning it. Image/Adjustments/Color balance
  
  
• Rotating the image slightly, unless my digital copy is properly aligned to the x/y grid. The handiest way to rotate an image is to use the Move tool -- with the "Show Transform Controls" box activated at the top bar -- and float the cursor just outside of one of the square corners of the image til you see a curved double-arrow. Then click-drag. Otherwise, you can use Edit/Transform/Rotate
  
  
• Cropping to the edges of the artwork, or to an appropriate margin.
  
  
• Resizing the image for the Web. More on this below.
  
  
• Sharpening the image, just slightly -- the algorithm that shrinks images down can leave edges looking a bit blurry. The Sharpen, Sharpen Edges and Unsharp Mask filters are available under the Filters/Sharpen menu, but I prefer Unsharp Mask because you can control the intensity of the effect.
  
  

In Photoshop, when you open an image, it is by default a "background" layer and resistant to many transformations (under Image/Adjustments or Edit/Transform, many options will be greyed-out). This is the application just trying to preserve the layer for you, and encourage you to work from a copy. You can copy that layer, or just double-click on it to get the "New Layer" console, and click "OK".

Note: PC screens are traditionally darker than Mac screens. If you're on a PC, bump up those highlights a bit, and make sure those shadows have enough strength to withstand increased brightness. If you're on a Mac, don't place too much faith on subtle darknesses -- they may all fall to black for the other camp of viewers.


Resizing images:



Images should be resized at 72 DPI to conform to most monitors. When reducing image resolution (traditionally, done with Image/Image size), it is recommended that you do it in gradual steps. In any reduction algorithm, you are compressing many pixels into one pixel, so the less drastic at each step, the better. Also, with gradual steps you can view the effect the reduction is having on your image. Personally, I shrink 300 DPI images to 150 DPI, then to 72 DPI -- all the while I'm keeping my eye on the height/width dimensions of the image in the Image Size console to make sure the image doesn't shrink too much. If this is about to happen, you can type in the desired dimensions of the image before you click "OK" -- and Photoshop will be forced to preserve the desired pixel dimensions while changing the resolution.

More often than not, once I've reduced the image to 72 DPI, I still need to shrink the image to make it feasible for the Web (I aim for 300-600 pixels in either direction, or 70-90 pixels square for thumbnails). I'll reduce the width in steps, roughly 100 pixels at a time, so that the image doesn't look too "shellshocked".

Any image scrunched down for Web use is going to look a bit ravaged compared to the original, but that's the nature of the Web, so don't be disheartened. In its online context, these images won't look so bad, because everyone's pictures have undergone the same process. In the case of displaying artworks, it is arguably better to have a larger image that maintains its integrity than to aim for download speed (which is better for images that illustrate content in text), but a portfolio site with too many sluggish images can frustrate visitors.

Important! Once you have reduced the size of your image, do not save it over your original image. Always maintain a good, large 300 DPI image of your artwork.


Logging your image files

When you are inserting your images into your website, you are going to need to know the exact filename, the width and the height. You'll want to make a written log of this information as you are preparing images, so you don't have to re-open an image-editor each time you write an <img> link.


Saving images:

The last step is to compress your graphics to an Internet-friendly filetype. The basic image filetypes are .jpg and .gif. JPEGs are best used for images with gradations, blurs, and for photographic images in general. GIFs are used for images that consists of flat colors and hard edges. GIFs are smaller and load faster, and are advantageous for making page design and navigation elements (like logos and buttons).

With JPEGs you can toggle the compression strength (and preview the results). I usually compress large images at a level of 7 or 8 (out of 12) which is perhaps a bit generous in favor of image-quality, and a level of 5 or 6 for thumbnails -- since their job is to load fast and not necessarily to provide a gratifying visual experience.

If you are creating a GIF, it is best to use the "Web-safe" colors. These are the colors made available by checking the "Only Web Colors" box in the color palette window. Otherwise, the application may be forced to do some creative problem-solving to cope with "unsafe" colors. Granted, most modern browsers can handle any colors you throw at them, but keep in mind that a lot of folks are viewing the Web through PDA's and cel phones and the like, and the 256-color-limit can come back to haunt the designer.

Please note: if your digital images are in "CYMK" mode you'll need to change them to "RGB" mode (select Image/Mode to change this). Otherwise, you can end up preparing your images, compressing to JPEG, inserting them into your website, and realize that the browser fails to render them. It's good to get in the habit of checking the CYMK/RGB mode of your images before you work on reducing them, just to avoid this headache later. This normally shouldn't happen, unless your scanner is set to CYMK, or you receive your scans from a designer who is accustomed to working in print.


"Save for Web" in Photoshop:



Fortunately, recent versions of Photoshop allow you to skip the resizing steps. When you select this option, you get a console with plenty of options (filetype, compression quality, etc.) You can also set the image dimensions here, using the "Image Size" tab on the right side (just left of the "Color Table" tab). At the top left of the console are options for previewing your optimized image under different compression rates. The reduction to 72 DPI is automatic, so you don't have to worry about it.

Conjuring images in a Web document

The script that calls forth images is similar to a link, but you don't need opening and closing tags:

    <img src="name of image file">
    <img src="siteLogo.jpg">

If your images are kept in a separate folder, then you'll need this format:

    <img src="name of folder / name of image file">
    <img src="images/siteLogo.jpg">

Personally, I recommend this format:

    <img src="name of image file" width="#" height="#" border="#" alt="name of image">

When you specify the width and height of the image in advance, the browser can finish formatting the page while waiting for the images to download. Otherwise, the composition of the page can jerk about as the images materialize. The border # is usually either a "1" (1-pixel border) or a "0". The alt tag allows a bit of text to appear in the image-space while the browser is still downloading the image. This is useful if the image-link breaks -- at least something will tell the visitor what he/she is missing. It's also handy for visitors using text-only browsers to access your site.

Here are more <img> attributes:

title="" This creates a bit of text that pops up in a small window near your cursor, when you mouse over the image.

hspace="" This creates a horizontal margin for the image. Hspace="10" would preserve 10 pixels of space to both the left and the right of the image.

vspace="" This does the same, but vertically. Vspace="10" would force 10 pixels of space both above and below the image.

Keep in mind that hspace and vspace are outdated in favor of box properties in CSS.

Negotiating images and text

Browsers will treat images like they treat text -- they don't have any automatic line-breaks or other such considerations, they simply interrupt the document flow:



Above, I just jammed the <img> script after the word "skin", but the height of the image forces a huge gap above that line of text. It would be better if I could have the image and text side-by-side. This can be done using tables (or float properties in CSS), but there's an easy way to do it. I'll type the script for the image first, using an align attribute, and then allow the text to fall to the right:



The result:



Now, let's say I put 3 <br> linebreaks after the word "worldwide" in the first sentence:



The text spills underneath the image in a clumsy fashion. So I'm going to make the following adjustment to the HTML:



The clear attribute causes proceeding content to start fresh on the next available line:

Creating thumbnail links

Thumbnails are the most efficient method of presenting a set of lightweight images for the viewer to sift through and select (loading up a page of large images not only forces the viewer to wait, but is often the mark of a true amateur). This involves an HTML tag to conjure the thumbnail image, nested inside of a link tag that will send the viewer to the large image.

Example #1:

  Script:

<a href="media/mumps.jpg">
<img src="media/mumps_sm.jpg" width="75" height="75" border="1">
</a>

Example #2:

  Script:

<a href="imagedemo.html">
<img src="media/mumps_sm.jpg" width="75" height="75" border="1">
</a>

You can click the thumbnails to view how they operate differently. Example #1 simply links the thumbnail ("mumps_sm.jpg") to the larger image ("mumps.jpg") -- both are in a folder called "media". The browser understands to create a new page to house the image, which is usually a plain white/grey default page and the image will load up in the top corner. Since this is not the most attractive way to showcase images, Example #2 shows how you can link the thumbnail to a whole new webpage ("imagedemo.html"). The drawback here is that a separate page must be created for each image displayed.

I should note that with both examples I snuck in a piece of scripting into each of the a-link tags that creates a new browser window for each image:

  <a href="media/mumps.jpg" target="_blank">

Otherwise, either example would have replaced this tutorial page. It isn't necessary to do this, though.