The Carving Consortium

 

ITECI Images (International Treasury of Eraser Carved Images)

View our images at: http://www.fortunecity.com/victorian/museum/316

Linda is no longer taking images for display at the ITECI website.

Please take copyright concerns into account before you use your image.


When you make your scanned image please try to keep the k size minimal (you might want to read some of the more technical information below). I've been told that 120 d.p.i. .jpegs work well. Another person suggested that scanning that scanning at around 75 dpi in color, then reducing it's size to aorund 350x350 makes it a nice viewable package that takes under 50k.When I take that into account with the information below I'm truthfully not sure what to suggest. Some of you might find that one way works better for you than another.


How to Minimalize the Size of Images for the ITECI Website

by Lynn Hershberger ~ LynnH@Voyager.Net

Greetings Linda and Carvers,

I do web design for my job, and I teach others to use computer programs. I can help. Here are a few hints:

There are several things that can create a too-large/too slow image for the web. They include

1) the wrong resolution-- too many dots per inch;
2) physical size of the scanned image; and
3) too many colors/wrong graphic image format (.jpg versus ..gif).

I will attempt to make short explanations and walk-throughs which affect these issues, and give guidelines which can improve the images for Linda's use. I will also give a few hints to clean up an image which will help them display better online as well.

When possible, I will give menu names in different image editors. Those editors I own are: PhotoShop 3, Paint Shop Pro 4, IPhoto Plus 1.2, and Graphic Converter 2.4.3 which are well-distributed. Probably other version numbers will have similar menu choices as well. Other editors may work fine for you. (If you have LView, it is basically geared toward scanning photos and saving without many bells and whistles, so I don't use it and don't know what menus you should even try... but adventure and see what you can do. Corel PhotoPaint is similar to PhotoShop but I don't know it well so I don't give menu equivalents in that program either, though it is very full-featured and should have what you need.)

Here are six steps you can follow, in order, to improve the quality of your images and optimize their size and file format:

A. SCANNING TECHNIQUES:

The web displays images at 72 dots per inch, or dpi (sometimes called pixels per inch). Most scanners think you are scanning for print, not the web. Printers often print at 300dpi or 600dpi. It is smart to scan in at an exact multiple of 72, such as 144 or 288. This avoids the "jaggies" that sometimes happen if you start work in low dpi resolutions or you reduce by a proportion other than a whole number. Eventually decreasing to 72dpi will decrease the size of the image even more, whether .gif or .jpg format.

Every scanner is different, so I can't offer advice that will work for everyone. However, most of them have the dpi settings in the box you see before you click on the "scan" button. That box is called the scanner-driver or twain-driver box.

B. TRIM/CROP IMAGE:

Another thing that can really help reduce the size of an image is trimming every last bit of "white space" around the image. This is called cropping. Most image editors have a cropping selection tool or rectangular selecting tool.

After the scanned image is on screen in your image editor, choose the rectangular selecting tool, then drag the mouse from top left to bottom right corner of the image you want to keep. If you select the wrong area, sometimes you can change the edges of the selection by dragging with a double-arrow, sometimes it is easier to unselect/deselect (control-D on PC or apple/option-D on a mac in many image programs, or click outside the selection with another tool) then re-drag to reselect. Once you have selected the area you want to remain as your image, crop the image. In Photoshop and and in IPhoto Plus it is Edit/Crop. In PaintShop Pro it is Image/Crop. In Graphic Converter it is Edit/Trim Selection. This makes a huge difference.

C. CLEANING UP AND OPTIMIZING THE IMAGE:

After you scan in your image at the higher dpi (144 or 288), adjust the image using your image editing program, making it prettier.

A great feature to try: If you have "adjust levels" you can try to eliminate too much dark or light with that feature. In PhotoShop you drag the triangles on the right and left in to the middle a little at a time, to the "valley" at the edge of the "Mountain" graph. In PaintShop Pro the closest they get is a Histogram Functions feature with two options. Try the two choices (different ones work for different images), and undo if a function you tried doesn't help. IPhoto has a version under Image/Level Adjustment. Graphic Converter has Picture/Levels you can try. PhotoShop has this one down pat and unfortunately nobody else comes close but you can give it a shot. When you have an image that is super dark or very light overall, this feature can sometimes make all the difference.

My favorite feature in making images look good onscreen is the "unsharp mask," feature which sharpens edges (a little goes a long way) by intensifying contrasts in edge areas of the image. Pick the feature and play with the preview in the dialog box. One setting usually has a low number which should stay between 1-4 (has to do with how many pixels wide the sharpening happens). The other number usually can go anywhere from 25-100, which is a sort of contrast scale. If you don't like the effect, you can undo. PhotoShop has Filter/Sharpen/Unsharp Mask, IPhoto Plus has only Image/Sharpen with no preview, PaintShop Pro has Image/Normal Filters/Unsharpen and Graphic Converter has Effect/Sharpen Edges with a scale but no preview.

D. REDUCING THE RESOLUTION BEFORE SAVING IN WEB FORMAT:

