Galloway Graphic Design: September 2013

Thursday, September 26, 2013

Wednesday, September 18, 2013

File Format Notes

File Formats

All computer files are saved with a certain format

Format is determined by the origin of the file.

EX: Photoshop has .psd

Graphic Files (like photo or video) can be reduced in file size by compression.

Lossy VS Lossless

Graphic image formats have two categories of compression: Lossy and Lossless

Lossy: Image data is “lost” or reduced and can cause poor image quality. Results in “Compression artifacts”

Lossless retains image data for higher quality but larger file size.

Some Lossless formats are better for bigger files, like .tiff or .png or .pdf, but are not always web friendly

Lossy can result in pixelization.

Graphic Formats

TIF, JPG, and GIF are the 3 most common formats for common activities such as printing, scanning and displaying images over the Internet.

TIF is better for printing, JPEG has smaller file sizes, and GIF can have animated files and alpha channels.

PNG is a common web format and is high quality and can contain an alpha (transparency) channel

Alpha Channel: Does not need a square border, can be a cutout.

Each format has its own advantages

TIF

TIF: Tag Image Format. Common for desktop publishing, print, photo and graphic design.

A LOSSLESS file format. Retains image fata for maximum image quality.

Can result in larger file sizes. Not fit for internet or browser usage.

JPEG/JPG

JPEG: Joint Photographers Expert Group

Created for digital photography

LOSSY format: compresses images.

Can reduce images 10:1 without showing significant compression artifacts

Compression level is adjustable

Recompressing images makes them look worse every time. Work in native format if possible.

Worst choice for graphics.

GIF

GIF: Graphical Interchange Format

Is best for graphics or images that have flat color or flat tone.

“Indexes” color and reduces image size.

Color channels can be changed from 1 to 8

Contains no DPI (Dots Per Inch) data for printing

GIFS can be animated and made into “Cinemagraphs.”

Worst choice for photographs.

Know Your Pixels

TIF and JPG are best for images with pixels that blend in color, these are called “contiguous pixels”

GIF is best for images with flat, even tone or “non-contiguous pixels”

Alias vs Anti-Alias

Aliased have hard edged pixel art.

Anti-Aliased: smoothens out shapes with gradients.

Understanding File Formats

Understanding file formats:

For the redwoods image, the format with the smallest file size was the low quality JPEG at only 43 KB. The greatest file size was the PNG-24, at 861 KB. The highest quality image, in terms of compression and color appeared to be the high quality jpeg. While the PNG may not have had as many compression issues, there were issues with the gradient in the sky. Due to the high quality jpegs image quality and low file size, 147 KB, I would say it is the best option for this image.

gif 32 no dither

gif 32, dithered

gif 64 no dither

gif 64 dithered

gif 128 no dither

gif 128 dithered

gif restricted

jpeg high quality

jpeg low quality

jpeg medium quality

png 8-128

png 24

For the gradient image, the format with the smallest file size was, again, the low quality JPEG at only 4 KB. The greatest file size was again the PNG-24, at 53 KB. The highest quality image this time was the PNG-24, with no issues in terms of color, compression or gradient. While the jpegs were smaller files, they showed many compression artifacts around the border of the circle. However, the high quality jpeg's compression artifacts are hardly noticeable at a small scale. Overall though, I would say that for a picture this simple, the PNG was the best choice.

gif 32, no dither