How to Display Your Art on the Web: Part 6

[This is part of a series of articles for which the introduction and list of articles is here. If you haven’t read the introduction yet, it would be helpful to read it first.]

Atoms to bits
Unless you work digitally, in order to get your artwork from the easel/drawing table to the web, it needs to be translated from physical atoms to bits of digital information (as Scott McCloud points out), i.e. photographed or scanned to a digital image file. That file will then be used to create the final resized and compressed image file that is displayed on your site or blog.

If you work digitally, you probably know a good bit of what’s in this article already, and can go surf YouTube while the rest of the class catches up.

Photographing your work
This is an area were I don’t have a lot of personal experience, as I largely work digitally, but there are many resources on the web (and in print) from “those who know” (see my list of resources below).

You’ll find some conflicting information here and there, particularly in terms of digital vs. film. If you’re preparing a portfolio for galleries, many of whom still want submissions as transparencies (slides), then slide film is the obvious choice. You’ll still have to scan the slides for the web, which requires a slide capable scanner; and it may be just as easy, if not easier, to take an alternate set of digital photos at the same time, specifically for the web.

Hiring a professional
You may want to take a stab at doing it yourself, but be critical. If you can’t get the results your work deserves, consider hiring a professional photographer. Find one who lists the photography of artwork specifically as one of their specialties. There’s a big difference between photographing a cute, drooling baby and a painting of a cute, drooling baby.

Scanning your work
If you your artwork is flat, on paper, illustration board or the back of a napkin, and is small enough, you might consider scanning; but for good results that don’t require a lot of color correction, you’ll want a graphic arts quality scanner (or access to one). Even though images for the web are prepared at low resolutions, scan at 200 ppi or better to give yourself some leeway. It’s always easy to scale down in image editing software, you can’t scale up. If you’re scanning for print too, scan at 300 or higher.

Again, try it with what you have, but be critical of the results and consider the option of a professional service bureau if the scans don’t look right. I turn off all the scanning “helpers” and image correction options, scan as raw as possible and do any corrections in Photoshop.

Image editing software

Once your artwork has been converted from atoms to bits, you may need to make adjustments to the color or straighten off-square photos or scans; and you will certainly need to use image editing software to create the final resized and compressed image files for display on the web. (Plus you always need something on your computer that will let you put the President’s head on Arnold Schwarzenegger’s body to amuse your friends.)

Adobe Photoshop is the industry standard professional image editor, if you have that and know how to use it, you’re ahead of the game. If you don’t have it, Photoshop is expensive (around $600) and can be more than you need to simply prepare a few images for the web; kind of like buying a Porsche Carrerra to drive to the train station. (I know, you told your wife/husband that a 2-seater would save on gas.)

If you are a full or part time student anywhere, you are eligible, as I advise the students in my Flash classes, for academic discounts that make things like Photoshop remarkably cheap (about the price of an upgrade package). Academic software is the same as the commercial versions, but it has some restrictions, (can’t be upgraded in the future, requires that you wear horn rimmed glasses and a pocket protector). See this description of academic software from About.com. Beware of cheap software scams in this area. (i.e. all those emails you get promising Adobe Photoshop for $29.95!) As a teacher, I can also get the real discounts; when I use them I usually buy from Academic Superstore. You have to produce proof that you are a student or teacher for the real academic discounts, but part time and continuing education classes usually qualify (and it doesn’t have to be art classes). Talk to the coordinator at the school.

Photoshop Elements (Mac & Win) is a lower priced (around $100) consumer version of Photoshop without the gee-whiz, super-duper, hyper special pro features (that let you put the President’s head on Arnold Schwarzenegger’s body and make it believable enough to fool Associated Press). You can read a comparison of the two on Graphic-Design.com and a review on CreativePro.com.

