Important MIME types for web developers

0 0
Read Time:3 Minute, 21 Second

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


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


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>

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.

text/plain Represents text files. This is the default for text files. For example CSS, JavaScript files are text based. So if you do not explicitly specify application/javascript or text/css it will fallback to text/plain
text/css Represents CSS files. So for all CSS files that your web application uses for styling has to have text/css or else the browser will not understand the file and your website will not have any styling.
text/javascript JavaScript files should always be served using this MIME type. But modern browsers also support application/javascript
text/html For HTML documents. For eg. Nginx server serving HTML content sets this mime type by default.
application/javascript For Javascript files.
application/json For JSON files and JSON content. For eg. REST API response. Or when sending JSON data in POST request body.
image/jpeg For JPEG images. Extensions include .jpg, .jpeg
image/png For PNG images. Extension is .png
image/svg+xml For SVG images. Extension is .svg
video/ogg A video file, possibly with audio, in the Ogg container format
font/woff, font/ttf, font/otf For font files. For eg. if you are using custom Google fonts then they will have these MIME types.

0 %
0 %
0 %
0 %
0 %
0 %