To improve your website performance, you should optimize images for the web. This will result in improved page load times for your website visitors and bandwidth savings for you.
Images on the web should normally be JPEG images. In some circumstances it is appropriate to use PNG images. If transparency is needed, PNG is your only option. If you have an image with lots of colors, JPEG is your best option. In any case, you should optimize your PNG images if you choose to use them on your website.
There are 2 primary ways to optimize images for the web:
- Lossy – reduce the number of colors for the PNG image. For lossy optimization I use ImageAlpha for Mac OS X.
- Lossless – remove unneeded information from the PNG image, For lossless optimization I use ImageOptim for Mac OS X.
The image below is the original PNG image.
The image below was optimized using ImageOptim.
The images below were optimized with 256 colors using ImageAlpha.
The image below was further optimized with ImageOptim.
With this optimization you are able to cut the image size down to 40% of the original size without any noticeable difference in quality.
For JPEG image optimization techniques refer to my post Optimize Images for Web JPEG.