What You Ought to Know About Web Images
While print projects measure the size of images and other layout elements in inches, the web uses pixels. The only resolution appropriate for the web is 72 ppi because that's the standard for computer monitors. Monitors don't really care about physical dimensions; they just read how many pixels there are in an image and spread the image across the screen accordingly. Imagine that a photo is a tiny grid of colored dots. Image resolution is the number of colored dots across or down each inch of the photo. It's referred to as pixels per inch (ppi) or sometimes dots per inch (dpi). Almost any image-editing software will have an option to set the resolution as well as the physical width and height of an image. Is it possible to put up a higher-resolution photo and force down the physical dimensions to the size needed -- the way an image can be inserted into a Word document and resized? Yes, but don't, for two reasons:
When using an image for both print and web projects, keep in mind that Microsoft documents generally use a resolution of 96 and professional-quality print projects require a resolution of at least 300. Always start with the larger file size and save it as a master; you can create a copy at a lower resolution to make it web-compatible, but if you start with a web-resolution photo and increase it to print resolution, the results are usually pretty bad.
Once the image resolution is set to 72 dpi, think about the physical dimensions of the images and some basic computer screen math. There is no universal size for computer screens, though screens have continued to get larger over the past decade. Screen size is referred to as screen resolution and is expressed as a pair of numbers such as 1024x768. Unlike image resolution, screen resolution doesn't indicate how many pixels are displayed per inch. This is the total screen space available, measured in pixels as width by height. Web pages, and the images on them, shouldn't be wider than the most commonly-used screen width. Remember that browser scrollbars and other elements will take up space, too. The following chart converts inches to pixels, assuming the image resolution has been adjusted for web images. The larger the physical dimensions of an image, the larger its file size will be.
There is no one recommended size for an image, but a typical photograph can serve its purpose effectively at a maximum width or height of no more than 250 to 300 pixels. For larger photos, the two main things to consider are download time and whether the image will fit on a monitor. There is a disadvantage to an image that is sized down too much. If the dimensions get too small, the visitor to the site cannot tell exactly what it is, and the image no longer serves its purpose.
File Size, Optimization and Download Time
Images are usually much larger files than HTML pages, and they are among the first things to be addressed if a web page takes a long time to download. A general rule of thumb is that if the total file size of all images on a page combined exceeds 100 KB, the page is in danger of becoming a slow download. Working on an image to keep file sizes down is known as optimizing the image. There are a number of things that may decrease file sizes, from cropping out unwanted parts of an image to using special web-export features in image-editing software such as Photoshop. Another way to encourage faster downloads is to add image height and width attributes to each HTML image tag on a web page. This creates a placeholder for the image and allows other elements of the page to continue downloading without waiting for the pictures. Always try to test web pages, whether they have images or not, by accessing them using a dial-up Internet connection.
Web browsers currently support three types of image files: JPEG, GIF and PNG. Each has its strengths and weaknesses and is best used for certain types of images. Here's a brief look at each:
One of the disadvantages of the JPEG file format is that if a JPEG image is saved repeatedly, its quality will begin to deteriorate. This is because the JPEG format is known as "lossy." A lossy format removes some of the image information each time it is saved; this is how it helps to keep the file size down. Multiple saves will cause a JPEG to lose so much information that it is damaged beyond repair. To avoid this problem, keep a master version of the image in a "lossless" format such as TIFF or Photoshop's PSD format. It's possible to edit and save as much as needed in these formats without damaging the image. Then, as the final step, generate a copy in a JPEG format to use on the web.
Professionals work with different color modes regularly, but most people aren't aware of how modes affect an image. There are four main color modes – that is, ways color information is stored in a file and reproduced by a monitor or printer:
Gamma is a property of your computer rather than an image, but it has a major impact on how your images are viewed. Gamma is associated with the brightness of your screen. The standard gamma setting for a PC is 2.2, and on a Mac it is 1.8, which is much brighter even though it is a lower number. A designer working on an unadjusted Mac screen may look at the design on a PC and find the images are way too dark; a designer who created images on a PC may find that the colors wash out on a Mac. The images below demonstrate how an image adjusted to look its best on a Mac will be viewed on a PC screen and what one adjusted for a PC will look like on a Mac. There is very little that average users can do to adjust image brightness to suit a large audience. Macs have built-in settings so the brightness and colors can be calibrated, but PCs do not. PC users who have Adobe Photoshop installed can use Adobe's calibration controls to adjust their monitors. Photoshop also contains menu items that allow users to view images as they look on a PC or a Mac. If possible, check web images on several different types of screens. In general an uncalibrated Mac will provide the brightest viewing environment and early PC flat-screen monitors will provide the darkest.
The <IMG Tag>
The HTML tag that puts an image on a page does more than just connect the image to a page. It can be used to set height and width, align an image to the left or right of a page, create a border and assist people with text-only access to know what the image is about. Becoming familiar with the various attributes of an HTML image tag will allow you to better control the presentation of the image.
Putting the attributes all together with this image, the tag looks like: <img src="images/oit/knowledge/attributes.jpg" border="0" alt="Example image for HTML tags" align="right" height="300" width="172" hspace="1" vspace="1"> Because the text ran out before it finished wrapping around the image, another tag, <br clear="right">, was added afterward to clear the rest of the text wrap so that a new line could begin. The tag <br clear="left"> can be used when an image is aligned to the left.