Images - The Battle Between Quality And Size
By: John Vinson
Pretty much everything in the web design business is a series of balances. You have to find a balance between creativity and business. You have to find a balance between site management, and site design. Another area where balance is a key issue, is the wide world of imaging.
When building your site, one of the top priorities is making it appealing for return visits. Images is the most important component of making your site stand out. The problem with images, is while you’re going for the best quality you have to keep an eye on file size. The reason being is that you want your site to be able to load as fast as possible. People are probably at their least patient when they are browsing the internet. So if your site isn’t loading at a clip of 4-5 seconds (atleast) there is a good possibility they are moving on.
There are couple tricks to keep those file sizes down while keeping the overall image quality up. The first is to learn the different image formats that are compatible with internet browsers. The three most common, and ones that you should be using are JPEGs, GIFs, and PNGs.
The first format is the JPEG image, which is the most common format when dealing with photos. JPEGs tend to be difficult to work with when you’re needing to resize, as your ratio of height x width needs to stay the same for your picture to look right. Here is a good site if you’re looking to lower your JPEG image size.
GIFs are used more when dealing with images you have created yourself. So if you’re making a logo from scratch, and it’s mostly been created in Illustrator or other drawing applications, you’ll want to use the GIF format. Something else when using GIFs is that unlike JPEG files, they can have transparency and also be animated.
PNG files encompass everything that is great about both formats. PNGs can be used for photos, and also can have transparency. They conserve quality well when they are decreased in size. A couple of problems with PNGs is that they tend to be very large and you will have to make them smaller to get your file size right. Also there are compatibility issues with older versions of Internet Explorer, which won’t read transparency of PNG files.
Another useful tip, is when you are putting your images on your web page, be sure to include heigh and width tags. This will help the loading times of your pages, as if the browser knows the height and width will know where the image should be placed.
When using images, learn when to be image heavy and when to go lighter. It’s a good idea to have the least amount of images on your page as needed to make it stand out.
