Understanding Image File Formats Used in WordPress Design - dummies

Understanding Image File Formats Used in WordPress Design

By Lisa Sabin-Wilson

The images — whether photos or logos — you save and use on your WordPress website should be raster file types because of the smaller file size and rich color display. You need o understand how compression affects the size of raster images and discover what types of file formats you may use in your own projects.

Understanding 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. 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 web page.

Compressing image files can use two different algorithms, depending on the file format you’ve chosen for your image file. 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: This reduces the size of an image file by removing certain bits of data from the original file or by 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

Although the final image files that you save and use in your web design work should be raster, you may begin with vector images to edit and manipulate graphics to suit the needs of your web design projects.

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*

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: CorelDRAW proprietary graphic file developed by Corel for representing vector images

When deciding what raster image file format to use in your project, 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: This format is suited for photographs and smaller images used in your 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: This format is suited for larger graphics used in 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. JPG files must have at least a white canvas (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 are limited to 256 colors. For higher-color images, GIF isn’t the greatest format to use; use the PNG format instead.