A lot of different file types are used to make a website. This is a handy reference guide to help you know and understand what these file types are and what they’re used for.
| File Type | Description | Bitmap | Vector | Used In | Used For |
|---|---|---|---|---|---|
| .jpg | Best format for photos or images with many colors. Reduces the image size (i.e for web). No transparency support. |  |
 |
Most image editing software. | Reduce image file size. |
| .gif | A lossless format for image files. Supports both animated and static images. | |
|
Most image editing software. | Short and low quality videos. |
| .png | Ideal for bitmap (raster) images with transparent backgrounds on the web. Also for web images with few colors. | |
|
Most image editing software. | Transparent background web images. |
| .tif | Best format for high quality photos and bitmap (raster) images in print. | |
|
Most image editing software. | High quality images, particularly for print. |
| .eps | A PostScript file format used for font and vector image files. | |
|
Affinity Designer, Adobe Illustrator, Sketch, InkScape, Corel Draw, etc. Open in Affinity Photo or Adobe Photoshop to convert to bitmap (raster) format. | Vector graphics and logos for print. |
| Portable Document Format files that you can view in print and on digital devices. | |
|
Can be read & printed on many devices. | ||
| .svg | Vector image format for graphics with support for interactivity and animation. SVG vector files are small in size, and infinitely scalable without any loss of quality. | |
|
Vector logos, icons and graphics for web. | |
| Screens use 72 dpi resolution and the RGB color space (all the files types listed above can be used in RGB format, but you may have to re-format the file to the RGB color space). Print uses 300 dpi resolution and the CMYK color space (.JPG, .EPS, .PDF and .TIF are the best formats to use in print). | |||||
| File Name | Description |
|---|---|
| .html | .html or HTML is an acronym for Hypertext Markup Language. HTML is a markup language that web browsers use to interpret and compose text, images, and other material into visual or audible web pages. HTML files are text-only documents made specifically for digital viewing in a web browser or on-screen via an Internet connected viewing device. HTML can embed programs written in a scripting language such as JavaScript, which enhances the behavior and content of web pages. CSS is used to define the layout and look of the content. |
| .php | .php or PHP files are plain-text files that contain code written in the PHP programming language. PHP is an acronym for "PHP: Hypertext Preprocessor". It is a widely-used, open source scripting language that is free to download and use. PHP files can contain text, HTML, CSS, JavaScript. The code is executed on a server, and the results are returned to a web browser as plain HTML. PHP can generate dynamic page content; collect form data; send and receive cookies; add, delete, modify data in a database; control user-access; and encrypt data. PHP is compatible with almost all servers used today (Apache, IIS, etc.); runs on various platforms (Linux, Unix, Mac OS X, Windows, etc.); and supports a wide range of databases. |
| .js | .js or JavaScript files are text files containing JavaScript code that is used to execute JavaScript instructions in web pages and apps. JavaScript is used to open and close windows, validate form fields, make rollover images, and create animated drop-down menus. While HTML and CSS give structure and style to web pages, JavaScript makes web pages and apps interactive and engaging. |
| .css | .css or CSS files specify the style—page layouts, colors, and fonts for an HTML file, website or app. CSS is an acronym for Cascading Style Sheets, with an emphasis on “Style.” While HTML is used to structure a web page or app screen (defining headlines, paragraphs, and embedding links, images, video, and other media), CSS specifies how your web pages and app screens will display on different devices and at different screen sizes. CSS can control the layout of multiple web pages and app screens all at once. |
| .asp | .asp or ASP files are design documents created by Serif Affinity Designer, a vector graphics design application. Affinity Designer is used to create professional vector designs. It is a popular alternative to Adobe Illustrator. |
| .java | .java or Java files are design documents created by Serif Affinity Designer, a vector graphics design application. Affinity Designer is used to create professional vector designs. It is a popular alternative to Adobe Illustrator. |
| .jsp | .jsp or JSP files are design documents created by Serif Affinity Designer, a vector graphics design application. Affinity Designer is used to create professional vector designs. It is a popular alternative to Adobe Illustrator. |
| .perl | .perl or PERL files are design documents created by Serif Affinity Designer, a vector graphics design application. Affinity Designer is used to create professional vector designs. It is a popular alternative to Adobe Illustrator. |
| .python | .python or Python files are design documents created by Serif Affinity Designer, a vector graphics design application. Affinity Designer is used to create professional vector designs. It is a popular alternative to Adobe Illustrator. |
| .ruby | .ruby or Ruby files are design documents created by Serif Affinity Designer, a vector graphics design application. Affinity Designer is used to create professional vector designs. It is a popular alternative to Adobe Illustrator. |
| .sql | .sql or SQL files are design documents created by Serif Affinity Designer, a vector graphics design application. Affinity Designer is used to create professional vector designs. It is a popular alternative to Adobe Illustrator. |
| .xml | .xml or XML files are design documents created by Serif Affinity Designer, a vector graphics design application. Affinity Designer is used to create professional vector designs. It is a popular alternative to Adobe Illustrator. |
| .yaml | .yaml or YAML files are design documents created by Serif Affinity Designer, a vector graphics design application. Affinity Designer is used to create professional vector designs. It is a popular alternative to Adobe Illustrator. |
| Affinity Designer (Vector) | Description |
|---|---|
| .afdesign | .AFDESIGN files are design documents created by Serif Affinity Designer, a vector graphics design application. Affinity Designer is used to create professional vector designs. It is a popular alternative to Adobe Illustrator. |
| Affinity Photo (Bitmap) | Description |
|---|---|
| .afphoto | .AFPHOTO files are image files created by Serif Affinity Photo, a bitmap (raster) graphics design application. Affinity Photo is used to create professional bitmap (raster) images. It is a popular alternative to Adobe Photoshop |
| Affinity Publisher (Print Layout) | Description |
|---|---|
| .afpub | .AFPUB files are print layout files created by Serif Affinity Publisher, a print design application. Affinity Publisher is used to create layouts for printing and digital publication. It is a popular alternative to Adobe InDesign. |
| Photoshop (Bitmap) | Description |
|---|---|
| .psd | .PSD files are bitmap (raster) image files made by Adobe PhotoShop. |
| .atn | Photoshop Action files record steps/actions made in Photoshop. These files repeat those same steps/actions when “played” again at a later time. |
| .abr | A Photoshop Brush file. These files store information about the shape and texture of one or more brushes in Photoshop. |
| .asl | A Photoshop Style file. These files are used when applying the same appearance/effect to multiple objects or layers in Photoshop. |
| .pat | A Pattern Image file. These files are used by graphics programs to create repeating patterns or textures from a small image/graphic. |
| .raw | A .RAW file contains original (raw) image data from a camera sensor without any in-camera processing. |
| Illustrator (Vector) | Description |
|---|---|
| .ai | .AI files are fully editable vector files made by Adobe Illustrator. |
| .ait | A Illustrator Template file. Used to rapidly create copies of saved Adobe Illustrator (.AI) files. |
| InDesign (Print Layout) | Description |
|---|---|
| .indd | A print page layout file made by Adobe InDesign. All images and fonts used must be kept in a folder mapped to the file by InDesign. |
| .indl | Object library created by InDesign; allows users to organize and reuse common page elements together graphics, text, ruler guides, and grouped images. |
| File Type | Description | Web | Digital | Glyph/Ligature Support | |
|---|---|---|---|---|---|
| .otf | OpenType (OTF) fonts contain screen and printer font data in one package. OTF fonts support multiple platforms and expanded character sets. | |
|
|
|
| .ttf | TrueType (TTF) fonts can be scaled to any size. They are compatible with most printers and output devices. | |
|
|
|
| .eot | Embedded OpenType (EOT) fonts are supported only by Microsoft Internet Explorer and Edge browsers. They are a compact form of OpenType fonts for use as embedded fonts on web pages. | |
|
|
|
| .woff / .woff2 | The Web Open Font Format (WOFF) was made specifically for use in web pages. It is essentially OpenType or TrueType with compression and additional metadata. WOFF2 provides a 30% reduction in file size on average, so Web fonts load more quickly in compatible browsers. | |
|
|
|
| .svg | An SVG font is a new version of the OpenType format, with SVG standing for Scalable Vector Graphics. The SVG glyph format allows the characters to be displayed in multiple shapes, colors and with different transparencies. SVG fonts may have animated changes to these attributes. These shape, color and transparency attributes are not supported by regular OTF and TTF formats. | |
|
|
|