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?
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
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,
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:
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/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/html||For HTML documents. For eg. Nginx server serving HTML content sets this mime type by default.|
|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.|
Official RFC Standard for Mime types – RFC6838
If you want me to add any other to the list, give me a shoutout.
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.