Important MIME types for web developers

Joseph Khan
Level Up Coding
Published in
3 min readJun 28, 2020

--

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 stand 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 documents, 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/javascriptContent-Type: text/cssContent-Type: text/htmlAccept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/png

A 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.

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=john@gmail.com

Alright, I hope you have some ideas. 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.

https://josephkhan.me/important-mime-types-for-web-developers/

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.

Say Hi to me on Twitter,

https://twitter.com/joseph_rialab

Originally published at https://josephkhan.me on June 28, 2020.

--

--

Engineering Manager | Author & Speaker. I work with one of the largest OTA (Online Travel Agencies) in the Middle East https://josephkhan.me/