How should I save my images for the web?
When saving images for the web, you must consider the size and quality of the image. The goal is to get the smallest possible file size while retaining the appropriate level of quality.
Using any photo editor available, you should:
- Crop the photo to show only the relevant content
- Resize the photo to fit on a web page
The most globally compatible web pages are no wider than 800 pixels - Save the file as a .jpeg
The JPEG image format is widely accepted as the best option for compressing photographs. For graphics that are created on a computer, GIF tends to be the format of choice.
Most photo editors will give you a choice on the level of compression to use. Quality and file size decrease as the compression level goes up. After you save your file, check it to make sure it is small enough, AND you are satisfied with the quality. The following image is a 130×100 pixel image which is 8 Kilobytes in size.
After all this hard work your image may still contain a lot of unnecessary information that it doesn’t need to look good on the web.
Losslessly Compressing Images
Often when you save images with tools such as Fireworks or Photoshop the resultant files contain extra data, including color data that may even be unused in the image and even things such as meta data. By compressing images without losing the image’s look or visual quality you can save on data that needs to be downloaded.
Yahoo’s smush.it service is incredibly good at doing this job for you. Simply upload the images that you want to ‘smush’ and it will losslessly compress them for you. In order for this to work file must have the extension png, jpg, (not jpeg), or gif.