HTMLを画像に変換

コードのスクレイピングではなく、生きたページのスナップショット

Pico ImageのHTMLから画像へのツールは、貼り付けたHTMLマークアップやCSSを画像に変換するものではありません。URLを受け取り、そのアドレスをブラウザと同じように実際のレンダリングエンジンで開き、ページのレイアウト、Webフォント、画像の読み込みが終わるのを待ってから、その瞬間に画面に表示されているものをそのままキャプチャします。ソースコードの情報は一切保持されません。選択可能な要素も、リンクも、あとからコピーできるテキストもなく、あるのは完成した見た目の結果だけです。出力形式でJPGを選ぶと、キャプチャしたフレームを標準的な圧縮写真、つまりスマートフォンのカメラが生成するのと同じ種類のファイルにラスタライズします。SVGを選ぶと、同じレンダリング結果をベクターコンテナで包みます。デザインツールの中に配置したり、目に見える品質の劣化なしに別のサイズにスケールしたりする必要がある場合に便利ですが、そのSVGの中身は、選択してパスごとに編集できる個別のベクター図形の集合ではなく、あくまでレンダリングされたページそのものです。キャプチャされた画像の解像度は、自分のスクリーンではなくレンダリング用のビューポートに従うため、どのデバイスやウィンドウサイズでキャプチャしたかに関係なく一貫した結果になります。たまたま開いていたモニターに左右されない、再現性のある結果です。この処理全体がページの実際のレンダリング完了に依存しているため、現実的な制約もあります。サインインが必要なページは匿名の訪問者としてロードされ、その訪問者に見えるであろうもの、たいていはログインフォームが表示されます。有料会員限定の記事はペイウォールが表示されます。X-Frame-Optionsのようなレスポンスヘッダーや厳格なframe-ancestorsポリシー、あるいはヘッドレスブラウザを狙ったボット検出によって、埋め込みや自動化への抵抗を明示的に設定しているサイトは、実際のコンテンツの代わりにエラーや意図的に崩れたレイアウトを返すことがよくあります。キャプチャは1つのビューポート幅とページの全スクロール高さを反映するもので、複数の画面サイズには対応せず、スクロールやクリックのシミュレートも行いません。そのため、展開可能なセクション、ページ下部にある遅延読み込みの画像、カルーセルの後方のスライドなど、ユーザーの操作があって初めて表示されるコンテンツは、欠けていたり、レンダリング完了時点でたまたまその状態だったりすることがあります。