We previously released a blog post that offered in-depth information regarding the foundation principles of raw image types (raster and vector) as well as the data algorithm (lossy and lossless) that are used for image compression when saving an image into a specific format.
In this blog post, we’re breaking down the most common image types that you might come across during both your design phase when creating or editing original files, as well as the image formats used to display on the web.
We’ve also included a handy cheat sheet infographic at the end of this post.
Ensuring that your images are best suited for web display is a truly crucial process. Before we dive into the image types, here’s a quick recap of the last post’s core principles:
A raster image is comprised of a series of pixels, each which contains its own RGBA color make-up. Raster images are generally used in conjunction with photographs or image types with a high level of detail. Upon magnifying a raster image, the individual pixels will become exposed, creating a blurry or jagged appearance, particularly around the edges.
A vector image is comprised of a series shapes or elements created with points, paths and curves that follow mathematical principles. Most commonly, vector images are created through Adobe Illustrator. Vectors can be scaled, and even at levels of extreme magnification, will retain visual clarity and crispness.
A lossy compression is a form of data compression that sees the loss of pixel data.
A lossless compression is a form of data compression where no data is lost, only compressed.
For more in-depth explanations of the concepts above, read through the previous blog post: Everything You Need to Know About Image Formats and File Types (Part 1).
IMAGE TYPES USED IN GRAPHIC DESIGN
Possibly the most widely used graphic design software available is the Adobe Suite. Two of the most popular programs are Photoshop and Illustrator, which make use of .psd and .ai files respectively. Files saved in these formats can be either raster or vector, and are raw and editable. To become web ready, they’ll need to be saved in an appropriate file type (JPEG, PNG, GIF or SVG).
There are a number of other file formats that are used during the creation, design or edit phase. The most common of these file formats are described below.
TIFF
Sometimes also referred to as a TIF, the TIFF (Tagged Image File Format) is one of the earliest raster image file formats that sports a wide range of functions. Still regularly used to date by image editing software applications, TIFF files are able to hold a large among of color data, making it a popular file type for photographers or graphic designers during the design or image editing and manipulation stages. TIFF files commonly make use of lossless compression. With this, TIFF files produce great results for monochromatic images and are widely used by scanners and fax machines (what are thooooose?). During compression, a TIFF won’t lose its image quality, but as they are generally large-sized image files, they will need to undergo a format conversion in order to become usable for the web.
EPS
Used during the design or creation stage, the EPS (Encapsulated PostScript) file can store both bitmap (raster) and vector data. As the EPS is a PostScript file, the file itself is flexible and can be read by various software applications that make use of PostScript technology (both between computer processing technologies such as Adobe and Office applications, as well as external software devices such as printers equipped with PostScript interfaces). With this, various applications will be able to import EPS files and allow you to edit them from within the program. Despite its flexibility in the creation phase, the EPS format is largely being replaced by other, more contemporary file formats during the design phase. For web display, EPS is not supported and will need to be converted into one of the universal web image formats (JPG, GIF, PNG).
RAW
Most cameras will include a setting which allows the photographer to shoot pictures and save them in the original camera RAW image file format (Canon uses .CRW or .CR2, Pentax uses .PEF, and Nikon uses .NEF). Quite simply, the RAW file format saves the image in a format that has not undergone any processing or compression. It contains all of the image data as recorded by the camera itself, thus giving the photographer the ability to use the highest quality original file ( with higher levels of brightness, more detail etc.) during post production. When shooting in and saving to JPEG format, a series of automatic compression processes run, thus decreasing or completely removing certain editable characteristics. When opening a RAW file on a computer, the file size is ginormous, and typically are converted to TIFF files for editing and post production.
IMAGE TYPES USED IN WEB DEVELOPMENT
There are a number of image formats that are readily available but the most common, universally recognized and safe for all web browsers are JPEG, GIF, PNG (raster) and SVG (vector).
SVGs are pretty much in a class of their own as the file format is the only one that can display vector based images on the web. The other file formats – JPEG, GIF and PNG – have quite stark differences between them.
JPEG
Possibly the single most commonly used image format, JPEG (Joint Photographic Experts Group) images are widely used across all disciplines of design, print, publishing, processing, and web display. Sometimes referred to as JPG (merely an appended file extension name that dates back to the DOS era when extensions were required to be three characters), JPEGs also come in other formats (.jpe .jif .jfif .jfi) but are essentially the same file types.
Designed for the exact purpose of removing slight graphic detail from an image that the human eye wouldn’t really notice, the JPEG generally makes use of lossy compression, meaning that the image will lose data and thus quality as it is compressed. As the JPEG form is good at handling a number of colors (supporting over 16 million colors), it’s great for photographic imagery, but as lossy compression process will eliminate a number of pixels, the JPEG form is not exactly the best format for logo graphics or other core branded assets.
The real strength of the JPEG file format is that the level of lossy compression can be adjusted, giving the user the highest level of control in determining final image file properties, as opposed to other file formats.
Probably the easiest way to understand the quality vs file size trade-off when using the lossy format is the JPEG image compressor’s quality slider, as provided during Save in the Adobe Suite applications. Here, the user is able to see the adjustments in image quality and note the changes in file size. For example, the lower the quality, the greater the compression, the smaller the file size, and vice versa. Remember, portions of data are lost each time the JPEG file is saved, so repeat compressions will result in irreversible loss of image data and quality.
JPEGs in a nutshell:
Safe to use on all web browsers
Can’t support animation
Use for web display images or photographs
Do not use for logos or branded assets
When optimizing for the web, test out a combination of quality settings for determining the best trade-off between picture quality and file size
GIF
Initially copyright protected, GIFs no longer require permission and are widely used for web display as small graphics. A GIF (Graphics Interchange Format) can only store a maximum of 256 different colors within one file. With this low number of colors available in the palette, the GIF image will compress really well and will produce a relatively small file size, but for a big trade off on quality. Due to the small number of available colors, GIFs are typically grainy (fuzzy or blurry) in appearance, but the core of the image will still be communicated.
Making use of lossless compression, if your original image contains a higher color value than suitable for GIF properties, the image data will automatically be recoded and reduced to fit the GIFs maximum of 256 color requirement. Despite this, images that fall within the set color constraints, a GIF will never lose data or quality during repeat saves.
GIFs are best used for graphic assets that don’t require high levels of image quality but do require a rapid load speed. If your website needs to include an image that is not as detailed as a photograph, a GIF might be a good file format option for you, and would be suitable for simple diagrams, possibly infographics, logos, or similar. Another popular use for the GIF file format lies in its animation ability (supported by all browsers). Here, designers can interlace a series of images to form a looping animation. In this regard, GIF assets are great to include with content marketing or blog pieces, particularly as powerful visuals that communicate a series of messages, instructions or similar.
Finally, GIFs are also optimized to include transparency on the RGBA Alpha channel, although PNGs export with slightly better quality in this regard
GIFs in a nutshell:
Safe to use on all web browsers
Can support animation
Do not use for photographs
Can be used for logos or branded assets
Used for short animations
PNG
When GIFS first become available for use, they had a patent on them and the technology was copyrighted, seeing permission for use by application only. PNGs (Portable Network Graphics) were developed as an alternative to GIFs. PNGs are raster-based images that support lossless compression.
Saving images as PNGs present two options: PNG-8 and PNG-24. In a sense, not strictly speaking, the PNG file formats can be somewhat compared to the GIF and the JPEG respectively.
A PNG-8 file can only support a maximum color palette of 256 colors – just like a GIF. PNG-8 formats can be used for graphics with areas of either few colors or small variations in color, such as logos, icons or any graphic that do not include extensive detailing. The difference between GIFs and PNG-8s is that PNG-8s cannot support animation but will have better transparency results on the RGBA Alpha channel.
A PNG-24 file supports a wide range of colors (over 16 million) and can be used for photographic images. Saving a file in a PNG-24 format will make use of lossless compression, seeing it as a good alternative to a JPEG as no data will be lost. This, however, could result in a larger final file size so be sure to test both JPEG and PNG-24 formats when bargaining with file size and quality.
PNGs in a nutshell:
Safe to use on all web browsers
Cannot support animation
Great for images with transparent backgrounds
Use PNG-8 for logos, branded assets or graphics with very few colors
Use PNG-24 for photographs but stay conscious of the final file size (if too large, test a JPEG format)
SVG
A Scalable Vector Graphic (SVG) is pretty much exactly what the name describes: an image in a vector form that can be scaled up or down without the threat of loss of quality. As a vector graphic, an SVG is not made up of pixels, but rather a series of points, paths and curves that all follow mathematical principles to ensure optimal scalability.
SVGs are XML images. Most commonly, SVGs are created by designing an item in Adobe Illustrator and exported as an SVG file type. Alternately, they can be scripted into direct XML markup language by a text editor. The great thing about SVGs being in XML form, is that each of the image’s elements are rendered as objects and can be easily edited through the use of JavaScript.
As the SVG’s properties are essentially coded, each individual vector shape within the full image can easily be edited using code. Say, for example, your logo was comprised of a graphic of a house, where the roof element of the logo was brown. By using code, you could simply assign different color properties to the parameter to change the color of the roof as opposed to saving and exporting a series of individual files that ultimately would take up server space.
As SVGs are great for scalability, the benefit of using this file format for logos, icons and other design assets is that the actual file can save with a small size, but still display at a large size. All modern web browsers support SVG and SVGZ (compressed SVG) files so these are definitely the way forward in terms of ensuring that your brand assets will display correctly and with perfect crispness, particularly on high resolution and retina display screens.
There are two things to keep in mind with SVGs:
Complexity of design, and
Metadata
If for example, your vector design is extremely complex and makes use of a number of elements, this might have an effect on the final size of the exported file. As the mathematical calculations of a vector image require more legwork in computing than raster images, a complicated and heavily layered SVG might end up creating a large file, ultimately having a larger effect on file size. With this, it’s advised to simplify and refine your design to its core elements to ensure that the final combination of shapes has the lowest level of complexity. So, be really clever with your design from the start when working with the elements on the artboard.
Secondly, as SVGs make use of XML markup language, they will contain a series of scripted properties, including metadata. These properties are superfluous and don’t have any effect on the display of your image, instead, they’ll push up the file size. So, if possibly be sure to strip away this metadata from your SVG file.
USING SVG FILES WITH WORDPRESS
Although WordPress allows a user to upload an array of file types to the media library, SVGs are not supported. If you’ve tried to upload an SVG to the media library, you more than likely would have received an instant error message, or, even if the file has loaded into the library, it wouldn’t display correctly on-site.
To begin using SVG and SVGZ (compressed SVG) files on your WordPress website, you’ll need to give the media library permission to accept unrecognized file types. There are two easy methods for this:
Install a plugin such as SVG Support
Add the following lines of code to the functions.php file in your child theme
Note: If you require further information regarding child themes, read our blog post which explains why using a child theme is vital for your WordPress development practice and also offers instruction regarding how to create one.
SVGs in a nutshell:
Safe to use on all web browsers
Can support image changes with JavaScript
Displays well on high resolution and retina display screens
Great for logos, icons
Small file size (if designed for low complexity and stripped of metadata)
Use a plugin or add code to the functions.php file in the child theme to enable SVG and SVGZ usage within WordPress
Image File Types and Formats Cheat Sheet
We hope you’ve enjoyed reading this blog post and that it will help you during your next web design and development project.
If you have any comments or queries, please feel free to share them below. We love hearing your feedback!
Thanks for reading!