What the Heck Are MIME Types?

There is a good chance that you have heard of the term "MIME types" (no, not MEME types... MIME types). What are those?

MIME stands for Multipurpose Internet Mail Extensions that defines a media type. It is a specification standard to describe the format of a document file.

Why Did We Use MIME Types?

The internet revolves around client-server interactions. Client sends a HTTPS request. Server receives the request and sends a responds back to the client with some data. Client receives the response data, processes it accordingly, and displays the rendered product to the user. Repeat.

Question: how do client and server tell each other how to interpret those data?

If the server sends a HTML page, the client needs to know that it is a HTML page. You don't want your browser to process a HTML file like a Stylesheet file!

This is where the MIME type comes in. A MIME type is a way for the server to inform the client the type of the file being sent.

For example, you're bored at work so naturally you need to see pictures of cute cats. You found a URL for cute cat photos. Your client tells the server of that URL, "Hey server, GET me everything I need for the page https://example.com/super-cute-cats!".

Let's say that the server sends back a HTML file and a CSS file. If you check the HTML file, in the HTTP response header, it would say Content-Type: text/html. If you check the CSS file, it would say Content-Type: text/css. These "content-type" headers are examples of MIME types. The types text/html and text/css are standards. When the client receives them, they'll know what to do.

MIME Type Structure

The basic structure of a MIME type is the type and the subtype, separated by a slash. There is no white space between them.

type/subtype

Sometimes you may see a parameter with the following syntax:

type/subtype; parameter=value

For example: content-type: text/css; charset=UTF-8.

MIME Type Examples

You can actually look it up yourself! Open up the Devtool and go to the Network tab. Refresh the page. You should see a number of files being downloaded (HTML document, Stylesheet documents, images, Javascript files, etc.). Click on any of them. Go to the response headers section. You should see a line that says Content-Type. See what type of MIME type that file has.

There is a MIME type for video, font, text, audio, even application, and more. Here are some examples of common MIME types:

application/zip
application/json
audio/aac
audio/mpeg
font/woff
font/woff2
image/tiff
image/png
image/jpeg
text/plain
text/javascript
text/css
video/mpeg

For a list of all discrete types, check out the Mozilla page on MIME types.