When I was really new to design and blogging, I always wondered how is it that some website owners offered excellent quality graphic images on their websites and others had really poor quality photographs. Why did some move, and others were static?
PNG format images gives out great quality images even if they have an opaque or transparent background. However, if there are many colours on the image they will cost you in terms of file size and therefore, in loading time.
Transparent .png (3.75KB)
Rule of thumb is, if an image is above 40kb, then it might be too large in file size. If you want to stick with PNG because of the quality or because you need the image to come out partially transparent then your best bet would be to reduce the pixel size of the image if it is too large.
If the graphics is colour-plenty, you might want to try using other formats such as JPG or GIF. The great thing with GIF images is that they can be animated, and it is still considered an image format (as opposed to using other animation-friendly graphics such as SWF (Flash). GIF is also a great image format if you want to reduce filesize. However, if it compromises on quality then you should weigh out your options.
Transparent .gif (6.75KB)
JPG, jpg, or jpeg, is possibly web browsers’ most favourite image format. This is because although PNG works great with all new browsers it doesn’t perform well with the older browsers such as Internet Explorer 6. Okay strike that; it’s actually Internet Explorer 6 that doesn’t perform well with PNG files. The transparent parts are not entirely transparent but come off a bit gray.
High-resolution .jpg (30.5KB)
Going back to JPG though, its best feature is image compression. It can really hold a high image resolution as any PNG image (but JPG will not maintain a transparent property if it is saved that way) or really crappy to the point where you can count how many pixels there are on the image. This jpg compression feature is useful if you choose to compromise the quality of the image for the sake of reducing its file size.
Low-resolution .jpg (20.5KB)
