Resizing Images for Your Website
Nov
19
Written by:
11/19/2009 2:01 PM
Follow these quick tips for using images on your church website and you'll have a site that loads quickly and looks great. First, there are a few things you need to know.
Image Dimensions: Digital images are composed of a large number of individual dots called pixels. Every digital image can be measured in terms of pixel width and height. When you look at the information or properties of an image on your computer and you see something like this (Dimensions 3600 x 2400) you are looking at the pixel dimensions of the image. In this case, the image is 3600 pixels wide and 2400 pixels high.
Image Resolution: The resolution of an image is measured in dots per inch (dpi) for print images or pixels per inch (ppi) for images viewed on a computer screen. While not technically the same, the terms dpi and ppi are often used interchangeably. The most common resolution that you will find for images on the web will be 72ppi. This is due to the simple fact that this is the best resolution that can display on the vast majority of computer screens.
As an example, the images below have the same dimensions (200 x 148) but different resolutions 10ppi on the left, 72ppi in the middle and 300ppi on the right.
Why This Matters: When you take a picture with a digital camera or get a high quality print graphic from a designer, these images may have very large dimensions (let’s say 3600 x 2400) and a very high resolution (600dpi). An image with these specs could mean a file size as large as 6MB or more. If you simply take this image and drop it on your website, you will notice that the page will load extremely slowly even on the fastest connection.
On the other hand, if you take this same image and resize by reducing the resolution to 72ppi and the dimensions to no larger than the largest occurrence of the picture on your website, you can reduce the file size down to just a few kb. This means that your site will load fast and you will keep your people happy.
Let’s say that you decide that you want an image to stretch about two thirds of the way across your site. Since a typical website is between 800 and 1100 pixels wide so you will want to reduce the dimensions of your image so that the width is between about 550px and 750px.
How To Pull This Off: If you have access to an image-editing tool like Photoshop, Aperture, or Fireworks, then resizing your images will be a snap. There are simply features in these tools that will allow you to set the dimensions and the resolution. These tools will also have a “Save for Web” feature that will save a copy of an image with the resuoltion reduced to 72dpi. If you don’t have access to an image-editing tool like these, there are some free ways to resize your images. You can check out www.photoshop.com and www.shrinkpictures.com for free online tools that will help you resize your images. You can also use the Export feature with the Medium Quality preset on iPhoto.