GIMP (The GNU Image Manipulation Program) is a free, open source image editor for Mac, Windows and other platforms, that some genius programmers with too much time on their hands created on all those Friday nights when they didn’t have dates and Stargate SG-1 was in reruns; and is in some ways comparable to Photoshop (and in many other ways, not). Installing and using it requires a degree in particle physics and a black belt in computer graphics, but it’s very capable (and pretty amazing for free software). Again, despite having the “right price” it may be the equivalent of using a bulldozer to turn over your backyard garden (which, granted, can be fun) because of the learning curve. It will also let you put the President’s head on Arnold Schwarzenegger’s body and make believable enough to fool USA Today (not that that takes much). See the description on Wikipedia. Some other geeks have spent their Friday nights putting together GIMPshop, a modification designed to make it more like Photoshop and easier to use.

Graphic Converter is a Mac only shareware application ($40) that is the universal can opener of graphics applications. It has an amazing ability to open and save in almost any image format known to man and computerkind (and some that no one’s ever heard of). Graphic Converter has good basic image editing tools and you can try it as long as you want for free, (but you should pay the modest asking price if you keep and continue to use it).

iPhoto® is the image cataloging application that ships free with iLife® as part of the Mac® OS X® computer® operating® system® from Apple®. It has basic image editing tools that may be sufficient for prepping your images for the web.

Windows Photo Gallery (Wikipedia description) is basically Microsoft’s version of iPhoto, and also has some basic editing tools. Previous versions were called Mocrosoft Picture It! (Wikipedia description). Like all Microsoft applications, to use this application you must click on a button to agree that Microsoft owns your immortal soul, and all reproduction rights thereto, in perpetuity and in all media, physical, electronic and ethereal, in current use, yet to be created, or ever to be imagined by the mind of any sentient being in any plane of existence. Other than that, it’s free.

Paint Shop Pro is a Windows only image editor that has its adherents and detractors. I mention it because it’s popular and relatively inexpensive ($60), and in some ways more powerful than Photoshop Elements; but take the “Pro” part with a grain of salt. If you’re a “pro”, you use Photoshop. See the description on Wikipedia.

About.com has a couple of handy lists: Free Photo Editors for Windows, and Free and Budget Photo Editors for Mac. Turn your sound down and be ready to duck the annoying talking ads for SitePal.

The big list. Here’s a long list of available raster graphics image editors from Wikipedia, most of the items are linked to more detailed descriptions. More than you ever cared to know about.

There are also some online image editors. The idea seems kind of foreign to me and I don’t know much about them, but who knows?. Here is a list of free Online Photo Editors from ExtremeTech. If anybody has tried these, let me know how you like them.

What’s the format, Kenneth?

Web browsers can generally display three kinds of images, news, comics and por… er, I mean GIF, JPEG and PNG. They all use some method of compression to reduce the file size of images so they can be transmitted over the web without taking a week to download.

GIF (Graphics Interchange Format) can be pronounced with either a hard or soft “G”, but the originators of the format say choosy artists choose “jif”. GIF was the original format back in the early days, when the web was 5 steam-powered computers hooked together with Radio Shack speaker wire across the MIT campus. GIF is really only suitable for images with a limited color range (256 colors) and flat areas of color. The GIF format can produce images with a small file size and can be good for some things, like simple, flat-color comics, typography and cartoons of the President’s head on Arnold Schwarzenegger’s body.

JPEG (Joint Photographic Experts Group) is pronounced “jay-peg”. JPEG images are by far the most common image format on the web, and are usually the format you will use to reproduce your art for the web. They support the full range of millions of colors. Used correctly, JPEG compression can compress images to to a remarkable degree without losing apparent image quality. Used incorrectly, it can turn your images into a grunky mess that looks like the cat threw up in your digital camera.

