HTMLをPNGに変換

PNGは1996年からW3C勧告となっている形式で、可逆圧縮を使うため、14 pxの本文のアンチエイリアスがかかった輪郭、1ピクセルの表の罫線、シンタックスハイライトされたコードもそのまま残ります。開発者がバグ報告にPNGを添付し、デザイナーがレビューで共有するのはこのためです。ぼやけた縁がCSSの問題なのか圧縮ノイズなのかと迷う必要がありません。

代償はファイルサイズです。文字とベタ塗りでできたページはよく圧縮できますが、写真だらけのページはそうはいきません。細部の鮮明さよりサイズが重要なチャットやメールに載せるなら、JPGのほうがファイルは小さくなります。ドキュメント、リリースノート、ダッシュボード、スタイルガイドには、PNGが無難な標準の選択です。

レイアウトを決めるのは幅です。HTMLには固定のページサイズがなく、同じファイルでも1280 pxなら3カラムのデスクトップ表示、390 pxなら1カラムに積み重なった表示になります。コンバーターは、320〜3840 pxの範囲で入力したHTMLページの幅でページをレイアウトし、先頭からフッターまでをキャプチャします。

通常の.htmlファイルは、cssフォルダ内のスタイルシート、元のサーバー上の画像、フォントサービスのフォントなど、別の場所にあるものに依存していることがよくあります。それらが見つからないと、ページはスタイルのない、既定の書体のテキストに戻ってしまいます。ChromeやEdgeで「Webページ、単一ファイル」として保存すると、スタイルと画像をひとまとめにした.mhtmlファイルができ、これが最も確実なアップロード用ファイルです。

Webフォントも同じルールです。@font-faceで宣言したフォントは、そのファイルにアクセスできる場合にのみ読み込まれ、自分のパソコンにしかないフォントは似たフォントに置き換えられます。正確な書体が重要な場合は、フォントを埋め込むか、結果を確認してから送ってください。

幅を固定しておくと、レポートを毎週キャプチャしたものを並べて比較しやすくなります。印刷用などで結果を選択可能なテキストのままにしたい場合は、代わりにHTMLをPDFに変換を使ってください。