We think you're near Los Angeles

Currently in Los Angeles

Location: Los Angeles Current temperature: 75°F: Current condition: Clear See Extended Forecast

Image file formats

Eunice Hart's photo
Memphis Website Design Examiner

JPEG Full color image. Photo: ©SXC.hu/matchstick

 There are many different types of image file formats but, only 3 can effectively used for website design. Only JPEG, GIF or PNG files can be used in website design because these are the only ones that are viewable in web browsers like Internet Explorer or Firefox. These image files display in different ways depending on how they are needed. Here are the differences.


GIF with transparent background set to black

JPEG
The file extensions for JPEGs (pronounced “jay-peg”) are *.jpg, *.jpe or *.jpeg. They are the most commonly used by photographers, graphic designers or artists for full color images. JPEGs usually have better quality with clear images and more adherences to colors.

GIF
The file extension for GIFs (pronounced “jiff”) is *.gif. GIFs are best for logos or other graphics because GIF compression decreases the quality of a full photographic image. In website design, they are mostly used to create graphics with transparent backgrounds. The background color for the image graphic should be determined while creating it because the edges of the graphic will be smoothed with this color in a process called anti-aliasing. For example, if your page background is blue and you set the image graphic’s background transparency to white, you will see a white line around the image graphic set against the blue page.

PNG
The file extension for PNGs (pronounced “ping”) is *.png. Much like the GIF, PNGs can be saved with transparent backgrounds as well. They do not require the anti-aliasing process that GIFs do so their edges remain smooth when no background color is chosen. In fact, there is much better image quality with PNGs. Therefore, they can be used with full photographic images as well. Older browsers do not support PNG files. With the release of Internet Explorer 7, all modern browsers are up to date in their support of PNG files.


PNG file with transparent background.

Preparing images for website design
When planning your website, you must plan your use of image files for the best display of your photos and illustrations. These different images affect the way your page loads and displays.

Graphics such as logos, lettering or illustrations do better with GIF or PNG files because of the option for background transparency. Full color photographic images display better using JPEG files because of better quality resulting in clearer, more colorful image displays.

For more info: 
Advertisement

, Memphis Website Design Examiner

Eunice J. Hart is an experienced writer and web designer in Memphis, TN. She likes to write for the DIYers and the newbies by sharing the web design knowledge she has learned, on her own, over the past 10 years in the field. Click here for more information about her.

Don't miss...