Subscribe to get my new tutorials in your inbox.

Important MIME types for web developers

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.

text/plainRepresents 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/cssRepresents 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/javascriptJavaScript files should always be served using this MIME type. But modern browsers also support application/javascript
text/htmlFor HTML documents. For eg. Nginx server serving HTML content sets this mime type by default.
application/javascriptFor Javascript files.
application/jsonFor JSON files and JSON content. For eg. REST API response. Or when sending JSON data in POST request body.
image/jpegFor JPEG images. Extensions include .jpg, .jpeg
image/pngFor PNG images. Extension is .png
image/svg+xmlFor SVG images. Extension is .svg
video/oggA video file, possibly with audio, in the Ogg container format
font/woff, font/ttf, font/otfFor font files. For eg. if you are using custom Google fonts then they will have these MIME types.

References

Official RFC Standard for Mime types – RFC6838

If you want me to add any other to the list, give me a shoutout.

Cheers!


If you enjoyed this post and want similar articles to be delivered to your inbox directly, you can subscribe to my newsletters. I send out an email every two weeks with new articles, tips & tricks, news, free materials. No spamming, of course.

Write a Comment

Your email address will not be published. Required fields are marked *