June 24, 2011 by Ivan Kristianto
Optimize Image Size With Photoshop
Images have important role for web design, but in the other hand unoptimized images could be a nightmare for your bandwidth. We need to optimize image size for our web design. Please bear in mind that, your visitors love fast loading web page rather than fancy but take a long time just to see your home page. There are a lot of tools to optimize image size, but only some of them are good in keeping your image quality. We are not just reduce the image size, we need to optimize the image quality as well.
Image File Format
Before you begin to optimize image size, you need to know some basic of Image file format and compression. These are the most commonly image file format used for web page:
1. JPEG (Joint Photographic Experts Group)
JPEG is widely and commonly used image compression in digital photography and web page. JPEG compression is (in most cases) lossy compression. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality. So far this compression is the best to optimize image size.
2. PNG (Portable Network Graphics)
PNG is a bitmapped image format and video codec that employs lossless data compression. PNG allow image transparency. Which is often use to overlay the background image. PNG image size is slightly larger than JPEG image size.
3. GIF (Graphics Interchange Format)
GIF is lossless compression limited to an 8-bit palette, or 256 colors, suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images. GIF supports animation and is still widely used to provide image animation effects. GIF image size is the smallest among other image format, but the color only limited to 256 colors.
I’m using both JPEG and PNG format in all my websites. If i need a good quality image for example repeated background images, small images, transparent images for overlay, CSS sprite images, i choose PNG. But if i need high dimension image i choose JPEG.
After you know which type is best for you, now you need to find what is your best image dimension. Image dimension unit for web page is pixels (px). The image below show the commonly use display resolutions:
Using a very high image dimension such as larger 2000px is too big for a web page as it have larger image size and waste of bandwidth. So wisely know your image dimension is important and highly recommended.
Optimize Image Size
There are a lot of tools to reduce image size online, but i found that Adobe Photoshop is easy to use and can do it all image processing. And Photoshop can reduce a lot of image size but keeping the image quality. See the screencast below to optimize your image for web page:
That’s it. If you have any feedback or better idea to optimize image size, feel free to use the comment box below. Thanks.