File Formats & Media
Over two hundred file types can be published, but the browser treats them very differently: it renders a PDF, an image or an HTML file, and it downloads almost everything else. This category explains why. It covers the document formats — PDF, and the DOCX, XLSX and PPTX files that are really ZIP archives full of XML, which is exactly why no browser can show them — alongside the data formats, CSV, JSON, XML and Markdown, where the content type you serve decides whether a browser displays the text or saves it. The second half is media: PNG against JPEG, the 25 to 35 per cent WebP saves over JPEG, AVIF, the HEIC file your phone produces that nothing on the web can read, and SVG, which is markup rather than pixels and therefore scales without loss and needs handling with a little care.
34 terms in this category
AVIF File
AVIF is an image format built from the still-frame coding of the AV1 video codec. It generally beats WebP by another 20 percent or so at matching quality, at the cost of much slower encoding.
Character Encoding
A character encoding is the rule that maps the bytes in a file to the characters a person reads. Get it wrong and nothing errors — the text simply comes out as the wrong characters.
CSV File
A CSV is a plain text table: one record per line, fields separated by commas, with quotes around any field that contains a comma or a line break. It has no types, no formatting and no formulas — which is both its strength and the source of most of its trouble.
DOCX File
A DOCX is a Word document stored as a ZIP archive containing XML files, images and relationship maps. No browser can display one, so a DOCX link always downloads rather than opens.
EPUB File
An EPUB is an ebook: a ZIP archive containing XHTML chapters, CSS, images and a manifest, which a reading application lays out to fit the screen. Unlike a PDF, the text reflows, so the reader chooses the font size and the page breaks fall wherever they fall.
File Conversion
File conversion is turning a file of one format into another — a DOCX into a PDF, a PNG into a WebP, Markdown into HTML. It happens in a tool you run, not in the host that serves the result.
GIF File
A GIF file is a palette-based image limited to 256 colours per frame, best known for short looping animations. For anything longer than a second or two, a video file does the same job at a fraction of the size.
HEIC File
HEIC is the format an iPhone saves photographs in by default. No browser on Windows or Android can display one, so a HEIC uploaded straight from a phone shows up as a broken image for most visitors.
HTML File
An HTML file is the source of a web page: nested elements that describe headings, paragraphs, links, images and forms. It is the one format a browser executes rather than merely displays — it fetches what the file references and runs the scripts it names.
ICO File
An ICO is a container that holds several images of different sizes in one file, so the system can pick the right one for a tab, a bookmark or a taskbar. On the web it exists almost entirely for one filename: favicon.ico.
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
JPEG File
A JPEG file is a raster image compressed by discarding detail the eye is least likely to miss. It was designed for photographs, and every time you re-save one it loses a little more.
JSON File
JSON is a text format for structured data, built from objects, arrays, strings, numbers, true, false and null. It is the usual way one program hands data to another over HTTP, and the usual way a static page loads data it did not ship with.
Lazy Loading
Lazy loading defers fetching an image or iframe until the visitor is close to scrolling it into view, so only what is actually looked at gets downloaded. In a browser it is one attribute: loading set to lazy.
Lossless Compression
Lossless compression makes a file smaller without losing anything: decompress it and you get the original bytes back exactly. PNG, ZIP, FLAC, gzip and brotli all work this way.
Lossy Compression
Lossy compression shrinks a file by permanently throwing information away. What comes back out is an approximation of the original, chosen so that the missing part is hard to notice.
Markdown File
Markdown is plain text with a light set of conventions — hashes for headings, asterisks for emphasis, hyphens for lists — that a converter turns into HTML. It is a source format, not a display format: a browser shows the raw characters, not a formatted page.
MP3 File
An MP3 file is compressed audio that discards sound the ear is unlikely to notice. It is the format most people mean by an audio file, and everything plays it.
MP4 File
An MP4 file is a container holding compressed video and audio together, most often H.264 video with AAC audio. It is the safest video file to put on a web page.
PDF File
A PDF is a fixed-layout document: the page carries its own fonts, images and exact coordinates, so it looks identical on every screen and printer. Browsers open one in a built-in viewer rather than saving it to disk.
Plain Text File
A plain text file holds characters and line breaks and nothing else — no fonts, no sizes, no embedded images. It is the format that survives everything, and the one that carries no clue about how to read its own bytes.
PNG File
A PNG file is a raster image that compresses without discarding any pixel data and supports a full alpha channel for transparency. It suits screenshots, logos and line art, and is the wrong choice for a photograph.
PPTX File
A PPTX is a PowerPoint deck stored as a ZIP archive: one XML file per slide, plus the layouts, masters and every embedded image and video. It is the heaviest of the Office formats and it cannot render in a browser.
Raster Graphics
Raster graphics are images stored as a grid of pixels, each holding its own colour. Photographs, screenshots and scans are all raster, and enlarging one beyond its native size makes it soft or blocky.
Responsive Images
Responsive images means publishing the same picture at several sizes and letting the browser pick the one that fits. The srcset and sizes attributes are how you describe that choice in HTML.
SVG File
An SVG file is an image written as XML markup, describing shapes and paths instead of a grid of pixels. Because the browser draws it at render time, one file stays sharp at any size.
Thumbnail
A thumbnail is a small copy of an image, generated separately and served in place of the full-size original wherever the display is small. It is a second file, not a smaller way of showing the first one.
Vector Graphics
Vector graphics describe a picture as shapes — points, lines, curves and fills — rather than as pixels. One file renders sharply at any size, because the shapes are drawn fresh at whatever resolution the device has.
Web Font
A web font is a typeface downloaded by the browser as part of the page, so the text renders in your chosen face rather than whatever the reader's device happens to have. It is an extra file on the critical path, and it decides whether text appears immediately or after a pause.
WebM File
WebM is an open, royalty-free video container holding VP8, VP9 or AV1 video with Vorbis or Opus audio. It usually produces a smaller file than an H.264 MP4 at the same quality.
WebP File
WebP is an image format from Google that handles lossy and lossless compression, transparency and animation in one file. At comparable visual quality it is typically 25 to 35 percent smaller than JPEG.
WOFF2
WOFF2 is the font format the web uses: a TrueType or OpenType font wrapped in a Brotli-compressed container built for delivery over HTTP. It is the only font format a modern site needs to serve.
XLSX File
An XLSX is an Excel workbook stored as a ZIP archive of XML parts, one per worksheet, plus a shared table of every text string in the book. Browsers cannot open one, so publishing a spreadsheet means publishing a download.
XML File
XML is a text format for structured data built from nested, named elements with attributes. It is strict about being well formed: one unclosed tag or one bare ampersand and a conforming parser stops rather than guessing.