Digital images fill up our inboxes, take up computer memory space and take time to load on a web page. When working with digital image files there are certain file types to use for each circumstance.
JPEG
File extension: .JPG or .JPEG
“JPEG” stands for “Joint Photographic Experts Group.”
The group designed the format in 1986.
Pronounced “jay-peg”
16-bit data format
Can display millions of colors
Uses a very complex compression algorithm
To reduce file size
Let image details be “forgotten” and then fill in when displayed
Called “lossy” compression for the lost data
The human eye doesn’t see color detail as well as it does light and dark detail, so some color detail can be sacrificed to save file space.
60-75% compression is usually optimal for website usage.
Use when a small file size is more important than maximum quality
Standard file format of digital cameras and web pages.
Compatible across many platforms (PC and Mac), and other programs (web browsers and image editors).
In March 2014 Mozilla createdthemozjpeg format.
Works within the current, recognizable jpeg format.
Works with existing platforms, such as web browsers.
Reduces the file size up to 15% more without losing quality.
Useful for web pages, especially Facebook, for faster upload.
JPEG Mini Tool
Tools like JPEG Mini let you compress photos up to 5 times without losing quality.
Smaller file sizes means less storage space needed and quicker upload.
Best Uses:
Still images only
Real-world images like photos
Complex coloring
Shading of light and dark
PNG
File extension: .PNG
“PNG” stands for “Portable Network Graphics”
Designed in the mid-1990s as a way around patent issues with the GIF format, including benefits from both GIF and JPEG.
Pronounced “ping” or “P-N-G”
Lossless compression, so no data loss.
PNG-8
Very similar to GIF
256 colors and 1-bit transparency
PNG-8 files are even smaller than GIF files
PNG-24
24-bit color, similar to JPEG
Can include over 16 million colors
Lossless compression means larger files than JPEG
Alpha-channels
PNG files allow transparency to be set on a scale between opaque and completely transparent, allowing for a faded, translucent look.
PNG images can be put on any color background and maintain original appearance
Some older browsers may have trouble supporting PNG files because of alpha-channels.
Best Uses
Web images such as logos that involve transparency and fading.
Images in the middle of the editing process.
Complex images like photographs if file size is not an issue.
Source