Image Capture
File Size
Master Images
Thumbnails
File Names
Images: Adding Text
Image Editors
Graphic Formats for the Web
Image Resolution on the Web
Web Colors
Image Size
File Size
Tips for Optimizing Images on the Web
Introduction
This module has been designed to provide a general overview of digital imaging, its application to the World Wide Web, and its application in Digital Preservation Projects. While the information provided here is by no means exhaustive, we have tried to provide a broad base of knowledge for those who are just beginning to build their expertise and are now experimenting with imaging technologies such as scanners, digital cameras, and image editors. During this course you will learn how to make a basic banner or logo in Photoshop, and also how to format and optimize photographic images for the web. These images can be inserted into the basic webpage you've created. As your expertise grows you may consider putting together a Virtual Exhibit displaying some of your most interesting artifacts for a virtual visitor.
As visual images become increasingly digitized, we shift from the notion of "taking pictures" to "image capture." Most of us are probably more familiar with using a film-based camera to take our pictures. When you "take" a picture with a film-based photograph you capture the object in front of the lens by recording the visible light reflecting from that object and its environment, and the film exposures in the camera is then developed in a darkroom. A digital camera or scanner, on the other hand, captures the image via a light sensitive sensor that converts that information into a digitally coded image-file that you can view on a monitor and print out if you wish. When you look closely you will see that the digital image above is composed of pixels, tiny little dots that are arranged into columns and rows. Each pixel represents a minute section of the image, whether a shade of gray or a certain color.
For most professionals, image capture refers directly to the process of scanning an object with a flatbed or drum-scanner. Nevertheless, if you plan to construct an image database or collection, you will find that making decisions about the type of image capture-technology you wish to use will be perhaps the most time-consuming stage of the project. The sections on scanning address the different levels of image-capture available, and introduce the central issues of the decision-making process.
The first thing you need to realize if you are considering building an image collection is that image files are, in technical terms, space hogs. If you are going to build an image collection, you are going to need lots of disk space. You'll definitely need to familiarize yourself with the issues surrounding file size, scanning and formatting. There is simply no way around this. If you have a computer that is more than three years old it will be next to impossible for you to create an image database. In addition, if you are going to use your allotted space on the university or institutional server, be prepared to negotiate for more space. Having a clear rationale for your project should help with this.
By Master Image we are referring to your digital "originals." In other words, you will create a limited access database that contains your large, uncompressed files. These files will not be what you use for the web, for this you will create surrogate images or access files. Making provisions for the space necessary to build an image collection frees you up to go about the next step more professionally. JPEGs will work great as access files viewed on the web, but since the format's compression method is lossy, they are not well suited as Master Images. Every time you decompress and recompress them they lose information--obviously a digital preservationist's nightmare! A poor editing decision can ruin them forever, and if you save them at a too low quality-level you can never retrieve the discarded information. So it is necessary for you to keep your Master Image saved in a lossless format, which you can then copy, manipulate, and save as a smaller-size JPEG or GIF within an Image Editor like Adobe Photoshop. The TIFF format has traditionally been used for this purpose, and still seems to be the main choice for Digital Preservationists in the U.S.A., but the PNG format is also touted as a good alternative to replace TIFFs. GIFs are already lossless, and as such do not really need special Master Images, but it is never a bad idea to keep backups in different locations. Given that PNGs actually compress better than GIFs, and have both indexed-color and truecolor support, using this format for all your master images and backups may be a very intelligent way to keep things simple.
You may deem every single image in your collection a prize, but your audience may not always agree. A splendid way to save a visitor to your site some valuable time is to provide a jumping-page of minimized versions of your images for the visitor to decide for himself or herself what may be worth waiting for. These images should not be so small that they cannot be made out, but should also be no larger than what is necessary to understand what the image contains. Dimensions between 50x35 and 100x70 will usually suffice, depending on the complexity of the image. Saved as JPEGs, you can also reduce the image quality significantly for your thumbnails, thus reducing the download time for the thumbnail page. These images are only meant as hints to what the full-size image contains anyway, and do not need to be of high quality. Usually a thumbnail image can easily be made less than 10 kb, and some work quite well as small as 3 or even 2 kb. Furthermore, if your collection is large, consider categorizing your images and creating more than one thumbnail page. You might also want to inform the user how large the full-size file is, in both pixels and kilobytes. A simple set of numbers next to the thumbnail (ex. 500x375; 95 kb) tells the user what to expect. (Click here for an example.)
While your collection is still small, file names made up on-the-fly may be just fine, and you may have no trouble remembering what name you assigned to a certain image file. But the larger your collection grows, and the longer it becomes between each time you see the individual images, the more difficult it will be to associate file names with particular images, no matter how much sense the name made at the time, and the more difficult it will become to keep your collection organized. If you know your collection is going to become large, it is a very good idea to decide on a file-naming indices based on your institutional indexing and cataloguing systems. This may seem like an obvious point to make to those in the Library, Museum and Archival professions, but when just one person is in charge of the image database management, it is very easy to find yourself stuck with an idiosyncratic indexing system that does not logically interface with the dominant system. Clearly, this will be very relevant in the management of very large collections.
Many times you will want to add comments to an image. There are several ways of doing this. The most common way is simply to put the image on a web page (insert the image file into an HTML file), and write on the page as you would on any other page. This is unproblematic as long as the image stays on the page, but as you know by now, images can be saved from a web page without including the text around them (by clicking on the right mouse button and choosing"Save Image As"). In fact, this is the only way you can save an image. Choosing "Save As" from the file menu only gets you the HTML file, which uses source tags to incorporate separate image files. But if you have already collected images from the Web yourself, you know how quickly you can forget where the image came from, and even details about what the image is or its context. With most images you can avoid this, however. Both JPEGs and PNGs give you the option to save text right along with the image, embedded in the image file itself. With the right software, whoever downloads your image can then access this text and retain the pertinent information about it, even if they remember nothing about where they got it from in the first place. Which, believe us, will happen. If you are going to embed text, however, let your audience know about it. Obviously, this raises the more sticky issue of copyright. While we do not cover this in extensive detail here, it's worth pointing out that new technologies are emerging where a images can be "traced" and copyrighted with a type of "watermark" or specific code embedded into the file-code that is not visible in the image itself.
Every image or graphic you see on the web, whether a photograph or fancy logo, has (probably) been adjusted in some way by an Image Editor. Editors allow you not only to manipulate, enhance and create images, they also allow you to optimize that image for download time--this way your user isn't sitting in front of the computer screen waiting for a huge image file to download. In fields as disparate as movie special effects, forensics and medical imaging, the industry standard for the creation and manipulation of graphics in both web design and graphic design is Adobe Photoshop.
If you envision working with a lot with images, for instance in creating an image database or multiple graphics for the web, then we definitely recommend you invest in a program as versatile as Photoshop. However, if you don't have the resources (or the need) to invest in such an expensive editing program, there are plenty of other image editing programs to choose from. If you don't have the money to buy Photoshop, there are many other image editing programs on the market. Corel Draw comes in a close second to Photoshop, but at about the same price most people choose Photoshop. New image creation and editing applications have been made specifically for web graphics. The programs not only allow for the creation and editing of graphics, but also allow graphics to be optimized for download time, automatically cut and inserted into html tables, made into mouse-overs, or image-mapped from right inside the program (previously this took multiple programs and a lot of programming skill). Adobe ImageReady and Macromedia Fireworks are two applications built specifically for the creation and preparation of graphics for the web. ImageReady is now being packaged for free with Adobe Photoshop and the two together makes on of the finest suites of tools for graphics work for the web.
In addition to Photoshop, Mr Sids and DjVu created by Lizardtech.com are two premium programs that are likely to become indispensable technology tools for professionals working in Museums, Archives and Libraries. Instead of producing a tutorial for Photoshop (most are several hundred pages), here are some sites on the web to help you get started creating images.
The best way to learn Photoshop is through use - trial and error.
Photoshop Tutorials:
GRAPHIC FORMATS FOR THE WORLD WIDE WEB OR LIMITED-ACCESS MASTER FILES
While you can save image files in many different formats, there are two main types of image files that can be read by the web: GIFs or JPEGs. The differences between the two files are color use, file-size, and download time. In short, we use GIFs for simple, fast down-loading graphics, and we use JPEGS for images that have a higher resolution, like photographs and complex images. However, as we discuss below, you will also become familiar with the lossless formats such as PNG and TIFF, which cannot be used for the web but are used instead for the storage of Master Files on a personal computer hard-drive.
GIF (Graphic Interchange Format)
One of the most effective ways of reducing the size (and thus the download time)
of an image file is to reduce the number of colors required to display the image.
Using only the 256 colors of the web, GIFs are the best format for saving images
like banners and buttons. Unlike photographs, these types of graphics don't
require a great spectrum of colors or shades of gray in order to look sharp.
In addition, to further improve on download speed, when you optimize a graphic
created for the web it's possible to strip out even more of the colors in the
palette used and still not significantly affect the integrity of your image
(Click here for a look at the Matrix Logo as a GIF
and as a JPEG). Other advantages to GIFs are that they can be progressively
displayed and they support transparency. GIFs are great because they don't take
up lots of file space, and are a lossless format. However, GIFs are not well
suited for presenting photography. Even when you use the full 256 colors of
the web, the quality of a photograph is significantly diminished when saved
as a GIF. (Click here to see what we mean). If your
image is a photograph, JPEG is almost always the best solution.
JPEG (Joint Photographic Expert Group)
JPEGs handle smooth transitions and subtle variations in brightness and color
very well; unlike GIFs they don't limit the number of colors an image can contain.
For instance, if your original image, say of a Hindu Wedding in Michigan, contains
2,000,002 colors, 2000,002 colors is what the JPEG will allow you to use (Click
here to see the Wedding Picture). The reason why JPEGs can do all this,
however, is because it is a lossy format. This quite literally means that in
order to decrease file size, data is thrown out when the image is saved: the
image loses information that you can never retrieve. However, before you swear
off using JPEGs forever, we should point out that the amount of data discarded
is up to you. For instance, when you scan a photograph, it is normally possible
to import the image file straight into an image editor like Photoshop. Here
you can save the image in a variety of ways, but it will be important for you
to save it initially as a Photoshop Document or PNG, which is lossless. This
will be your "original" or Master Image File that you should store in a non-networked
database. In order for your image to be seen on the web, however, you will then
make another version of the image as a JPEG. Now you can reduce the file-size
to decrease download time, and visually adjust the image for your page. In Photoshop
you'll be asked at what level you wish to save your JPEG at-the higher the level,
the higher the resolution and bit-depth, but that also means the longer the
download time. It's often possible, though, to save your image at lower levels
and not see a significant deterioration in visual quality. (Click
here to see examples of a JPEG saved at different levels). Be aware, however,
that when you are working with your images, you lose information every time
you save it as a JPEG--even if you save at the highest possible level. Though
the data lost may not have been visible to the human eye, as you continue to
work with the image and save it as a JPEG a little more data will be lost as
the Editor rewrites and recompresses the file. Obviously, this will be a crucial
issue as you embark on Digital Preservation projects, and this is why it is
crucial that you save an original version of the image in lossless format, either
as a Photoshop Document, or as a TIFF. These formats cannot be used for web-design,
but are invaluable when putting together an internal image database that has
limited access. But don't worry--simply opening or closing an image in an editor
will not affect it. You must save the image as a JPEG for the loss to occur.
PNG (Portable Network Graphics)
This file format is less well-known, probably because the advent of Image Editors
has led to GIF and JPEG becoming the more standardized format among users and
designers. It has been heralded for several years now as the "format for the
future," but the major shift to PNG has yet to be seen. Designed to improve
upon and even replace GIF and JPEG, PNG is a lossless format that gives you
the option to either, like GIFs, store images as pallette-based (only using
the 216 colors of the web) or like JPEGs, as truecolor images with extremely
high resolution. But remember, the more color an image has the longer it will
take to download, and so PNGs are not necessarily a better alternative than
JPEG for photos on the web, especially when much of the color that would be
included cannot be seen with the naked eye. Nevertheless, lossless PNGs may
be a viable format for "original" images within an internal, non-networked database
TIFF (Tagged Image File Format)
If you are considering constructing a digital image database or some kind of
digital preservation project, then you will probably become very familiar with
the lossless TIFF format. While not viewable via the web, the TIFF is a widely
supported format for storing bit-mapped images on personal computer hard-drives.
It is also the common format for exchanging images between application programs,
including those sued for scanning images.
The resolution of an image for the web is the measurement of how many pixels there are in a given area (in both height and width) normally per inch. This will be referred to in wither pixels per inch (ppi) or more commonly dots per inch (dpi). Resolution defines the clarity and detail of either the image file or the monitor it's displayed on. If you are familiar with working with print technologies or digital preservation, then this may sound like a very low resolution, and although many scanners and high-range digital cameras are capable of producing much higher-resolution images (the national standard for scanning digital images for preservation is now 600dpi) virtually all graphics for the web are done at a resolution of 72 pixels per inch. This will be important to consider if the only reason you are capturing an image is for an online exhibit. You may have an image like a detailed photograph that has been captured at a much higher resolution, but can only be displayed on the web at 72ppi and so you need not save it in any higher a resolution. Any higher resolution cannot be seen by the naked eye and would needlessly increase the Image File Size and download time of your image. Nevertheless, as we discuss in Creating an Image Collection and Scanning, Resolution and Color, if you are creating and managing images for purposes of preservation or creating a database then this issue of resolution will be more complex.
There are two variables that influence how the colors of your images are displayed on the web-browser: safe colors and monitor settings. Web browsers only support 216 colors. Any colors outside that range will be shifted slightly to fall within the 216 color spectrum.
The other factor influencing color is the monitor setting of the person viewing your page. Monitor settings can be set to display anywhere from 256 to millions of colors, depending on the bit-depth capacity of your computer. Because monitor settings can vary from monitor to monitor-even a shade of white can look different on a different monitor. If you create a graphic that uses say, 1,500 colors, it will look fine on a monitor set to a high bit depth (meaning a monitor that can show many more bits of information than an older model). But--if a user has the monitor set to 256 colors, the computer will again shift colors so they fall within the allotted 256. In addition, your monitor settings may define a particular color, say "hunter green" in one way perfect to you, but on someone else's computer that particualr shade may look positively fluorescent. This is one reason why it's best to keep to the 216 colors of the web. As you work with graphics, it will be very important for you to anticipate as best as possible the type of monitors your users will have, and not overestimate their capacity to show graphics with thousands of colors and tonal variations.
If you are using Photoshop, you can go to the Photoshop site and download the Mac or PC 216 CLUT.
To use it, unbinhex and unstuff (Mac) it or unzip it (PC) and save it to a
convenient place. You'll see a file called 216clut. To load this CLUT as a Photoshop
color palette, click on the arrow that's in the upper right hand corner of the
color swatch window. Drag down to "Load Swatches", and select your file from
the saved location. The 216 clut will now be the default palette for the selection
of color.
This is the actual visual size of the image on your screen, and should not to be confused with File Size, which refers to how much memory the file takes up in your computer). As you begin learning to scan images it is sometimes a surprise when that image does not appear perfectly to scale, and may appear in you graphics editor much bigger than you intended it too. This happens when the image scanned is not the size we intend for it to appear on our page. For instance if you scan the front of a Magazine or a large poster, the size and scale of that cover will likely not "fit" with the size of your computer screen and you'll lose a lot of the image as it "goes over the edges." In this case, it will be necessary to readjust the size of the image, which basically means you scale it down in either in the scanner or in an Image Editor to fit a normal sized computer screen. When you begin editing an image in Photoshop or Fireworks, you'll be asked to give the image size (or canvas size) in width and breadth. This size is typically measured in pixels, and a general rule of thumb when working with graphics in Photoshop would be a width of 580 pixels and a height of 430 pixels. However, when working with scanned images, you may be scaling the image down or enlarging it even further. Another good rule of thumb is that it is normally possible to enlarge the image size by double without significantly affecting the sharpness. However, how sharp the image is will depend on the resolution at which it was originally captured (in the case of a scanned image) or created (in the case of a simple web-graphics like buttons and banners you've made yourself).
File size refers to the amount of digital information your image contains. This is sometimes referred to as Image Size, but we will use that term to refer to the visual size of the image on your screen. As you probably know from experience, nothing turns a user off more than a page filled with large image files that take forever to download, and that user will more than likely skip the page and go to another site.
Factors that affect file size include range of color a particular image contains--the more color and tonal variation or bit-depth your graphics contain, the longer they'll take to download. Most monitors will only be able to show the 256 colors of the web, and this is important to remember as you compress image files for online display. In addition, the standard resolution for the web is 72dpi. So if you set your resolution at any higher than 100dpi then you will again needlessly increase the file size. In other words, lots of detailed color and a high resolution will simply not translate for many of your online users. With this in mind, make sure you carefully consider download time when selecting the resolution, file-size, and number of graphics on any page. You'll need to become more than familiar with the "Image Size" and "Save for the Web" features of Photoshop, as these will the places where you can determine resolution and compress the amount of colors in your graphic, seeing whether these adjustments make any real difference to visual quality.
Tips for Optimizing Graphic File Size for the Web
Here are some tips for minimizing and optimizing graphic file size for the web