Creation of graphics for a website is vastly dissimilar to creating graphics for the purpose of printing. This is because when a graphic is created and sent for printing, all the printed copies will be identical, whereas, when a graphic is created for a website, all the servers that will view the web page will view it differently. This is due to the difference in hardware each one uses. Not all hardware is configured using the same settings.

In a nutshell, the settings that have been used for creating a graphic that is to be printed, cannot and will not, work for creating a graphic for a web page.

Height and Width

Height and width are the most important dimensional attributes to be kept in mind during web page designing. Figure these out first!

Resolution

The second most important – resolution is a bit complicated due to the fact that both monitors and graphic files include resolution settings. This however is more crucial for printing than for web page designing.

Unit of Size (Pixels)

Images in a computer are built up of numerous individual dots which are known as pixels. A pixel can be compared to a solo square on a graph paper.

Monitors of a computer also display in terms of pixels. The images that are visible on the screen are built up of numerous columns and rows of pixels.

While creating graphics for a web page, the measurements of the images should always be set in pixels.

Unit of Resolution (Pixels-per-inch)

The resolution of a graphic is mostly measured in DPI or Dots per Inch or, at times in PPI or Pixels per Inch. These measurements will give you an idea of the number of pixels that will fit into 1 inch squares.

Use of Resolution

In case of print design, the graphics are usually measured in inches or centimetres and dots per inch or centimetre. This combination of the resolution and the size of the image decide the printed image’s quality.

While the DPI (Dots per Inch) is an important factor in case of print, it has practically no use in web page creation. What is critical on the web is the definite size of the file in pixels, which is the total number of pixels an image contains.

Images, when displayed on the screen are all measured in pixels. Here the resolution of the image determines only its size. Owing to the fact that graphic files are built up of pixels and monitors display in terms of pixels, each and every pixel of a graphic file is displayed on the monitor as one single pixel.

For example, a 2 inch graphic at 72 dots per image as well as a 1 inch graphic image at 144 dots per image will look identical on a monitor due to the fact that both of them add up to 144 pixels across the image.

Photoshop File Size

There are many web designers who, even today, design for the nominal 640×480 resolution, so that users who have the least upgraded monitors can also view the pages of a website with ease. Statistics however state that an average computer runs usually at a resolution of 600×800. Thus, if we can design web pages which easily fit into the resolution offered by screens of this size, it can be safely assured that most of the users visiting the website will be capable of viewing all of the content without much trouble or scrolling.

The pages might appear larger or smaller depending on the user’s screen size, but they will certainly fit very well into the browser windows.

You may also like: Designing a Pop-Up Window – Maximizing Effectiveness