Sunday, September 9, 2007

Preparing images for the web

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

24 thoughts on “Preparing images for the web

  1. Li-An

    Ah ah (laughing in french), the Gimp article is funny…because I use Gimp :-) I have no money to put in Photoshop for the need I have and when I try Photoshop it seems very strange and not very easy… I must have become a real geek…

  2. Jose

    Charley,

    Thanks for your continued attention to this. I’m in the process of developing my site(s) and these posts have been very helpful.

    Could you at some point discuss the various CMS options out there? I notice you use WordPress. I’m currently researching Textpattern.

    As an aside, when I began working on my sites, I thought all I needed to know was a little html/css and use a template app like RapidWeaver. Now, several months into this, I’m teaching myself xhtml/css. And realizing I might benefit from CMS, I am now doing more researh into CMS and stand-alone servers for development. It never stops…and still no website yet!

  3. Charley Parker Post author

    Unfortunately, I don’t know much about the various CMS options. I’ve worked with developers on a few small proprietary ones.

    It’s an area in which I don’t have much experience because I don’t personally like to work within their limitations, although they’re great for some things (blogs, for instance), but that’s a very personal bias. (I tend to turn down design jobs that involve CMS, just because I don’t want to take the trouble to learn them.) For a given job or individual, though, they can be an excellent and powerful choice for creating and managing a web site. I do know there are some online gallery CMS that a number of artists use as their galleries, particlualrly concept artists, and I’ll try to look into these. Best I can suggest in the meantime is to search for some reviews and comparisons to see what other people report from personal experience with them.

  4. Linda McCoy

    Charley,
    Your posts contain a wealth of information and I appreciate the knowledge you are sharing and the time you put into them.
    Can you touch on copyright? Once a character or story line for animation has been developed do you file for a copyright? I have something in mind, but would like to protect the idea before I begin to blog it.
    I realize I can file for copyright myself, but since there are several types I’m just curious about the next step.
    Thank you!

  5. Charley Parker Post author

    I’m uncertain if the copyright privisions have changed in regard to electronic publishing as “published works”. Usually the copyright office requires two copies of a published work to be deposited with the copyright application, though you can copyright an unpublished work. The Copyright Office has a lot of printed and online information available. http://www.copyright.gov/

    However, given your description I think I should point out that you can’t copyright an idea or a general story line. (Otrherwise most current movies and television shows couldn’t exist in their formulaic, derivative state.) To enforce copyright infringement, you must be able to show close similarity to an existing work, i.e. an actual story, image or other work.

    Nor can you copyright a character. Characters can be trademarked, however, if they are used as a symbol for commerce (e.g. Mickey Mouse). The rules here can be more vague, but trademark is a much more involved and expensive process than copyright. See this quick overview from the US Patent and Trademark office: http://www.uspto.gov/web/offices/pac/doc/general/whatis.htm

    This is where you need more guidance and information than I can give you in a paragraph or two. Try a search on patents and trademarks, and/or intellectal property, at Amazon. There are lawyers, of varying degrees of expense, that specialize in these areas.

  6. Sarah Lawson

    Hi,

    Could I ask for some advice regarding JPEGS? I am trying to send my A4 illustrations via email and a format ready for printing.

    I have created fashion mood boards in Adobe Illustrator and when I convert them to JPEGS on the highest resolution setting my images come out looking very pixelated. How can I improve my images?

    Thank you :-)

  7. Charley Parker Post author

    If you have Photoshop as well as Illustrator, you’ll do better to export as a PSD file, at the size and resolution you want to print. Save the JPEG out of Photoshop (using “Export: JPEG”, not “Save for Web”). For print choose the highest quality setting (probably 10), i.e. largest file size.

    If you only have Illustrator, I’m not sure what to suggest. Illustrator doesn’t seem to want to anti-alias the vector shapes when exporting to JPEG.

    The best I can suggest is use Export: JPEG, not Save for Web. Choose a custom resolution setting of 300 or better at your print size. Choose Baseline JPEG. Leave the compression setting at the highest (probably 10), i.e. largest file size.

    You may also have better luck saving as a TIFF file.

  8. Jay Koelzer

    Hi Charley,
    I just wanted to give you a big thanks for all the food for thought that came in so handy in revamping my portfolio website. Sure, some things are obvious but I have to admit that you made many points I never considered. Thank you for passing on that knowledge and perspective!

    Your site is a morning essential!
    thank you!
    -jay

  9. Barney Davey

    Hi Charley,

    You are a treasure for other artists. The information you provide is unbiased, excellent and to the point. I’ve posted about your series on my blog and hope it helps generate lots of new readers for yours in the process.

    Thanks for your unselfish and informative contributions to the visual artist community.

  10. Robert Tracy

    The best method I’ve found in photographing art is to have a tripod with an extenable horizontal arm on the end of which you have your camera.

    My art is flat on the floor. The camera is pointing down. I use a carpenter’s level to level both the camera and the arm of the tripod.

    Most important I wait for a not too cloudy day (but no sun). I place the art close to a big floor window–actually a wide door whose glass is from the floor. The art is close to this “cloudy” light; say two feet away.

    All the focusing has been done and the camera is focused on the center of the art. Use a timer.

    The slightly cloudy day is important because it eliminates reflections from canvas texture, and it gives true color (the sun is just let me say impossible).

    Sorry this is so general. Hope you can figure it out.

    Robert Tracy

  11. Dawn

    This is awesome. I will send this link to fellow artists in my organization called 18 Artists as some of them are clueless on the subject. This should help. So glad you have this!!!

  12. Susan Daly Voss

    Hi… I just wanted to say thanks for offering all this good information. Your original article put into words so many things I’ve thought regarding awkward web design.
    I have a question about embedded color profiles. Is it true that when I save out my images for the web, I should assign an sRGB color profile for web use?
    thanks again,
    Susan

  13. Charley Parker Post author

    Thanks, Susan.

    The color space of the web, as much as it has a color space, is sRGB. However, if you are hoping to use embedded color profiles to get consistent color, you may be disappointed to learn that support for them is limited, and using them can result in inconsistencies between browsers. Safari and FIrefox 3.5+ support them. IE up to 8 does not. IE 9 promises support, but reports on how they are implemented are not encouraging.

    Embedding color profiles will result in richer color in the browsers that support them.

    See this article from Steve Mullen.

  14. Susan Daly Voss

    Thanks Charley, that helped clarify it for me. I use Firefox, and I think I’ll just embed profiles and hope for the best ;o) I’m a painter and it makes me nuts to think that my paintings aren’t being displayed with the right colors… hopefully gallerists and other creative types who would look at my work use Safari or Firefox.

  15. carolyn cobb

    when I send a photograph to The Vitrual Paintout and put my
    name and title under image, my name does not allow you to click on it to take you to my blog. How do I connect my name to my blog?
    thank you so much
    carolyn cobb

  16. Sunny Snaith

    Carolyn,

    You can’t make part of an image link to your blog without making an image map (difficult for IE, easy for others
    http://sunshinehtml.com/tags.html#links ).

    What I’d recommend is enclosing the image tag inside link tags:

    The TARGET part makes the link open in a new tab or window (so visitors don’t get lost down a rabbit hole and have to hit BACK a jillion times to find their place in your gallery).

    The HEIGHT, WIDTH, and ALT attributes are optional but very useful. The page will load faster and not jump around if the browser knows how big the image is. ALT text is used by search engines so your name is more closely associated with the image and so folks can find your artwork.

  17. Sunny Snaith

    The form stripped out my sample code …

    Pretend that all square brackets below are “less than” and “greater than” brackets:

    [A HREF="blogURL" TARGET="_blank"]
    [IMG SRC="imgURL" WIDTH=## HEIGHT=## ALT="description"]
    [/A]

  18. Sam

    Thanks for your information. I have been using Photoshop and Windows Photo Gallery. I had some troubles about inserting my pictures on a Google doc I once made but I figured out what the problem was. As I will be doing more of this pretty soon, I always welcome information like this that you posted on the web.

  19. CCP

    I really like the unbiased info here. This post is helpful especially for a visual art newbie like me. I have always been playing around image editing but I usually end up with messing up things especially when I always come across with embedded color profiles for getting color consistency. I’m glad I read this post.

  20. Rani

    You know even if the internet has been in this world for years now, we can’t expect everybody to have known everything especially about image editing. Photoshop is so popular and has been used by many but I can’t get the hang of it. I don’t like to hire a pro so I will just keep on practicing. Someday I’m going to make it.

  21. Sara J.

    I agree the need to find a professional photographer if photography is not really our thing. We would always want to give the best images on the web so we can’t just try stuffs with our amateur experience. Of course we are best at other things and because of this we are in the internet to show off what we got while we make sure image editing is done at the right way.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>