Graphics are the main source in designing a website that makes it look more professional and attractive. They are used everywhere from logos , buttons, backgrounds and also, widely used in the site contents. To use images on a website is good up to a certain limit, when it takes more time to load.Using heavy images on your website would cost you money and traffic both. It would cost money because heavy images are larger in size. This would take up the additional storage and bandwidth of a website. This might not be a big problem, with unlimited bandwidth and storage website user’s. But use of heavy images might cost their traffic a lot..
Imagine a user, browsing a website, loaded with full of heavy images, with a 56Kbps modem… It would hardly take him less than a sec to click on the back button. Because if a such site which takes more than a minute to load, it would obviously force the user to leave the website never coming back again, hence also increasing the site bounce rate.
This might also refrain the search engine spiders to index their website. Because the less time it takes to load, the faster it gets indexed.
Hopefully there are many tools available on the internet , both online and offline to optimize images. But first let me give you a brief description about the widely used image formats.
1. GIF stands for Graphic Interchange Format. It’s a bitamp image format that has been widely used in designing website due to it’s wide support and portability. The format supports up to 8 bits per pixel thus allowing a single image to reference a palette of up to 256 distinct colors. It uses solid areas of color which can be used for logos, buttons, low resolution images or text images.
2. JPEG stands for Joint Photographic Experts Group. This format are mostly used in digital cameras and in other photography devices. JPEG typically achieves 10:1 compression with little perceptible loss in image quality. Note: If you’re compressing a JPEG image file, you should compress it at 50% compression rate.
3.PNG stands for Portable Network Graphics. It’s a bitmapped image format and a second alternative to GIF image formats. They support 24-bit colors and alpha transparency. You should use the PNG format for simple images that require more than 256 colors.These images are more heavier in size than GIF images, due to it’s quality and portability. The same compression rate applies here as to JPEG images.
From above it’s clear that GIF and JPEG format can be used if you are designing a website. PNG should be used rarely in certain cases where the image background needs to be transparent.Compress large resolution JPEG & PNG images wherever it’s required. For compression, there are many tools available on the web, both online and offline. Check the table given below:
Image Compression Tools.
# Use the crop tool in any image editor to cut out the non-essential parts of the image. As a bonus, the essential parts of the images take up less space on your page.
# Use thumbnails wherever required. Thumbnails are miniature versions of a picture that are hyper-linked to its actual size version. The thumbnail will load fast, and by clicking on it your visitors will be able to see the actual size version.
# Always include both the height and width attributes in your graphics. The browser knows what size the image is going to be, so it can continue on loading the rest of the page without to worrying about the graphics suddenly loading and pushing everything else around.
Something that many people forget is that the best way to optimize your images is to not use them at all. Cutting out needless graphics is the easiest way to optimise your pages. So, you should always be looking for ways to lessen your graphics-usage, and to get more out of every one that you simply must use.