This recipe will show you how to optimize the website by using optimized images with the help of different techniques and available tools. When you are taking care of every single line of code to make the website consume less bandwidth, load faster without compromising the site's quality, you need to take care of static content as well. Optimizing images is one of them.
Avoid the use of images to display text if not necessary. It will consume bandwidth and make your site slower, which your user would not like. For example, no need of images to show FAQ, About Us, and Home links. Simple text with CSS styles would work better.
Avoid resizing the image. When you are posting content on the website, which have to show the images, use the original size of that image instead of resizing a bigger image into a smaller one. Your site will load that bigger file size image and slow down your website. So, resize the image into smaller one using photo editor tool like Photoshop.
Use the
heightandwidthattributes under theimgtag with the original image's height and width. It will help the browser to load the images in a much faster way:<img width="250" height="250" src="image-path" />
Optimize the image file size by using the correct image format. When you have to use beautiful buttons, tabs, and so on, use CSS codes rather than using various images for this purpose. It will not only slow down your website, but will chock the site bandwidth. As a result the users will not want to wait till all images get loaded and will leave the site even before the main content is shown.
We need to use the correct image format as per our requirement. If web optimization is the main goal without losing users and quality content, use Photoshop to create high-quality lossless images with smaller size or use any online tool such as smush.it (http://smush.it/), which is available as a Firefox extension and even hosted by Yahoo! as a standalone web-based tool.
The most common file formats used over the Internet are JPEG, GIF, and PNG.
Use GIF or PNG when you are using smaller images, any animated images, and so on.
As image quality matters apart from website optimization, use JPEG with a lower color palette, that is, around 32 or 64 color palettes.
Try to keep the amount of colors to a minimum and use flat graphics instead of photographs. This way you can create images with palettes of 16 colors, keeping the file size extremely small and fast to download.