Image File Formats Used in WordPress Design

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

In WordPress design, you need to understand the types of image file formats you will work with for designing on the web. The images, whether photos or logos, you save and use on your WordPress website are raster file types because of the smaller file size and rich color display.

Compression

When you use raster images in your web design, they need to have a certain amount of compression, or a decrease in the overall size of the file. Image compression occurs when you save a raster image file as a JPG, GIF, or PNG for use in your website design project. Compressing a file decreases the size of the image file so that the image loads quicker on a web page.

The larger the image file size, the longer it takes for that image to load on your WordPress web page.

Compressing image files can use two different algorithms, depending on the file format you’ve chosen for your image file, and for digital image files, compression happens in one of two ways:

Lossless compression: All data from the image file is retained during and after compression, usually resulting in zero loss of quality from the original image file.
Lossy compression: Reduces the size of an image file by removing certain bits of data from the original file or combining parts of the image that are similar to one another. This usually results in image quality loss from the original file.

Which file types to use for your projects

The table lists six common file formats you’ll work with for WordPress web design and the type of file and compression. Although the final image files that you save and use in your web design work are raster, you may begin with vector images to edit and manipulate graphics to suit the needs of your web design projects.

Image File Format, Compression, and Type
Image File Format	Image File Type	Compression Type
JPG	Raster	Lossy
GIF	Raster	Lossless
PNG	Raster	Lossless
AI	Vector	N/A*
EPS	Vector	N/A*
CDR	Vector	N/A*

Vector images do not experience compression.

Here are the three main vector image formats that you’ll probably come across in your work with graphic design:

AI: Adobe Illustrator, a proprietary file developed by Adobe for representing vector images
EPS: Encapsulated PostScript vector image format
CDR: Corel Draw proprietary graphic file developed by Corel for representing vector images

When deciding what raster image file format to use in your project, you need to take into account the characteristics of each format. In addition to different types of compression, the file formats also contain varying amounts of color. The characteristics of the three most common raster image file formats include

JPG: Suited for use with photographs and smaller images used in your WordPress web design projects. Although the JPG format compresses with lossy compression, you can adjust the amount of compression that occurs when you save the file. You can choose a compression level from 1 to 100, and you usually don’t see a great deal of image quality loss with compression levels 1–20.
PNG: Suited for larger graphics used in WordPress web design, such as the logo or main header graphic that identifies the brand and the overall, visual look of the website. PNG uses lossless image compression and, therefore, suffers no data loss during compression, creating a cleaner, sharper image. PNG files can also be created and saved on a transparent canvas, whereas JPG files can’t (they must have at least a white canvas [or background], or some other color that you’ve designated).
GIF: Compression of a GIF file is lossless, rendering the image exactly as you designed it without quality loss. However, GIF files compress with lossless quality and are limited to 256 colors. For higher color images with more quality, GIF isn’t the greatest format to use; use the PNG format instead.