When it comes to choosing the best file format for websites, should you go for a bog standard trusty JPEG or plump for the power of PNG?
In this video we examine two image file formats used around the web for displaying images. The JPG and PNG format are the most used types and are demonstrated in the video above. (GIF files are an option but these are less used for static images and more for animation.)
JPG Images
JPG (also known as JPEG) is an acronym for Joint Photographic Experts Group and has been around since 1992. This bitmap file supports varying degrees of compression quality and is a standard format for digital imaging. However, where website graphics are concerned, there is another option which may serve you better and actually save you time in more ways than one.
PNG Images
PNG stands for Portable Network Graphics and is another bitmap based image format. This format has been hanging around since 1994 and has undergone several revisions. It is superior (and more flexible) compared to a JPG, but tend to be larger in file size.
Besides supporting transparency (similar to GIF and TIFF) PNG supports an interlaced loading style, which means, on page load, it starts off blurry and gets sharper, whereas JPG does that thing where it loads in horizontal sections.
You can compress your PNG images heavily using tinypng.com and save masses of bandwidth usually attributed to image file size. Without putting too fine a point in it, when a PNG loads as an interlaced file, the image begins blurry picture and quickly becomes sharper. On the other hand JPG loads in horizontal bars one at a time.
Why is Transparency Handy in Web Design?
PNG images look better on web pages because you can change the background colour of the website containers and the transparent image file simply sits on top undisturbed. You cannot do that with a JPG.
If you have logos or graphics created for you by a designer, always make sure to request them in a format supporting a transparent background. It makes it easier to create your own designs from images that do not have a solid background colour as part of the image.
