Image File Types

As part of my research for designing my web portfolio I looked into image file types and optimization to get the best quality image whilst keeping a high quality. The image below is split into thirds showing three of the different file types, left to right: GIF; JPEG and PNG. The difference in quality is most noticeable with the GIF section of the image that has a lot of the images as blocks of a single colour that doesn't maintain the detail of the original image. This is mostly due to GIF being used for vector images that have limited amounts of block colour because of a GIF's limited colour palette. The JPEG and PNG sections both have a higher quality compared to the GIF, however I think for the majority of the images I put on my site I will use JPEG images because of file size.

File Sizes:

• GIF:  515KB
• JPEG: 170KB
• PNG 24-bit: 1.04MB

 The large difference in file size between the JPEG and PNG files is substantial and with little noticeable difference it seems unnecessary to have such a large image file that would require more loading to access my website.

For the images I want to be of the highest possible quality, namely my gallery images, I might still use PNG as there is still a high amount of data lost when a JPEG is placed onto a website, making the quality reduced, whilst PNG's, being lossless, maintain the same quality and would be best for large detailed images.