Paul Hammant's Blog: Reducing Web-page Screenshot Size
A few days ago I updated a blog entry by adding a new screenshot of a StackOverflow page. I got to thinking about the size of that image, and that in 2016 we should be able to do better with a markup language, for such things, for faster page loads.
Here is the JPEG of the screenshot from the previous blog entry:
That was 190KB originally as a PNG, and 109KB as the JPEG after being transformed on my Mac.
A workflow for HTML screehshots.
In Chrome you can select bits and pieces of a page and paste them elsewhere. Most receiving destinations for that clipbaord action only accept the plain text, which is not what we want. Chrome though can accept the pasting of the actual HTML. Better yet Chrome:
- fixes the html to be balanced
- processes it to use inlined styles rather than CSS
- drops all JavaScript
At least it does as you’re pasting it into the “new email” dialog in Gmail on a PC/Mac. If you send it to yourself in Gmail you get to see a preview of what that looks like.
Now, in Gmail you can use “show original” to see the source for that. The thing you want is in the wmail twice - once as plain text (mobile clients prefer that) and once as HTML. That’s the one you want.
You’ll see it with a weird encoding, though:
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
Using a webapp at webatic.com you can turn that encoded HTML chunk back into something that’s more regular.
Your next problem is that anchors (hyperlinks) are still in the HTML. As you’re wanting a screenshot for a blog entry, you don’t want those. I just removed them with a regex find/replace operation in a decent editor (WebStorm for me). I also removed some classes that only Gmail needed, and left it at that.
With a final addition of “unstyle” as a class on the outmost div (the coresponding css is ‘all: revert;’) to get bootstrap out of the way, I pasted it into a markdown blog entry (Github-Pages Jekyll supports inlined HTML), and here it is:
| Type to find tags: |
The blog page is under 10K gzipped, including the screenshot, so that’s good.
My new problem is it doesn’t look pixel perfect. Perhaps it never could be perfect with a markup language rather than bitmap. But some basics like getting the height of rows correct would be nice. I suspect I could do some magic with viewports and getting the thing to scale to the container of my blog. That would get it closer to an ideal, but it is a lot of work.
I will also be annoying the DZone people who syndicate a lot of my blog entries. I think copy/paste is part of their workflow, and nothing about copying a html table into another CMS is going to be easy.
SVG, browser plugins/add-ons ?
Maybe SVG is a better markup for this than HTML, if a precise replication is needed. Maybe too it should really be a browser plugin, and a single operation.