PDF → WebP 変換について
WebP はウェブのために設計された画像形式です。非可逆圧縮では、同程度の見た目の画質の JPG よりも少ないバイト数でページ画像を保存できるのが普通です。つまりページの表示が速くなり、訪問者のモバイルデータ通信量も減らせます。現在の主要なブラウザはすべて WebP を表示できます。
この変換ツールは、Mozilla のオープンソース PDF レンダラー pdf.js で PDF の選んだページを描画し、その結果をブラウザに WebP としてエンコードさせます。解像度（72・150・300 DPI）と画質を選べ、画質は高（92）が既定、中（80）は細部がわずかに柔らかくなるかわりにファイルをさらに小さくします。出力ファイルは catalog-p1.webp のような名前になり、複数ページは 1 つの ZIP ファイルで届きます。
ブラウザの対応状況：Safari では WebP を作成できません
WebP のエンコードはブラウザの機能ですが、Safari はこれを提供していないため、Safari ではツールがエラーメッセージを表示します。パソコンの Chrome、Edge、Firefox を使うか、対応するすべてのブラウザで動作する PDF → JPG 変換に切り替えてください。iPhone や iPad では、ほかのブラウザも基本的に Apple の WebKit エンジンで動いているため、同じ制限があると考えてください。Safari で WebP ファイルを開いて表示するのは問題ありません。できないのは作成だけです。
PDF → WebP 変換の使い方
- PDF を追加するこのページを Chrome、Edge、Firefox で開き、PDF をツールにドロップするか、ファイルを選びます。文書の各ページのサムネイルが表示されます。
- ページ、DPI、画質を設定する全ページを選択したままにするか、サムネイルをクリックしたり 4-6, 9 のように入力したりして絞り込みます。ウェブで使うなら、まずは 150 DPI・画質「高」から始めるのが無難です。
- WebP 画像を保存する「画像に変換」を押して、出力を保存します。1 ページだけなら .webp ファイルが 1 つ、複数ページなら 1 つの ZIP ファイルで届くので、サイトの画像フォルダに展開して使えます。
主な利用シーン
ダウンロードページでのプレビュー
PDF のマニュアル、メニュー、仕様書を配布しているなら、最初の 1〜2 ページを WebP で見せておくと、訪問者はダウンロード前に中身を確認できます。サムネイルなら 72 DPI、読めるプレビューなら 150 DPI で十分です。
ブログ記事やドキュメントサイトの図版
記事の中で PDF の図や書式を引用するなら、WebP にすればページ全体の容量を抑えられます。1 つの記事に何枚もページ画像を載せる場合、その差は積み重なります。
アプリや社内ポータルで使う軽い画像
レポートのページをダッシュボード、ナレッジベース、モバイルアプリで表示しているチームは、PNG で保管する代わりに WebP 版を使うことで、通信量と保存容量を節約できます。
ウェブページ用の解像度の選び方
オンラインで重要なのは、画像がどのくらいの幅で表示されるかです。A4 のページ（幅 8.27 インチ）を描画すると、72 DPI で幅 595 ピクセル、150 DPI で 1240 ピクセル、300 DPI で 2480 ピクセルになります。
- 72 DPI は、どのページかがわかれば十分なサムネイル、カード、小さなプレビューに使えます。
- 150 DPI（既定）なら、記事の本文欄によくある約 640 CSS ピクセルの幅で表示したとき、高密度のスマートフォンやノートパソコンの画面でもシャープに見えるだけのピクセル数があります。
- 300 DPI がウェブで必要になることはまれです。150 DPI の 4 倍のピクセル数になるので、情報量の多いグラフなど、訪問者が細かい文字を拡大して見る必要があるページだけに使いましょう。
ファイルサイズ、画質、透過
このツールの WebP 出力は非可逆圧縮なので、ふるまいは JPG とよく似ています。ファイルは小さくなり、画質「高」ではくっきりした輪郭のまわりがごくわずかに、「中」ではもう少し柔らかくなります。文字の多いページでも、150 DPI・画質「高」ならはっきり読めます。WebP の効果がいちばん大きいのは写真を含むページで、文字だけのページはどの形式でももともと軽く収まります。
各ページは白い背景の上に描画されるため、PDF 内の透明な部分は画像では白になります。タイトルや作成者などの文書のメタデータは引き継がれません。画像内の文字は訪問者が選択もコピーもできないので、重要な言葉は周囲の HTML や画像の代替テキストにも入れておきましょう。
壁に貼る大判の図表のような特別に大きなページは、ブラウザのキャンバスの上限である 1 辺約 8,000 ピクセルを下回るよう自動的に縮小されます。
代替画像を用意して WebP を配信する
現在使われているブラウザはすべて WebP を表示できます。ただ、非常に古いブラウザやメールソフトを使う人も想定されるなら、HTML の picture 要素で JPG の代替画像を用意しておきましょう。MDN の画像ファイルの種類と形式のガイドでは、WebP を JPG、PNG、AVIF と詳しく比較しています。
WebP が適さない場合
- 添付ファイルやアップロード用フォーム。メールソフト、オフィスソフト、公的機関の申請サイトの中には、今も JPG や PNG を前提としているものがあります。そうした相手には JPG を送りましょう。
- 印刷。プリンターやレイアウトソフトは可逆圧縮のファイルのほうが扱いやすいので、PDF → PNG 変換で 300 DPI で描画してください。
- 小さな PDF にしたい。文書のまま軽くしたい場合は、PDF 圧縮なら検索できるテキストも保たれます。
- 数ページを PDF として公開したい。訪問者に画像を見せるのではなく章ごとにダウンロードしてもらいたいなら、PDF 分割で切り出してください。
- 暗号化されたファイル。パスワードを求められる PDF は、先に PDF パスワード解除にかける必要があり、そのパスワードを知っている必要があります。
受け取った WebP 画像を、もっと広く使える形式にしたい場合は、WebP → JPG 変換で変換できます。
処理はローカルで完結
文書がサーバーの目に触れることはありません。PDF を開き、描画し、WebP にエンコードするのはお使いのブラウザで、結果はそのまま端末に保存されます。ファイルのデータがタブの外に出ていないことをご自身で確かめるには、確認手順に沿って操作してください。