Important MIME types for web developers

Mime types define the format of a document that you will typically encounter in web development. In this article let’s look at a few important mime types for web developers.

What does MIME stands for?

MIME is the short format of Multipurpose Internet Mail Extension. It is an RFC standard that defines the format and nature of documents. Not only document, even images, fonts, etc. They are also known as media types.

Who is responsible for defining Mime types?

The Internet Assigned Numbers Authority (IANA) is responsible for all official MIME types. It is a standard body formed by a group of smart people that manages and maintains the mime types. Let me try to draw an analogy. You might have heard about ECMA (European Computers Manufacturing Association) which defines JavaScript standards (ECMA-262). So IANA is something similar.

Basic structure of Mime type definition

type/subtype

Where do you use Mime types?

You will find mime type declarations in HTTP request and response headers. You will see something like below,

1. Request/Response headers

Content-Type: application/javascript

Content-Type: text/css

Content-Type: text/html

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/png

Full example of a response header (notice the content-type):

accept-ranges: bytes
age: 9
cache-control: public, max-age=0, must-revalidate
content-length: 599
content-type: application/json
date: Sun, 28 Jun 2020 17:32:11 GMT
etag: "280ea7447fc2b2fead9a3ed5fa838425-ssl"
server: Netlify
status: 200
strict-transport-security: max-age=31536000
x-nf-request-id: f524a793-387b-4034-9ef6-399de460103c-11991605

2. Submitting Form Data

You also use Mime type declarations for posting form data. An example below. You will specify the mime type inside the enctype attribute of the form element. You will usually use multipart/form-data for file uploads or binary content submission. It also works for submitting form fields.

<form action="/" method="post" enctype="multipart/form-data">
  <input type="text" name="description" value="some text">
  <input type="file" name="myFile">
  <button type="submit">Submit</button>
</form>

The Request header would look like,

Content-Type: multipart/form-data;

But for normal form field submission, you should be using application/x-www-form-urlencoded.

For application/x-www-form-urlencoded, the body of the HTTP message sent to the server is essentially one giant query string — name/value pairs are separated by the ampersand (&), and names are separated from values by the equals symbol (=). An example of this would be:

firstname=John&lastname=Doe&[email protected]

Alright, I hope you have some idea. Now let’s look at some important mime types for web developers.

Important Mime types for web developers

Here’s a table with the popular ones.