This tutorial is an overview of creating internet-compatible images. Graphics, illustrations, and photographs - we love them all and below are a few tips on how to create, edit and handle them.

DPI vs Pixels

The mythical 72dpi (dots per inch) has meaning only for the scanned or printed image, it carries little importance for images viewed on-screen. Think in terms of pixels rather than DPI. It is the pixel dimensions that will determine how large the image will be on the screen.

If you are planning to scan images to use on your website, scan them at 300dpi and reduce the image size in your image editor to your preferred dimensions in pixels.

Their final dimensions are dependent on what you aim to achieve, keeping in mind that your image will appear at different sizes on different computers, with various monitors and screen resolutions.

Try to choose a size that does not look overly-large on 800 x 600 but not too small for 1024 x 768 monitor displays. For example, use a width of 350 pixels for landscape or horizontal pictures and a height of 250 pixels for portrait or vertical images.

Screen Resolution

The term "screen resolution" refers to the number of individual pixels that fit within a given space. For example in an 800 x 600 resolution, 800 refers to the number of pixels that the monitor can display horizontally and 640 points to the vertical limit.

Monitor size and optimal screen resolution are interrelated. Screen elements appear smaller as you increase the resolution. Today, the most widely used screen size is 1024 x 768.

All of our styles have been designed for optimum display on 1024 x 768 monitor displays. This impacts on how you've structured the layout of your website and its content.

Some things to keep in mind are:

• The display of key information should appear above the fold* so visitors can see it without scrolling down. Try not to make your pages too long - two to three screens of information is plenty.
• Ensure that it's easy to read the text in various columns.
• Type size should be in keeping with the screen display and remain legible.

* The use of the term fold was traditionally used in reference to newspaper layout - the physical dimensions of a broadsheet newspaper dictate that it is folded. The first page of a newspaper is where the major stories are placed for the best visibility. In web design, the term "fold" refers to the line beyond which a user must scroll to see more contents of a page. It is also referred to as a "scroll-line".

Image File Formats

On the web today, GIF, PNG, and JPEG are the most common and widely supported image file formats. Choosing appropriately, cropping and resizing images is important to keep pages lightweight and quick to load. Below is a guide to explain how each of these file formats works, when to use them and why.

1. The JPEG format is intended for photo-style images only:

• Photographs 
• Movie stills
• Computer game stills, etc.

2. GIF and PNG formats are ideal for compressing graphics that contain flat areas of plain color, as well as text. Examples of this include:

• Logos
• Line art
• comic-strip style illustrations
• Files that require transparency

Use PNG to compress text, line art, comic strip style illustrations, screenshots of applications, etc. As a lossless format, it won't distort or alter the original image and allows fine lines and other details to be reproduced accurately. For typical web use, stick to 8 bit (256 colors).

Today PNG has largely replaced the GIF format. GIF is traditionally used for line art, text or comic-style illustrations where the 256 color limitation is desired. Many feel that the only real value in the format is for animations.

Pixel Pushers

You can use Adobe Photoshop if you prefer a desktop option. (There are a number of alternate image editors available, one of the better-known options is Gimp).

Photoshop

Photoshop's "Save for Web" tool is a simple and easy way to prepare your image files for use on the web. It's an invaluable tool to guide you through the trade-off between file size and image quality.

Open an image and resize it to a small size to use on your website. Click Image > Image Size and enter the new width in the Pixel Dimensions box. Try a width of 150 pixels for thumbnail images and 400 for larger click-through images. Click Ok and then on File > Save for Web or File > Export to open the Save for Web dialog box. Take a second to explore the various tools and settings in the Save for Web window.

The tabs in the top left corner of the window allow you to switch between various views of your file. By clicking these you switch between a view of the original photograph ("Original"), your optimized photo ("Optimized", with the Save for Web settings applied to it), or a comparison of two or four versions of the image ("2-Up" or "4-Up").

To compare the original photograph with the optimized image, click on "2-Up". The left frame will contain your original unedited photograph, and the right frame the optimized image. To alter the compression settings, select the image in the right frame and choose JPEG High from the Preset menu. Experiment with the Quality settings and compare the two images. The lower the quality value the muddier your optimized image will look. Notice the File Size and Loading Speed values beneath each photo - the higher the quality value the larger the file size. The trick is to achieve the best quality image for the smallest file size.

Photoshop's Save for Web tool allows for the compression of GIF, JPEG and PNG files.

Once you are happy with your photograph, click Save. You now have an optimized image, ready to upload onto your website.

Copyright

It is important to remember that all creative work generates new copyright by default, and the absence of a copyright notice does not mean it is in the public domain. In other words, if the content on your website is authored by yourself, it is considered original intellectual information and is automatically copyrighted to the original author in most countries. Nonetheless, it may be wise to display a copyright notice on your website (usually in the footer of the page).

Remember, too, that images and photographs, like written works, are subject to copyright, so be sure to use original or licensed material! Images on the internet need to be licensed directly from the copyright holder. In some instances, fair use guidelines may allow a photograph to be used. Only an explicit statement from the copyright holder can release their rights to the work and make it legally available for use. To be safe, unless it is made clear that the images are released by their respective copyright holders, assume them to be copyrighted and unlicensed. If in doubt, ASK before copying.

Flickr images tend to fall under traditional copyright or Creative Commons license. You're forbidden to use Flickr images marked as copyrighted (or "All rights reserved") for your own purposes unless you get explicit permission from the author. Non-copyrighted images on Flickr come under a different kind of license called Creative Commons. Each image is available under one of six customized licenses made to influence where and how each image can be used.

As per the Yahoo! terms of service, Flickr holds the license to use, distribute, reproduce, modify, adapt, publicly perform and display content for the purposes of providing and promoting the Yahoo! Group. This implies that the Flickr widget, owned by Yahoo! who also controls the copyright of the material, allows you to display Flickr images in this manner.

If using images under the Creative Commons license and assuming you're not using these images for commercial use, it is ideal to extend a basic courtesy by crediting the author(s) and providing a link to their website or profile.