PDF ページを Web サイト用の画像に変換するには、一般的な DPI 設定ではなく、特定のピクセル寸法が必要です。 300 DPI で変換された PDF ページは、幅が数千ピクセルで、Web サイトのレイアウトよりもはるかに大きい画像を生成します。その画像を Web サイトにアップロードすると、帯域幅が無駄になり、ページの読み込みが遅くなります。 Web サイトのレイアウトに必要な正確なピクセルサイズで変換すると、迅速に読み込まれて鮮明に表示される画像が生成されます。 Web 用のPDF から Image への変換は、画像がページ上で占める特定の場所に出力サイズを一致させることです。
重要なポイント
ウェブサイトの画像の寸法は、インチではなくピクセルで測定されます。 PDF ページを正しいピクセル サイズに変換するには、Web サイト上の画像の最大表示幅を決定し、ページのアスペクト比を維持しながら変換出力をその幅に設定します。標準的な Web サイト コンテンツの幅は、モバイル最適化レイアウトの 720 ピクセルから全幅のデスクトップ レイアウトの 1920 ピクセルまでの範囲です。これらの特定の寸法で変換すると、不必要に大きくなったり、残念なほどぼやけたりすることのない画像が生成されます。
Web サイトに必要な正確なピクセル サイズを決定する
画像の自動サイズ変更機能を備えたコンテンツ管理システムを使用している Web サイトの場合は、表示サイズよりも高い解像度で変換し、CMS にサイズ変更を処理させます。 1 回のアップロードで複数のサイズを生成する CMS には、生成される最大サイズをサポートするのに十分な大きさのソース画像が必要です。 CMS で生成される最大サイズの 2 倍で変換すると、生成されるすべてのバリアントが鮮明になります。
レスポンシブ Web サイトの場合、画面サイズが異なると画像の表示幅が変わります。画像が表示される最大幅で変換します。これは通常、コンテンツ画像のデスクトップ ブレークポイント 1200 ～ 1400 ピクセルです。ブラウザは、小さな画面に合わせて画像を効率的に縮小します。大きな変換による追加のファイル サイズは、縮小バージョンが表示されるモバイル ユーザーを含むすべてのユーザーに提供されます。帯域幅に依存する実装の場合は、レスポンシブ画像マークアップを使用して、異なるブレークポイントで異なる画像サイズを提供します。
Web サイトのコンテンツ領域の幅をピクセル単位で測定します。ブラウザで Web サイトを開き、コンテンツ領域を右クリックし、「検査」を選択して開発者ツールを開きます。計算されたコンテンツ コンテナの幅がボックス モデル図に表示されます。これは画像の最大幅です。 Web サイトが応答性が高く、さまざまな画面サイズに適応する場合は、最も幅の広いブレークポイント (通常は幅 1200 ～ 1400 ピクセルのデスクトップ レイアウト) を選択します。この幅の画像はデスクトップでは鮮明に見えますが、タブレットや携帯電話では比例して縮小されます。
イメージ ギャラリーとライトボックスの場合は、全画面表示をサポートするためにより高い解像度で変換します。グリッド レイアウトで幅 400 ピクセルで表示されるギャラリー画像を全画面表示するには、クリックしたときに幅 1600 ピクセルに拡大する必要がある場合があります。全画面表示サイズで変換すると、拡大した画像も鮮明になります。グリッド ビューは、ブラウザーで適切に処理できる縮小バージョンを読み込みます。ギャラリーの表示サイズで変換し、同じ画像を全画面表示に提供すると、拡大表示がぼやけてしまいます。デフォルトのビューだけでなく、Web サイトの最大表示シナリオを考慮してください。
正確なピクセルサイズで PDF ページを変換
テキストと画像の両方を含む PDF ページの場合、表示幅の 2 倍で変換すると、高 DPI 画面でもテキストの鮮明さが維持されます。 1x ディスプレイ幅でレンダリングされたテキストは、Retina ディスプレイではわずかに柔らかく見えることがあります。これは、文字フォームの細かいストロークが余分なピクセル密度の恩恵を受けるためです。 2x 変換によりファイル サイズは約 2 倍になります。これは、テキストの読みやすさが優先されるドキュメント ページにとっては価値のあるトレードオフです。主に写真が含まれるページの場合、目は写真コンテンツの解像度の違いにあまり敏感ではないため、1x 変換で十分です。
PDF から画像への変換ツールを開き、出力サイズの設定を探します。一部のツールでは、幅 1200 ピクセルなどのピクセル寸法を使用します。 DPI と物理ページ サイズを組み合わせて使用するものもあります。ツールが DPI を使用する場合は、ターゲットのピクセル幅をインチ単位のページ幅で除算して、必要な DPI を計算します。レターサイズのページの幅は 8.5 インチです。幅 1200 ピクセルの画像を作成するには、DPI を 1200 割った 8.5、つまり約 141 DPI に設定します。 141 DPI を入力すると、Web サイトに必要な正確な 1200 ピクセルの幅が生成されます。
画像が記事やブログ投稿に埋め込まれている デジタル パブリッシング の場合、高 DPI Retina および同様のディスプレイをサポートするために、ディスプレイ幅の 2 倍で変換します。幅 800 ピクセルの画像を表示するコンテンツ領域には、幅 1600 ピクセルのソース画像が必要です。ブラウザは 2x 画像を高 DPI 画面に提供し、それを 800 ピクセルの表示領域に縮小して、800 ピクセルのソース画像よりも鮮明なテキストとグラフィックを生成します。 2x 変換によりファイル サイズは 2 倍になりますが、最新の画面では明らかに品質が向上します。 WukongPDF の PDF から画像へのコンバーターはピクセル幅を直接入力として受け入れるため、ターゲットの幅を入力すると、ツールが対応する DPI を自動的に計算します。
Web サイト配信に適した画像形式を選択する
| フォーマット | 最適な用途 | 圧縮 | 注記 |
|---|---|---|---|
| PNG | テキスト、グラフ、線画 | ロスレス | 大きなファイル、鮮明なテキスト、透明度のサポート |
| JPEG | 写真、スキャンしたページ | ロッシー | 小さいファイル、写真のようにリアル、透明度なし |
| WebP | 最新の Web サイト、すべてのコンテンツ | 両方 | 最適な圧縮。非常に古いブラウザではサポートされていません |
| AVIF | 最先端のウェブパフォーマンス | 両方 | 最小のファイル、PDF 変換用の限られたツールのサポート |
ほとんどの PDF から Web サイトへの変換では、WebP が品質とファイル サイズの最適なバランスを提供します。一般的なドキュメント ページの幅 1200 ピクセルの WebP 画像は、視覚的に同一の品質を維持しながら、同等の PNG よりも 40 ～ 60% 小さくなります。 Web サイトが WebP をサポートしていない場合、テキストを含むドキュメント ページには PNG が次善の選択であり、写真が含まれるページには 85 ～ 90 パーセントの品質の JPEG が次善の選択です。
Web サイト ギャラリー用に複数ページの PDF をバッチ変換
数百ページにわたる非常に大きな PDF の場合は、バッチ変換を 50 ページのグループに分割します。一部の変換ツールにはメモリ制限があり、非常に大きなバッチでエラーが発生します。より小さなグループで処理すると、合計時間は同じですが、347/400 ページで変換が失敗し、バッチ全体の再起動が必要になるイライラを回避できます。
Web サイトの画像ギャラリーとなる複数ページの PDF の場合は、すべてのページを 1 回のバッチ操作で同じピクセル寸法に変換します。このバッチでは、ギャラリー レイアウトに均一に表示される、一貫したサイズの画像が生成されます。ページ番号を含む一貫した命名規則に従って、出力ファイルに document-page-01.webp、document-page-02.webp などの名前を付けます。この命名規則は、連続番号が付けられた画像ファイルを想定するギャラリー プラグインやカスタム JavaScript と簡単に統合できます。
変換後、画像最適化ツールを使用して画像を実行すると、目に見える品質の低下なしにファイル サイズがさらに削減されます。 ImageOptim、TinyPNG、Squoosh などのツールは、PDF コンバーターでは適用されなかった追加の圧縮を適用します。 2 番目の圧縮パスでは、PNG および JPEG ファイルのファイル サイズをさらに 20 ～ 40 パーセント削減できます。 50 ドキュメント ページのギャラリーの場合、累積的な帯域幅の節約は、Web サイトのホスティング コストと訪問者のページ読み込み時間の両方にとって意味があります。
よくある質問
Web で使用するために PDF ページを sRGB カラースペースの画像に変換する必要がありますか?はい。 sRGB カラー スペースは Web ブラウザの標準カラー スペースであるため、ほとんどの Web サイト画像は sRGB カラー スペースである必要があります。 sRGB に変換すると、さまざまなブラウザーやオペレーティング システム間で一貫した色の表示が保証されます。 PDF が CMYK または Adobe RGB カラースペースを使用している場合、sRGB への変換によりわずかなカラーシフトが発生する可能性があります。変換された画像を公開する前にブラウザでプレビューして、色が受け入れられることを確認します。
Web サイトがレスポンシブで、画像の表示幅が画面サイズに応じて変化する場合はどうなりますか?
画像が表示される最大の表示幅 (通常はデスクトップ ブレークポイント) で変換します。ブラウザは、小さな画面に合わせて画像を自動的に縮小します。携帯電話で 400 ピクセルで表示された幅 1200 ピクセルの画像は、拡大ではなく縮小されているため鮮明に見えます。デスクトップに最適化された変換による追加のファイル サイズはすべてのユーザーに提供されますが、これは解像度範囲をすべてサポートするためのトレードオフです。帯域幅に依存する実装の場合は、異なるブレークポイントで異なる画像サイズを提供する応答性の高い画像マークアップを使用します。
PDF ページを背景が透明な画像に変換できますか?
PDF ページ自体に背景がない場合のみ。ほとんどの PDF ページには明示的な白い背景があり、画像内の白い背景として変換されます。背景が透明な画像を作成するには、変換する前に PDF からページの背景を削除します。これには、ページ コンテンツ ストリームから背景オブジェクトを削除できる PDF エディターが必要です。作成された PDF ページの背景は透明になり、PNG に変換すると透明度が維持されます。
一般的に推奨されているように、Web 用に PDF ページを 72 DPI の画像に変換する必要がありますか?
72 DPI の推奨は時代遅れです。これは、ほとんどのコンピューター モニターの物理ピクセル密度が 1 インチあたり約 72 ピクセルであったときに始まりました。最新のモニターのピクセル密度は、1 インチあたり 100 ～ 200 ピクセル以上です。 PDF ページを 72 DPI で変換し、最新のモニターに 100% ズームで表示すると、目に見えて柔らかい画像が生成されます。固定 DPI の代わりに、上記のピクセル ディメンション方法を使用します。正しい DPI とは、特定の Web サイトのレイアウトに適切なピクセル寸法を生成するものです。