A Beginner’s Guide to File Types in Web Design

Understanding File Types in Design & Development

If you’re not a web designer but are interested in learning about different file types, refer to our guide on various file formats and their suitable applications. Understanding these formats is essential for creating attractive and functional websites. Each format serves specific purposes, and knowing them can enhance your design skills and workflow. This guide will cover common image, video and audio file types.

Common File Types Used in Web Design

1. Graphic Design File Types

A. Raster Image Formats

Raster images are made up of a grid of pixels, each containing colour information. These images are created using individual pixels to form a detailed overall image. Due to their pixel-based nature, raster images are best suited for photographs, complex graphics, and detailed images with gradients and textures. They excel at capturing intricate details and realistic visuals, making them ideal for digital photography, web graphics, and print media. Raster images are resolution-dependent, meaning their quality can degrade when resized beyond their original dimensions. Despite this limitation, raster images remain essential in various industries for their ability to capture and display detailed visual content effectively. Let’s explore different raster file types like JPEG, PNG, GIF, PSD, TIFF, WebP, and AVIF.

JPG (or JPEG) stands for Joint Photographic Experts Group, and is a raster image format that employs lossy compression, making it ideal for sharing pictures. Lossy compression for JPEG reduces file size by permanently removing some image data. This process decreases the file size significantly but can affect image quality. The level of quality loss depends on the compression applied: higher compression results in smaller file sizes but more noticeable quality degradation, while lower compression maintains better quality but results in larger file sizes. Despite this trade-off, JPEG is popular due to its balance between image quality and file size; since its launch in 1992, JPEG has become the most prevalent digital image format, thanks to its effective compression and extensive compatibility with web browsers. It is a popular choice for images used in blogs, articles, product presentations, and various other applications.
PNG is short for Portable Network Graphics. It is a type of image format that uses lossless compression to preserve detail and colour contrast (lossless compression is a method of reducing file size without losing any data or quality). PNG also allows for transparency and is commonly used for infographics, banners, screenshots, and other graphics that combine images and text. It is supported by all major web browsers but it is not recommended for high-resolution photos, as it will create very large files (use JPEG instead).
- PNG-8 supports up to 256 colours (8-bit colour), resulting in smaller file sizes, making it ideal for simple graphics, icons, and images with limited colours. It supports 1-bit transparency, meaning a pixel can be either fully transparent or fully opaque.
- PNG-24 supports up to 16.7 million colours (24-bit colour), which allows for high colour fidelity and smooth gradients. This format is suitable for complex images, photographs, and graphics requiring detailed transparency (8-bit transparency). While PNG-24 files are larger due to the extensive colour palette, they maintain image quality without distortion when resized.
GIF: The acronym GIF stands for Graphics Interchange Format. Although it has a limited colour palette of 256 colours and is considered outdated, it remains popular for its ability to create simple animations, making it suitable for short, looping clips (note: there are now better alternatives for simple animations, such as APNG and WebP). GIFs support transparency, but only one colour can be fully transparent. While the file size is typically small, it can increase with complex animations. For high-quality images, detailed graphics, and when transparency is crucial, PNG is a better option.
TIFF is a popular file format among photographers for storing high-quality images before editing to avoid lossy file formats. It is not widely supported on the web but is widely supported by image editing software and is a standard format in the printing industry. Therefore, it is ideal for images that require high fidelity and detail, such as professional photography and printing. TIFF files can support multiple layers and transparency, similar to PSD files.
WebP is a modern raster graphics file format created by Google to replace JPEG, PNG, and GIF on the internet. It offers both lossy and lossless compression, along with features like animation and alpha transparency. This format effectively reduces image file sizes without compromising quality, which can be beneficial for saving server storage and reducing bandwidth usage. WebP is compatible with all popular web browsers such as Google Chrome, Safari, Firefox, Edge, and Opera, but not with Internet Explorer 11.
AVIF is a another next-gen image format which aims to address every conceivable use case for raster images on the web: GIF-like animation, PNG-like transparency, and improved perceptual quality at file sizes smaller than JPEG or WebP. AVIF offers superior compression and supports HDR for vibrant colours. It has better compression than WebP, JPEG, and PNG, and is designed to supersede them. AVIF is widely supported by the latest versions of Chrome, Edge, Firefox, and Safari but is not supported by Internet Explorer 11 (but you can use srcset and or <picture><source> to use AVIF with fallback to older image formats like JPEG).
PSD (Photoshop Document) is commonly used for saving image documents and works in progress with Adobe Photoshop. Graphic designers find PSD files essential because they can store multiple layers, masks, and effects. Photographers use PSD files for advanced photo editing, retouching, and compositing due to their support for high-resolution images and various editing tools. PSD files are a valuable tool for those in graphic design, photo editing, web design, or digital art, offering flexibility and high-quality results. However, they are not supported by web browsers or most standard image viewers or editors. Note: a popular open-source alternative to Photoshop is GIMP (GNU Image Manipulation Program), which is a powerful, freely distributed image editor that offers many of the same features as Photoshop, including photo retouching, image composition, and image authoring. However, Photoshop is the industry standard for professional design and photo editing, so many clients and collaborators expect files in Photoshop’s native PSD format.

B. Vector Images

