前提
画像ファイルにはラスタ形式とベクタ形式があります．
ラスタ形式はピクセル単位で画像データを管理しているため，拡大するとギザギザしてきます．PNG や JPEG などはラスタ形式です．
ベクタ形式は「座標 (10, 20) から座標 (60, 20) に直線を引く」みたいな感じで文字や図形を表現しているため，拡大しても綺麗なままです．SVG や EPS などはベクタ形式です．
PDF は基本的にベクタ形式ですが，ラスタ形式の画像を埋め込むことも可能です．
(と思っているのですが，画像形式の仕様について特別詳しいわけでないので，間違っていたら教えてください．)
やりたいこと
Web ページをベクタ形式で保存したいです．普通の方法でスクリーンショットを撮るとラスタ形式になってしまいます．ラスタ形式は特に印刷すると汚くなってしまいます．
上述の通り，PDF はベクタ形式です．よって，ブラウザの印刷機能を使用して，プリンタの代わりに「PDF に保存」を選んであげれば Web ページをベクタ形式で保存できます．
困ったこと
一部のサイトは印刷を試みるとデザインが乱れてしまいます．これは
- 画面表示用のデザインが適用されなくなり，
- 印刷用のデザインが適用されるようになる
からです．
対処方法
まず，Web ページを保存します．今回は Save Page WE という Google Chrome の拡張機能をお借りしました．画像をデータ URI スキームに変換したり CSS を埋め込んだりして，Web ページを単一の HTML ファイルにして保存してくれます．かなり精度が良かったです．
これで所望の Web ページの単一 HTML ファイルを手に入れたら，次のようにファイルの中身の置換を行います．
-
@media screen→@media all -
@media print→@media tv
Web ページのデザインを表現する CSS において，@media screen は画面用のデザインを指定することを，@media print は印刷用のデザインを指定することを，それぞれ意味します．そこで，画面用のデザインがすべての環境で適用されるように，そして印刷用のデザインをテレビ画面 (あるいはプロジェクタ用の projection とか，なんでも OK) でしか適用されないように修正します．
これで，画面上の見た目を保ったまま，Web ページを印刷してベクタ形式で保存できます．
なお，あるページでは @media only screen とかいうのもありました．上記の置換処理では漏れているメディアタイプ指定もいろいろあると思いますので，うまくいかなかったら @media で検索するなどして原因を探してみてください．