Set the maxwidth for images (fix #48)

It didn't look pretty when images where larger than the viewport, and it
"broke" word wrap (because it stretched the phantom, and hence lines
wrapped further, see #34)

Sublime Text's minihtml only supports width and height attributes on
img tags, therefore, we have to determine the aspect ratio of the images
ourselves if we want to set a maxsize (so that we can set the height).

We use a hacky function copy pasted from stackoverflow to determine the
size of common format of images using std lib python.

resources/convertresources.py

@@ -1,9 +1,33 @@
 """ A small script to convert the images into base64 data """
 
+import struct
 from base64 import b64encode
 
-with open("404.png", "rb") as png, open("404.base64", "wb") as base64:
-    base64.write(b64encode(png.read()))
 
-with open("loading.png", "rb") as png, open("loading.base64", "wb") as base64:
-    base64.write(b64encode(png.read()))
+def get_image_size(fhandle):
+    """https://stackoverflow.com/a/20380514/6164984"""
+    head = fhandle.read(24)
+    if len(head) != 24:
+        return
+
+    # always going to be png
+    check = struct.unpack(">i", head[4:8])[0]
+    if check != 0x0D0A1A0A:
+        raise ValueError("invalid check (?)")
+
+    width, height = struct.unpack(">ii", head[16:24])
+    return width, height
+
+
+def make_cache(image_name):
+    with open("{}.png".format(image_name), "rb") as png, open(
+        "{}.base64".format(image_name), "wb"
+    ) as base64:
+        width, height = get_image_size(png)
+        png.seek(0)
+        base64.write(bytes("{}\n{}\n".format(width, height), encoding="utf-8"))
+        base64.write(b64encode(png.read()))
+
+
+make_cache("404")
+make_cache("loading")