On File Types

Apart from the image qual­ity of the pic­tures you use in your graph­ics, sav­ing your graph­ics in the wrong file for­mat can also be dis­as­trous for your image qual­ity. If you’re sav­ing and plan to edit your graphic again at some later time, it’s best to save in the file for­mat that saves the layer infor­ma­tion for your graph­ics edi­tor (such as PSD for Pho­to­shop). When sav­ing for the web, the three most com­mon graphic file types are JPG, GIF and PNG. They all have dif­fer­ent prop­er­ties and their own ideal use for which they were created.

JPG/JPEG
This is the for­mat you will find most pho­tos in. It’s a “lossy” for­mat, which means it loses “unnec­es­sary” infor­ma­tion from graph­ics to com­press the file size. Graphic pro­grams usu­ally allow you to select the qual­ity when sav­ing to jpg. How­ever, when select­ing the high­est qual­ity, it’ll usu­ally lead to very big file sizes. Select­ing a lower qual­ity can result in blurry images. Repeated open­ing, edit­ing and sav­ing of a JPEG causes grad­ual qual­ity loss on each save, even if the same qual­ity is selected in your graph­ics editor.

GIF
In my opin­ion, GIF should not be used except for ani­ma­tions. GIFs can only save up to 256 colours, lead­ing to a huge loss of colour infor­ma­tion and thus qual­ity of your graph­ics. How­ever, it’s ideal for small images with few colours, such as logos and charts. It’s also the for­mat to use for animations.

PNG
In my opin­ion, PNG is usu­ally best for graph­ics such as blends and web­site head­ers. How­ever, you should always opti­mise PNGs when sav­ing, or it could lead to HUGE file sizes. PNG sup­ports vary­ing degrees of trans­parency, allow­ing for opac­ity effects, but that might not be dis­played cor­rectly across all web browsers.

Con­clu­sion
When sav­ing your graph­ics for the web, pay atten­tion to the file types and choose the right one for that par­tic­u­lar graphic. If you’re not sure which one you should use, you can save copies of your graphic in each file type and choose which one to upload based on image qual­ity and file size.

I’ve only shortly explained what the prop­er­ties of each file type are and what they are best used for. If you have any­thing to add, please do feel free to leave a comment!

Share