I save as I am working, in a .tif, .pict or .psd format (image editors love to crash my computer and I'm unwilling to do the whole thing over). Don't save in a web format until the very last step! Web formats lose information, be it colors or other detail you don't want to lose.

Before you save the image for the web (gif or jpg), you should find a menu in your image editing program which allows you to change the resolution, and reduce to 72 dpi. Some scanners only allow 75/150/300 and if that is your only choice, you'll have to go with 75, but first try to click where the number displays and type a new number in from the keyboard.

In PhotoShop 3 it is called Image/Image Size. In Paint Shop Pro 4, choose Image Resize, and type in a custom size that is the current size divided by the right number. For example, look at the grey "status bar" at the bottom of the screen where it tells you your image is so many pixels or dots wide, by so many tall, by so many colors.(and sometimes an estimate of the size of the image if you saved it). Then take those numbers and divide by 2 if you scanned in at 144, or divide by 4 if you scanned in at 288, etc. Type the new numbers in the custom box. In IPhoto Plus, you choose Edit/Change Resolution; in Graphic Converter 2.4.3 it is Picture/Resolution.

E. DETERMINE THE BEST FORMAT FOR SAVING, .GIF OR .JPG:

Here's the scoop: the P in JPG means "photographic." This format is designed for photos and other images which have thousands of colors. Think of a face and the skintones. These types of images do not compress well in .GIF format and they work well as .JPG.

However, if you have something which has large areas of flat color, such as a logo (or many stamped images), and the image could reasonably be displayed using 256 colors or less, then you should reduce the number of colors and save as a .GIF file. This actually is a better solution for flat color artwork, though many people avoid the format because they scan photos most of the time and have learned this is best for the work they are most familiar with.

If you determine that you have more than 256 colors and it would not look good with fewer, you are ready to save as a .jpg/.jpeg format (skip to step E, Saving). If it will look fine with few colors, read on for hints on reducing colors before saving as a .gif file.

BIG HINT: you can not save a .jpg without losing specific color information. This is because it saves color gradations as a mathematical equation rather than actual color swatches. Always save it as a .tif, .psd or .pict format before you save as .jpg. Every time you save a .jpg file it loses information (this is called a "lossy" format). if you save a white square as .jpg and then close and open it again, save again, close and open and save again, then view it in a browser, the square will no longer be clean white. It will be thousands of whitish dots that overall look white. You can really degrade the quality of the flat-color image on a viewer's browser. You might not notice it in your image-editing program, but it is inherent in the method of saving that you keep losing information.

Gif files, on the other hand, save smaller the more pixels of the same color in a row, so they are ideal for flat-color files such as logos. This is why much of the artwork on this group should be saved as .gif files. If you are doing rainbow inks or subtle pencil-shading, perhaps a .jpg will be best. One way to determine what works best (if you are unsure) is to save from the .tif (or other print format) in both web formats, look at both in your browser, and also note which is actually the smallest file on your disk. Sometimes you will be surprised.

If you choose to save as a .gif file, reduce the number of colors first. In some programs, .gif is not even a save-as option until you reduce the colors. You must choose 256 or fewer colors. Take it slowly. Reduce one step at a time and see how things go. If it looks terrible, undo. I often save as I work in case the undo complains. In IPhoto Plus, you choose Convert, Indexed 256-color, and if you have a limited color print (2 or three colors) you might try Convert/Indexed 16-color after that and see if you can live with it. In PaintShop Pro use Colors/Decrease Color Depth and choose the next smallest number of colors, one step at a time, stopping (and perhaps undoing) when you go too far. In Graphic Converter, it is Picture/Colors/Change to #Colors, one step at a time. I also sometimes choose Picture/Colors/Minimize colors in this program and it works well for certain images. In PhotoShop use Mode/Indexed Color/Other:256 colors and Adaptive Palette with no dithering.

If an image is essentially black/white/grey in nature, saving as greyscale using the same menus can sometimes reduce the size of the image even further, and is worth a try.

After you have reduced the number of colors to 256 or fewer, you can save as a .gif file and it will work fine on the web. The fewer the colors, the smaller the file.

F. SAVE IN WEB FORMAT:

In your graphic image program, choose File/Save As. At the bottom of the dialog box there will be a "save as type" box with a pull-down arrow. Choose the appropriate format based on your choices in step E above. Give it a good name (for the web it is best to have all lowercase letters, ***NO SPACES OR PUNCTUATION IN WEB FILENAMES*** and keep it to eight or fewer letters if possible).

Wasn't that a fun adventure? I hope it was helpful, it has taken me years of groping around in the dark to figure this stuff out. I know more but this is the essence of what this group needs, and I've probably lost a few readers by now anyway! :-)

------

If these issues interest you, my favorite author on this subject is Lynda Weinman. She has tons of info on her website (www.lynda.com) and she has a bunch of great books, the easiest of which to understand is called Preparing Web Graphics. Another guy who knows a lot (but I don't like his
style of teaching quite as well as Lynda's) is David Siegel (http://www.killersites.com) who wrote a book called Creating Killer Websites (a little harder to slog through if you are new at all this, though full of great technical information). Both of these sites have tons of info to guide you through photo formats and color/resolution issues.

 

Happy scanning!

 

© Lynn DT Hershberger 1998
LynnH KazooWoman (Lynn Hershberger)
Hershberger Designs, Lansing, MI USA

http://www.digiserve.com/kazoo/hershberger.html


In addition, Linda says:

Yes, you'll want to check out Lynn's (website address above) art page!

Thanks Lynn!


Other tutorials for scanning and sizing image: http://www.scantips.com/

Scanner Magic: http://crafts.dm.net/convention/990305b.html

Tips and Techniques of Image Scanning for the Desktop Publisher, Multimedia Presentor, and Graphic Artist : http://www.infomedia.net/scan/

Your comments are always welcome:

EMAIL: unity@negia.net