JPEG is a “lossy” compression method, meaning it throws away image data that the algorithm has determined you won’t miss; kind of like your wife cleaning out your studio when you’re not home. If you compress a JPEG too far, however, or re-compress an existing JPEG, you can wind up with dirty looking “artifacts” in the image. This is where is pays to have an image editor that gives you a preview, like Photoshop’s “Save for Web” feature, that shows you an approximation of how your image will look as you choose the compression level. You want the smallest file size possible without seeing any artifacts – dirty, squarish roughness in areas of the image (see the JPEG image above with the compression level of “10”). The stronger the level of compression, the lower the file size; but also the more image data that is thrown away. Always keep copies of your original files; and let your wife know that you really did buy 2 copies of Uncanny X-Men 96 on purpose.

As a general rule don’t re-save a JPEG as a JPEG; create a fresh one from the original file. Re-compression throws away more image data. JPEG’s that are originally saved with minimal compression, however, like those from a digital camera, can be used to make new JPEGs. Not much image data has been discarded. JPEGs saved for the web, though, are generally “pushed to the edge” and compressed as hard as possible without looking bad; re-saving those will make your images look like spoiled peaches.

PNG (Portable Network Graphics) is, the originators insist, pronounced “ping”, though you will hear “pee en gee” in certain circles. PNG images combine some of the characteristics of GIF and JPEG. Like GIF they are a lossless image format and support transparency. Like JPEG they support the full color range millions of colors. The main disadvantage is that their lossless compression method is not as efficient as JPEG’s lossy compression, and they make images with larger file sizes for the same level of apparent image quality.

The emails were right: size matters

Image size
In addition to file size you need to be concerned with image dimensions. You will need to determine how your images will display within your interface design, and how much room you have in your design area, before you resize them and save them out as final files for the web. I’ll be covering the design of online galleries and portfolios in a future post.

Once you know how the images will be displayed, you will probably be making more than one version of each image. Depending on your gallery design, you might be making:
a thumbnail and a full size image,
a thumbnail, medium size preview image, and full size image,
a thumbnail, full size image and jumbo, extra large, Grade-A, hi-res detail image,
a cropped detail close-up,
and/or all of the above.

If you’re clever and persistent, and not doing anything on Friday nights, you may be able to figure out how to have your image editing software save out several size versions simultaneously, for an entire folder full of files, using batch processing.

Resolution, or dpi and ppi, FYI, QED
Resolution in print is measured in “dots per inch” (dpi), or “lines per inch” (lpi), and on the computer is measured in “pixels per inch” (ppi) (or pixels per centimeter for those of you in the rest of the civilised world). While this matters in print, or when scanning or working in Photoshop, image resolution does not matter on the web. What matters is the dimension in pixels.

If a 2″ by 2″ (5cm x 5cm) image has a resolution of of 100ppi (i.e 100 pixels per inch), it will be 200 pixels by 200 pixels. If the 2″ image has a resolution of 300ppi, it will be 600 pixels by 600 pixels. Both of those images will print at the same size, 2″; the higher resolution one will have more detail.

Web browsers, however, are rather narrow-minded and don’t understand or care about image resolution. All they understand is dimensions in pixels. So the first image will display much smaller on screen than the second. (Unless you learned “new math” in the 60’s, in which case 5 images + 5 images = 12 images.)

This concept is made additionally complicated by the fact that computer monitors can be adjusted to display at different resolutions, so “pixels per inch” is actually a relative term. When someone says “on the web it’s all 72 ppi”, they are referring to a default resolution.

Monitors come in different sizes. 1024 x 768 is the default resolution for a 17 inch monitor, and it’s 1280 x 1024 for 19 or 20 inch monitors (with other varistions for “widescreen” monitors). If you have your own monitor set to a higher resolution than the default, it will display more pixels per physical inch, and images will appear smaller onscreen to you than they might to other computer users (and vice-versa if you set your resolution lower than the default).

If you get lost, try a bit of the cake that says “Eat me” (hmmm… or is it the bottle that says “Drink me”?)

Putting it in the browser

OK, you digital artists in the back row who were surfing YouTube can pay attention now.

