Tutorial
Click on thumbnailed images to enlarge
OBJECTIVE
The purpose for this tutorial is twofold: 1) lower your bandwidth usage and 2) load your images, and thus, your website, faster.
IMAGE FORMATS
The first thing you should know is that there are three native image compression formats supported by most web browsers. These are GIF (pronounced jif as in Jiffy Peanut Butter), JPEG (pronounced Jay-Peg), and PNG (pronounced ping as in ping-pong). All three are compressed, meaning information has been organized inside the file in such a way to minimize the file size.
The difference between JPEG and GIF is the way that they compress the data. JPEG compression is designed to optimize photographs or images with fine gradations of color. GIF compression is designed to optimize images with large continuous areas of color, such as illustrations. The PNG format is similar to GIF and is expected to replace the GIF format. The main benefit of the PNG format over the GIF format is that the PNG format is patent free, unlike the GIF format which is owned by Unisys. Because the GIF format and PNG format are similar and thus interchangable, I will be only comparing JPG and GIF formats in this tutorial.
CHOOSING THE IMAGE FORMAT
JPEG is a lossy compression, meaning information is lost the more you compress your images. However color fidelity is preserved. In comparison, GIF is a lossless compression, but color fidelity is not preserved, with a limit on the total number of colors to 256 or less. The main trade off using JPEG compression is image quality, while with GIF it is color fidelity.
Now, we must ask oursevles, is there a correct format to save each image? The answer is no. However, it is important to know which format will maximize image compression (and thus file-size) while maintaining comparable image quality.
A basic rule to go by - if the image is a photograph, or with lots of colors and gradients, use JPEG. If the image has solid colors, or few colors, use GIF.
OPTIMIZATION USING PHOTOSHOP
Knowing which format will optimally compress your images while retaining comparable quality means nothing IF you do not take advantage of the compression level. And judging from the bloated images I see in CB, this is where a lot of people fall short.
Whenever you're saving images from Photoshop to publish to the web, you should ALWAYS use the "Save for Web" function, as shown below:
A window will popup. In here, you can select the compression method and level on the upper right corner. If you are not sure which method to use, you can view the filesize of the output file using the selected method on the lower right, as highlighted below:
Remember, the goal for compressing images is to reduce filesize while maintaining quality images! Below are examples of how drastically filesize can shift regardless of image quality, so it is important to realize that taking a brief moment to optimize images will save a lot on your bandwidth and website loading speed.
JPEG
76kB: Default using the "save" function
16kB: JPEG High
The purpose for this tutorial is twofold: 1) lower your bandwidth usage and 2) load your images, and thus, your website, faster.
IMAGE FORMATS
The first thing you should know is that there are three native image compression formats supported by most web browsers. These are GIF (pronounced jif as in Jiffy Peanut Butter), JPEG (pronounced Jay-Peg), and PNG (pronounced ping as in ping-pong). All three are compressed, meaning information has been organized inside the file in such a way to minimize the file size.
The difference between JPEG and GIF is the way that they compress the data. JPEG compression is designed to optimize photographs or images with fine gradations of color. GIF compression is designed to optimize images with large continuous areas of color, such as illustrations. The PNG format is similar to GIF and is expected to replace the GIF format. The main benefit of the PNG format over the GIF format is that the PNG format is patent free, unlike the GIF format which is owned by Unisys. Because the GIF format and PNG format are similar and thus interchangable, I will be only comparing JPG and GIF formats in this tutorial.
CHOOSING THE IMAGE FORMAT
JPEG is a lossy compression, meaning information is lost the more you compress your images. However color fidelity is preserved. In comparison, GIF is a lossless compression, but color fidelity is not preserved, with a limit on the total number of colors to 256 or less. The main trade off using JPEG compression is image quality, while with GIF it is color fidelity.
Now, we must ask oursevles, is there a correct format to save each image? The answer is no. However, it is important to know which format will maximize image compression (and thus file-size) while maintaining comparable image quality.
A basic rule to go by - if the image is a photograph, or with lots of colors and gradients, use JPEG. If the image has solid colors, or few colors, use GIF.
OPTIMIZATION USING PHOTOSHOP
Knowing which format will optimally compress your images while retaining comparable quality means nothing IF you do not take advantage of the compression level. And judging from the bloated images I see in CB, this is where a lot of people fall short.
Whenever you're saving images from Photoshop to publish to the web, you should ALWAYS use the "Save for Web" function, as shown below:
A window will popup. In here, you can select the compression method and level on the upper right corner. If you are not sure which method to use, you can view the filesize of the output file using the selected method on the lower right, as highlighted below:
Remember, the goal for compressing images is to reduce filesize while maintaining quality images! Below are examples of how drastically filesize can shift regardless of image quality, so it is important to realize that taking a brief moment to optimize images will save a lot on your bandwidth and website loading speed.
JPEG
76kB: Default using the "save" function
16kB: JPEG High
Tutorial Comments
No comments yet. Be the first one to comment!
