There is a format called 'mhtml' that inlines assets

Last week I attended my first IndieWebCamp in Berlin. In case you don't know IndieWeb on their site is written that IndieWeb is "a people-focused alternative to the 'corporate web'".

But what does that mean? It focuses on three things:

• owning your own data
• connecting of websites without third parties
• giving control to people doing things in the web

These three points are huge so when you're interested in learning more check their site. IndieWeb has very interesting ideas and technologies that are definitely worth a look.

But back to topic... at the event I learned about MHTML. What is that?

MTHML stands for MIME Encapsulation of Aggregate HTML Documents and it's purpose is to archive a particular site. The idea of this format is to include all needed resources in a single document so that you really have a complete state when saving it as .mhtml. This way you can e.g. document the progress or the evolution of a site quite nicely.

I gave it a shot and what I first discovered is that .mthml files are actually saved as HTML emails which is interesting.

From: <Saved by Blink>
X-Snapshot-Version: 1.0
X-Snapshot-Title: =?utf-8?Q?Stefan's web dev journey?=
X-Snapshot-Content-Location: https://www.stefanjudis.com/
Subject: Stefan's web dev journey
Date: Mon, 12 Nov 2017 13:17:49 -0000
MIME-Version: 1.0
Content-Type: multipart/related;
	type="text/html";
	boundary="----MultipartBoundary--YzyWG99RMsqjUz8wY8LIZ2io3lmh8mmIKJAd7bejyV----"

------MultipartBoundary--YzyWG99RMsqjUz8wY8LIZ2io3lmh8mmIKJAd7bejyV----
Content-Type: text/html
Content-ID: <frame-13493-e50f0bd6-1ad1-433e-bfa0-183a29bb6670@mhtml.blink>
Content-Transfer-Encoding: quoted-printable
Content-Location: https://www.stefanjudis.com/

&lt;!DOCTYPE html&gt;&lt;html data-n-head=3D"lang" lang=3D"en" class=3D"gr__stefanju=
dis_com"&gt;...&lt;/html&gt;

Going further I checked how images are included in the document.

<!-- I have no idea how this works -->
<img src=3D"https://images.contentful.=
com/f20lfrunubsq/qZrrGql6VwaoE2YU8CUuE/a4276082432402bd90933ab3de335bf7/sto=
ck-photo-227882431.jpg?w=3D150" alt=3D"Stefan Judis" class=3D"c-person__ima=
ge" width=3D"142" height=3D"142">

I expected images to be inlined in the image elements but they are not. You can find the images inlined at the end of the file.

------MultipartBoundary--YzyWG99RMsqjUz8wY8LIZ2io3lmh8mmIKJAd7bejyV----
Content-Type: image/jpeg
Content-Transfer-Encoding: base64
Content-Location: https://images.contentful.com/f20lfrunubsq/qZrrGql6VwaoE2YU8CUuE/a4276082432402bd90933ab3de335bf7/stock-photo-227882431.jpg?w=150

/9j/4AAQSkZJRgABAQEASABIAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdC...

I don't really understand how this works technically but I think it's good to know that you can safe a complete website in a single document. Maybe I start archiving my own site every month? :D

If you want to start using .mhtml check the Wikipedia entry. It describes how you can use it in your browser of choice.