Vector images are graphics made up of paths and points rather than pixels, allowing for scalability without losing quality. Popular vector image file formats include SVG, EPS, and AI, known for their flexibility and small file sizes. These formats are great for logos, icons, and illustrations that need to be resized without distortion. Vector images are created using mathematical formulas to define shapes and lines, ensuring smooth edges and sharp details.

They are perfect for both print and digital media where clarity is important. Ideal uses for vector images include projects that require resizing, such as branding materials, design elements, and infographics. They are also suitable for illustrations that need to be easily edited or manipulated. With their ability to maintain quality at any size, vector images are essential for professional graphic design work.

SVG, short for Scalable Vector Graphics, is a type of image format that utilises XML to portray two-dimensional graphics. These files are not tied to a specific resolution, allowing them to be resized without sacrificing quality. This makes SVGs well-suited for items like logos, icons, and illustrations that need to maintain sharpness across various devices. Additionally, SVGs are lightweight, interactive, and support animation, making them a great choice for web applications. While most modern web browsers fully support SVGs, there is limited support in IE11 due to its lack of support for SVG animations.
EPS, or Encapsulated PostScript, is a vector file format designed for producing high-quality graphics and illustrations. Its scalability without quality loss makes EPS files popular in the print industry, particularly for logos, illustrations, and other graphics that require frequent resizing. While they can include both vector and raster components, their main benefit is the preservation of sharpness and clarity regardless of size. EPS files are not “web-safe” for direct use in web design as web browsers do not natively display EPS files. EPS files are compatible with a variety of graphic design software, such as Adobe Illustrator, CorelDRAW and Inkscape.
AI is the file extension for Adobe Illustrator files. These files are vector-based graphics created using Adobe Illustrator, a popular design software. Vector graphics are composed of paths and points, which means they can be scaled to any size without losing quality. This makes .ai files ideal for logos, icons, and illustrations that need to be resized frequently. They also support layers, which allows for complex and detailed designs. AI files are not considered “web-safe” for direct use in web design: this is because web browsers do not natively display AI files; instead, they usually prompt users to download the file or open it in a compatible application like Adobe Illustrator.
PDF, which stands for Portable Document Format, is a flexible file type developed by Adobe. It enables documents to be displayed consistently regardless of the software, hardware, or operating systems used. PDFs can include text, images, hyperlinks, forms, and even multimedia features such as videos and audio. Their ability to maintain layout and formatting across various devices and platforms makes them a popular choice for document sharing. This characteristic is particularly useful for distributing read-only documents that require consistency, such as manuals, e-books, application forms, or scanned materials.

2. Audio Formats

For audio in web design, you may use:

MP3: The most popular audio format. It uses lossy compression, which reduces file size while maintaining good audio quality.
AAC: Advanced Audio Coding is another popular format that offers better sound quality than MP3 at similar bit rates. It is supported by most modern browsers (note: Firefox only supports AAC in an MP4 container and when the operating system already has the codecs installed).
WAV: Offers high quality but larger file sizes. Good for sound effects.
OGG: An open format providing good quality with smaller sizes.
M4A: This format supports high-quality audio without large sizes.

Please check the following website for web browsers current support: https://caniuse.com/

3. Video Formats

Videos can enhance your website. Some common formats include:

MP4: Widely used for online videos. It balances quality and size.
WebM: Optimised for the web, providing excellent quality.
MOV: Apple’s format, suitable for high-quality video.
AVI: A versatile format but typically larger files.

Please check the following website for web browsers current support: https://caniuse.com/

4. Document Formats

Documents support various content types. Some familiar formats include:

PDF: Preserves layout and is widely used for sharing.
DOCX: A Microsoft Word format that is commonly used for text documents.While DOCX files are widely used and supported by many applications, they are not typically considered “web-safe” in the context of web design. This is because web browsers do not natively display DOCX files; instead, they usually prompt users to download the file or open it in a compatible application like Microsoft Word or Google Docs. For web content, it’s generally better to use formats that can be directly viewed in browsers, such as HTML for text content or PDF for documents that need to preserve formatting and layout. PDFs can be embedded in web pages and viewed directly in most modern browsers, making them a more web-friendly option for sharing documents online.
XLS: An XLS file is a format used for spreadsheets in Microsoft Excel. It organises data in a tabular structure with columns and rows, where individual cells can hold information such as numbers, text, or formulas. While XLS files are widely used and compatible with various programs, they are generally not considered “web-safe” for web design. This is because web browsers do not display XLS files directly; instead, they usually require users to download the file or open it in applications like Microsoft Excel or Google Sheets. For online content, it’s often better to use formats that can be directly viewed in browsers, such as HTML tables for data presentation or CSV files for easy data sharing. These formats enable straightforward access and viewing within the browser without the need for additional software.
ODF, which stands for Open Document Format, is an open standard used for a variety of document types, including text files, spreadsheets, charts, and presentations. It is commonly utilised by office software like LibreOffice and Apache OpenOffice. Although many applications support ODF files, they are not regarded as “web-safe” for web design purposes. This is due to the fact that web browsers do not display ODF files directly; instead, they typically require users to download the file or open it with a compatible application. For online content, it’s advisable to use formats that can be viewed directly in browsers, such as HTML for text or PDF for documents that need to maintain their formatting and layout.