Embedding images in HTML
Images aren’t actually “in” the HTML page the way words are, they are “referred to” by the IMG tag, which basically tells the browser “Go get this image from this location and stick it here in the page.” The IMG tag can also tell the browser what the size of the image is (in pixels by pixels), which helps the browser leave a place for the image while it’s downloading so it can render the page faster. You can artificially force an image to display at a different size this way, and some HTML editing software will give you the impression this is a fine thing to do. It’s not. It will make your image display poorly. Prepare your images at the size they will display, and don’t trust advice from strange HTML editors to whom you have not been properly introduced in the course a chaperoned social occasion.

Displaying images in Flash
If you are preparing your images for display in a Flash-based gallery or slideshow, save them out as JPEG images, compressed just as if you were going to place them directly in a web page. Dedicated image editors do a much better job of image compression than Flash does. Flash won’t re-compress an imported JPEG unless you tell it to. Flash is considerate that way.

“Protecting” your images

You can’t.

Clever tricks that don’t work very well
Many people try various tricks to keep their images from being easily downloaded, like disabling right-click with JavaScript, placing a transparent GIF over the image in a CSS layer, putting the image in a Flash file, adding a sound file that screams “Don’t touch that!” whenever someone chooses “download image”, etc. They can all be gotten around in one way or another. All of them, in fact, can be defeated by simply using a third party screen capture utility (which is why, of course, all software from companies with less than a $4 billion market cap should be illegal, or at least that’s what Steve Ballmer tells me).

Watermarks and other ways to ruin your image
I should be clear here that by “watermark” I mean a word or symbol, sometimes partially transparent, that is laid over an image in an attempt to render it useless to someone who wants to download and “repurpose” it. The problem, of course, is that this also renders the image useless for showing your artwork as anything but a hideous, insulting joke. You can also choose to display your images so painfully small that they have the same results. See my rant on “How Not to Display Your Artwork on the Web“.

Bylines and credit markings
On the other hand, marking your image with a small, innocuous signature or byline, crediting you as the creator of the image, perhaps with a copyright mark and/or listing your web site’s URL, is a fine idea, as long at it’s done without making your image look bad. If you’re going to be displaying your images against a known background color and you are comfortable that the color won’t change in the future, you can add an additional band of that color to the bottom of each image (by adding to the “canvas size”), and add your byline there without intruding on the image area at all.

Keep it in focus
Unless you’re putting your images up for the benefit of your mom and Aunt Joan (it’s so lifelike!), your purpose here is to have the images on the site present the best representation possible of your work. That’s the end goal for all this fuss. As Fernando sez, you want them to look mahvellous!

Next: Gallery and portfolio design

Resources

Photographing your work
A Short Tutorial from Art Link Swap
How to Photograph Artwork from The Artists Web (images missing, still useful)
List of Resources on Photographing Artwork from Catherine Jo Morgan
How to Photograph Art from Dallas Arts Review
Photographing Your Artwork by Russell Hart and Nan Starr (Amazon link)
Other books (Amazon)
Photographing Small Paintings for “painting a day” blogs from Jeff Hayes

Scanning your work
Scanning Artwork from The Artists Web
How to Scan Artwork from Treelight Studios

Image editing software
Photoshop (Adobe: Mac & Win) (Amazon Mac & Win)
Academic software dicsounts – info from About.com
Photoshop Elements (Adobe Mac & Win) (Amazon: Mac & Win) Comparison on GraphicDesign.com
GIMP, description on Wikipedia, GIMPshop
Graphic Converter
Paint Shop Pro (Win), description on Wikipedia
Free and Cheap Photo Editors for Windows and Mac, (About.com)
Big list of raster image editors from Wikipedia
Free Online Photo Editors from ExtremeTech

Formats
JPEG, GIF and PNG on Wikipedia
JPEG artifacts and Pitfalls of JPEG Compression on About.com

Resolution
DPI and PPI Explained on tildefrugal.net
Display, Printing, dpi and ppi on Photo.net