.png)
Thought I’d share the various kinds of files you'll definitely encounter working with a website designer or if you are DIYing your own website.
File types are SO important when it comes to building your website. Not just because of the way these images will look, but because of site speed. You may remember me telling you at least 100x now how important site speed is when it comes to your website’s SEO.
JPG (Joint Photographic Experts Group)
JPEG is a digital image format which contains compressed, lossy data (lossy meaning: files are reduced in size). Very compact, very all over the internet!
A typical JPG can be compressed at a ratio of anywhere from 2:1 to as high as 100:1, depending on your settings. Particularly back in the days of dial-up internet, JPGs were the only viable way to send image information.
However, because of the lossy nature of JPG, it is not an ideal way to store art files. Even the highest quality setting for JPG is compressed, and will change the look of your image, if only slightly. They also don't support transparency.
PNG (Portable Network Graphics)
PNG is a raster-graphics file format that supports lossless data compression (lossless = files are less reduced in size, so less compact that JPEG). PNG was developed as an improved version of GIF.
PNG is an excellent filetype for internet graphics, as it supports transparency in browsers with an elegance that GIF does not possess.
PNG tends to be the biggest of the three filetypes and isn’t supported by some (usually older) browsers. When working with PNG images for websites, I compress them in order to maintain site speed.
GIF (Graphics Interchange Format)
GIF was invented to animate images in the smallest file size. GIFs are a series of images or soundless video that loops continuously and doesn't require a play button
They have taken over the internet. You will find them on social media, emails, and even blogs. Adding animation might be just the thing you need to increase engagement.
I also realize there's actually a huge debate around how to pronounce GIF so state your case below...
When to Use
Now that you know each of these file types, lets talk about when to use them.
JPG:
Use JPG photographic images on the internet. Your website, your social media, etc. If you are using these photos on your website, compress them before hand.
PNG:
Use PNG files for any graphic design (think icons or your social media posts), storing line drawings, text and other large more detailed images. If you do not have a vector file for your logo, I would suggest using PNG.
GIF:
Small, simple animated graphics. As I stated earlier, GIF are super popular on social media, but they are also becoming trendy in web design.
When Not To Use
Here is when you should not use these file types:
JPG:
Do not use JPG for storing illustrations, editing images, line graphics, or print.
PNG:
Sharing high-resolution photos on the web. PNGs are large file types. It will slow down your site if you use them. Use JPG for your images.
GIF:
Storing large, detailed files, photographs. Word of advice, don't just add a GIF to add a GIF on your website. Make sure it fits your brand and other design elements.
If you have any questions, comments, or want to request a specific tutorial, drop me a note in the comments below!