Want to add that oddly flattering passport photo to your Community profile?

Confused about why your web page takes 3 hours to download?

Well, read on!

Large image files are the biggest offenders when it comes to slow loading web pages. Luckily it’s easy to cut down the file size of your photos while keeping them looking good. Photoshop or Fireworks are just two graphics software packages that can make it easy.

Off with the pixels
Make your photos 72dpi. Digital images are made up of lots of little dots called pixels. Image quality is described in “dots per inch” (dpi). This refers to the number of pixels that make up each square inch of image. The higher the dpi, the better the quality of the photo. A photo that is going to be printed needs plenty of detail and therefore needs to be created at a high dpi (300dpi or more). A photo destined for the screen however only needs to be 72dpi – any higher than this is a waste of file size and download time. Whether the photo is 300dpi or 72dpi, it will look basically the same on a computer monitor.

Other dimensions
Make your photo the same size that you intend it to be displayed on the web. Images on the web are measured by pixels, as mentioned above, and it’s a good idea to learn to “think” in these measurements when creating images for the web.

For instance if you have a photo that is 600 pixels wide and 400 pixels high (which will take up most of the screen!) but you only want it to be 150 pixels X 100 pixels on your web page (approximately the size of a large box of matches), do not just shrink the photo when you put it in Frontpage or Dreamweaver - this won’t shrink the file size and the photo will take just as long to download. Make your web page more efficient by saving a copy of the photo at 150 pixels X 100 pixels in whatever graphics software you are using. (Information on how to do this using Macromedia Fireworks and Photoshop is provided at the end of this document).

Tips

• the size at which an image will display will vary depending on the end user’s screen resolution
  
• increasing the dimensions of a photo can lead to a loss of quality

File format
In general the photos you use online should be JPEGs. This image compression format was created specifically for photographs on the web. It creates small files while maintaining image quality. (Having said that, “blocky” or line-based images such as logos tend to work better as GIFs).

Digital cameras
Although digital cameras can take print quality photos it is possible to change the settings to 72dpi. This has the advantage of using less memory so you can take more photos!

However, if you’re unsure what you’ll end up doing with the photos you’re taking, play it safe and set the camera to a high dpi. You can always compress the photos later if you decide to put them on the web.

In a nutshell
Photos for the web should be:

• 72dpi
  
• set at the size at which you wish them to display
  
• saved in JPEG file format

STEP-BY-STEP INSTRUCTIONS
Here’s how to use Fireworks and Photoshop to keep your photos looking good while minimising file size:

Using Macromedia Fireworks

• open the image file
  
• select “modify” from the menu bar and choose “image size”
  
• make sure “constrain proportions” is selected
  
• change the width and/or height as appropriate
  
• click “OK”
  
• go to “file” and select “export preview”
  
• make sure the format selected is “JPEG”
  
• click on the arrow next to the word “Quality” and use the slide to change the setting.  (Notice that the file size changes as you adjust the quality). The file size is displayed at the top left.
  
• when you are happy with the file size and image quality click “export”
  
• name and save your file

Using Adobe Photoshop

• open the image file
  
• go to “image” on the menu bar and select “image size”
  
• make sure “constrain proportions” is selected
  
• change the width and/or height as appropriate
  
• click “OK”
  
• go to “file” and select “save for web”
  
• make sure “JPEG” is selected
  
• click on the arrow next to “Quality” and use the slide to adjust. (Notice that the file size changes as you adjust the quality). The file size is displayed bottom left.
  
• when you are happy with the file size and the image quality click “save”
  
• name and save your file