There are a lot of image file extensions. Today we will talk about the 3 most popular. JPGs, PNG's and GIFs, and when it's best to use them. This is will simple overview to get you up speed quickly. Also you can check out out 2 Image Tips to Keep Google Loving Your Website and 34 FREE High Quality Stock Image & Video Websites
[intense_content_section background_type="color" background_color="#eeeeee"]
[intense_heading responsive="1" aggressiveness="2" font_color="#444444" align="center" font_weight="500" tag="h2"]JPGs[/intense_heading]
[intense_hr size="medium" color="#cccccc" accent_width="30" accent_height="3"]
JPGs (Joint Photographic Experts Group) are a very popular image file type. Below is some info to to be aware of when considering their use.
- A transparent background is NOT needed. So usually not the best for logos that will need transparency.
- Small file size is important. While this ins't always true. JPGs usually have a smaller file size than PNGs and GIFs. This is great for keeping the load times at their best.
- JPGs are compressed using Lossy compression instead of Lossless compression. This means you can achieve very small files sizes, but can sacrifice some quality.
- JPGs are great for background elements as well.
[/intense_content_section][intense_spacer type="inline"][intense_content_section background_type="color" background_color="#eeeeee"]
[intense_heading responsive="1" aggressiveness="2" font_color="#444444" align="center" font_weight="500" tag="h2"]PNGs[/intense_heading][intense_hr size="medium" color="#cccccc" accent_width="30" accent_height="3"]
PNGs (Portable Network Graphics) are one of the more modern image file types. For this reason they are very versatile. Below is some info to to be aware of when considering their use.
- You need your image to have a transparent background. This is handy when you want to have a logo over something with a background color or pattern.
- PNGs can take advantage of Lossless compression enabling then preserving more image quality. However this will mean a larger file size.
[/intense_content_section][intense_spacer type="inline"][intense_content_section background_type="color" background_color="#eeeeee"]
[intense_heading responsive="1" aggressiveness="2" font_color="#444444" align="center" font_weight="500" tag="h2"]GIFs[/intense_heading][intense_hr size="medium" color="#cccccc" accent_width="30" accent_height="3"]
GIFs (Graphics Interchange Format) are an older image file type, but they can do some really neat things that other file types can't pull off. Below is some info to to be aware of when considering their use.
- GIFs are great for making animated graphics.
- GIFs take advantage of Lossless compression so the file sizes can be small.
- Not the best for photos due to their 8-bit max.
[/intense_content_section][intense_spacer type="inline"]
Below is a handy comparison chart of all three file type.
[intense_table columns="Property,JPG ,PNG,GIF" data="Lossy compression,X,,,Lossless compression,,X,X,Grayscale,X,X,X,RGB color,X,X,,8 bit color (24 bit data),X,X,,16 bit color option,,X,,Indexed color option,,X,X,Transparency option,,X,X,Animation option,,,X" type="striped"]