EPUB画像が小さいのはなぜ?元画像と表示を見直す3点

epub 画像 小さいと感じたときは、画像ファイルが入っているか、本文から参照されているか、Readerがどの幅で描画したかを分けて調べます。ZIP内に画像があっても画面では小さく見えることがあり、逆に大きく見えても参照切れを含む別ページかもしれません。一つの見た目だけで原因を決めないことが出発点です。

STUDIO-453の固定標本では、元画像は128×128ピクセルです。三章と表紙を持つEPUBを生成し、表紙を含む画像資源4件、XHTMLの画像参照4件、alt属性4件、欠落0件、valid=trueを取得しました。これはパッケージが画像を収録し参照できることの証拠です。Readerの表示幅、余白、拡大率は測っていないため、「小ささが解消した」とまでは断定しません。

まず元画像の128×128を確認する

検証にはRune Studioのアプリアイコンをコピーした合成PNGを使いました。sips -g pixelWidth -g pixelHeight image-1.pngの出力はpixelWidth: 128、pixelHeight: 128です。画素数が明確なので、表示が小さく感じられたときに、原寸の制約とReader側の縮小を切り分けられます。

本番画像でも、ファイル名だけで判断せず、ピクセル寸法、ファイルSHA、用途を記録します。印刷用の物理寸法やFinderのサムネイルは、EPUB内の表示寸法と同じではありません。まず入力そのものが想定した解像度かを確定し、差し替えるなら別SHAの画像として扱います。

三章の参照と表紙を別々に数える

固定原稿はchapter-1.mdからchapter-3.mdまでの三章です。各章に画像記法を一つ置き、さらにcover.pngを表紙として設定しました。生成物を展開すると、p001.png、p002.png、p003.png、cover.pngの画像資源が四件あります。本文三件と表紙一件という内訳です。

「画像が四つある」だけでは十分ではありません。原稿の相対パス、OPF manifestの画像項目、XHTMLのsrcをつなげます。重複コピーされた画像でも、章ごとの参照先が欠けていれば表示されません。表紙だけが見える状態を、本文画像も正常だと読み替えないことも大切です。

4資源・4参照・4つのaltを対応させる

再展開したEPUBにはXHTML側のimg参照が四件ありました。三つの章はそれぞれp001.png、p002.png、p003.pngを参照し、表紙ページはcover.pngを参照します。altも四件です。章1と章3はSTUDIO-453 図1、章2はSTUDIO-453 図2、表紙は書名を持ちます。

ここでは件数だけでなく、一対一の対応を見る必要があります。同じ画像が意図的に再利用されても、生成後の資源名は章ごとに変わる場合があります。XHTMLの参照先がmanifestに存在し、実体ファイルがZIPにあり、altが空でないことを表にします。今回の固定出力では欠落0件でした。

ZIPが完全でも表示幅とは別問題

生成EPUBはstudio-453-260903.100000.epub、SHA-256はb0609cf55208c24b3aa27b7c82a3d274d9c2a79e7b1f700efff84583a1f47458です。ZIPには16エントリがあり、保存後のローカル検査はvalid=true、issues=[]でした。この結果は、調べたパッケージに参照切れがないことを示します。

しかし、128ピクセルの画像がReaderで何CSSピクセルに描かれたか、本文領域の何パーセントを占めたか、左右余白が何ピクセルだったかは記録されていません。パッケージ完全性と表示寸法を混同しないでください。前者が合格しても、後者は未実測のままです。

小さく見えるときの三つの確認点

第一は元画像です。128×128が用途に対して小さいなら、同じ構図でより大きな素材を用意し、別ファイル名とSHAで差し替えます。第二は参照です。対象ページのimg src、manifest項目、ZIP内実体をたどり、意図した画像が選ばれているかを確認します。第三は表示環境です。Reader名、版、端末、画面方向、文字サイズ、余白、拡大操作を固定します。

この順なら、解像度不足をCSSだけで隠したり、Readerの余白を参照切れと誤認したりしません。画像を変更した後は、同じEPUBを上書きせず別名で生成します。四資源、四参照、四alt、欠落0件を再確認したうえで、表示比較へ進みます。

参照切れと表示の小ささは別々に復旧する

画像が表示されない場合は、まず構造障害として扱います。失敗EPUBを保存し、欠けたsrc、manifestのhref、実体パスを特定します。原稿の画像記法または素材配置を直して再生成し、欠落0件へ戻します。Readerで拡大して見えるようになっても、参照切れの復旧にはなりません。

画像は表示されるが小さい場合は、パッケージを壊さず視覚試験を追加します。同じEPUB SHAを二つのReaderで開き、表示領域の幅、画像の描画幅、余白を記録します。必要なら高解像度版を別のEPUBとして作り、入力寸法と描画幅を比較します。失敗の層を分ければ、不要な原稿変更を避けられます。

完了票に測定済みと未実測を並べる

今回の合格票に書けるのは、入力128×128、三章と表紙、画像資源4、XHTML参照4、alt 4、欠落0、ローカルvalid=trueです。EPUB SHAも併記します。これらは保存済みファイルを再展開すれば、別の担当者が同じ値を確認できます。

未実測欄にはReaderの描画幅、本文幅に対する割合、余白、拡大率、端末方向を残します。ここが空欄の間は、表示の小ささが改善したとは判定しません。まず元画像、次に参照、最後に表示環境。この三点を同じ証拠欄へ押し込まず、別々の値として渡すことで、画像が小さく見える原因を安全に絞り込めます。