Q. 拡大すると画像が粗く、文字が潰れる

ブックのテキストが細かい場合、どうしても文字が潰れたり、見難くなる場合があります。
拡大時に粗くなる、もしくは拡大時は正常だが標準画像の際に粗くなる/ぼやけて見える場合の対処方法をご紹介いたします。

【基本情報】

ebook5では、PDFをブック形式に変換する際に以下の3種類の画像データを自動作成しています。

・「標準で表示される画像」(medium)
・「拡大時の画像」(large)
・「ページ一覧時に表示されるサムネイル画像」(small)

 
上記をふまえた上で以下をご参照ください。

【対処方法1】元PDFとブック化時の画質の差を減らす

拡大時の画像は標準時の画像を引き延ばすため、小さなテキストは文字が潰れて見えることや、画質選択画面で元PDF画像のサイズよりも大きなサイズ(高画質)でアップロードすると画像が粗く表示されることがあります。

【高画質ブック】 【中画質ブック】 【低画質ブック】
拡大画像
(長辺最大)
3,000px 2,000px 1,600px
通常画像
(長辺最大)
960px 640px 640px
サムネイル
(長辺最大)
100px 100px 100px

拡大アイコンを押す前の状態は、上記の中の「通常画像」にあたります。
ロード時間を少なくスムーズに全体像を表示させ、気になる部分は拡大をするということを前提としているため、通常画像は詳細に綺麗に表示させることよりも、素早く表示させることを優先としております。
よって、通常画像は拡大ボタンを押した後の画像よりもぼやけて見えることがございます。

ブック化する際に高画質を選んだ場合ページの最大長辺(見開きではなく単ページを基準)は3,000ピクセルになります。
元のPDFの最大長辺が2,000ピクセルだが高画質でアップロードすると引き伸ばされて画質が低下します。
元のデータにより近いピクセル数を選択していただくと変換時に画質が低下しにくいため、この例の場合は元PDFを最大長辺3,000ピクセルで作成していただくか、中画質でアップロードすると最適な状態となります。

また、他の改善例として、
・フォントを変更する
・アウトライン化する(3,000ピクセル以上の画像データは画質の低下が少ないため。画像のためテキスト検索はできなくなります。)
という方法もあります。

【対処方法2】高画質を最初に表示する

《外部サーバー公開機能を使用されていて、「リソースファイルをダウンロード」にチェックを入れている方限定》

上記をふまえた上で行う、少し高度な作業です。
外部サーバー公開機能を利用して「リソースファイルをダウンロード(開発者向)」にチェックを入れると、画像ファイルも含めてダウンロードをすることが可能です。

ダウンロードしたデータの「contents」>「image」>「book」内に画像用フォルダがあり、「large」が拡大画像用の画像が入っているフォルダ、「medium」「small」がそれぞれ通常画像用、サムネイル用です。
「large」内に入っている画像を「medium」内にコピーをする(medium画像を置き換える)と通常画像が拡大画像と同じ画質になります。
この編集済のファイルを外部サーバーにアップロードしていただくことで画質が改善できる可能性はありますが、高画質になった分、表示速度が遅くなる可能性もございます。

※リソースファイルについては以下に詳細が記載されております。
開発者向けの内容のため、誤った操作を行うと不具合が生じる可能性があること、リソースファイルの改変により生じた不具合についてはサポート対象外となる可能性がございます。
予めご了承の上、慎重に作業をお願いいたします。

参考リンク:外部サーバー公開機能設定リファレンス


【対処方法3】元のPDFのサイズを揃える(元PDFのサイズがバラバラな場合)

後からページの追加などを行った際に、アップロードした元PDFデータのサイズと既にアップロード済のデータのサイズに違いがあり、拡大用に生成された画像の画質がページごとに異なってしまうことがあります。
解決策は2通りあります。

【対処方法3-解決策A】全体を1つのPDFにまとめて再度アップロードする
アップロード済のデータと、追加したデータのサイズが異ることで問題が発生している場合は、すべてのPDFを1つのファイルにしてアップロードしなおすことで改善することがあります。
アップロード元のPDFを統一する作業をしてから再度アップロードをしていただくことを推奨いたします。
元PDFの統一作業が難しい場合は、以下の方法でブックを一度ダウンロードしてから再度アップロードすることをお試しください。
ブック画面からダウンロードしたPDFは全てのページが同一サイズになっています。
(※買切タイプをご利用の場合は以下操作は行えないため、お手持ちの元PDFの統一作業をお願いいたします)

《ブックのPDFのダウンロード方法》
1.管理画面の「詳細」をクリックし、「デザイン」タブから左側メニューの「全ページダウンロード」を「許可」に変更します。
2.変更後に上部に表示される「保存」をクリックし、保存完了後にプレビュー画面もしくは「ブックを確認」から公開されているブックを開きます。
3.左上の三本線メニューボタンを開いてダウンロードボタンをクリックします。
4.「全てをダウンロードする」を選択するとブック全体のが1つのPDFになったデータがダウンロードされます。

 
【対処方法3-解決策B】拡大画像を作りなおす
こちらは買切タイプ、またはASPタイプで外部サーバー公開機能をご利用の方で、「リソースファイルをダウンロード(開発者向)」にチェックを入れている方のみの情報です。

《事前準備》
・買切タイプの方は制作ツール画面からブックの「詳細」をクリック、編集画面の「ダウンロード」からzipファイルをダウンロードをして解凍しておきます。
ASPタイプで外部サーバー公開機能をご利用の方は「リソースファイルをダウンロード(開発者向)」にチェックを入れてファイルをダウンロードして同様に解凍します。

1.元PDFをAdobe photoshop等の画像編集ソフトで開きます。
2.「イメージ」→「画像解像度」を選択し、幅(長辺)を拡大時の画像と同じピクセル(px)数に指定します。
拡大時の画像は後に記載する『表示画像サイズの確認方法』をご参照ください。
(※ 縦横比を固定にチェックが入った状態で変更してください。幅に合わせて高さが変更されます。)
3.「ファイル」→「Webおよびデバイス用に保存」を選択してください。
4.ダイアログで「高画質」以上を選択し、JPEGで保存します。

以上をすべてのページに施して、JPEG画像をページ分、作成してください。

5.事前にダウンロードして解凍しておいたデータフォルダを開きます。
6.「contents」→「image」→「book」→「large」の順にフォルダを開いてください。
7.上記工程で作成したJPEG画像を、「large」フォルダ内の画像と差替えます。

もしくは、4までの工程で作成したJPEG画像を、再アップロードしていただいてもかまいません。

※補足※
さらに画質を上げたい場合は、Adobe photoshopで画像編集する際の工程2で、幅のサイズを2倍程度にご指定ください。
(1200pxなら2400px)

その際、元データ以上の大きさにならないよう、ご注意ください。
また、画像サイズを大きくした場合、その他ファイルの設定は発生いたしません。
詳しくは下記をご確認ください。

———————————————————————————————————-
表示画像サイズの確認方法
ダウンロードしたデータフォルダの中の「ebook5data」フォルダ内に「ebook5_data.js」というファイルがあり、こちらの下部の方に、
下記のような記述があります。

var pageImgSize = { width: 626, height: 800 };
var pageImgSize_large = { width: 1310, height: 1673 };
var pageImgSize_thumb = { width: 78, height: 100 };

上記が表示画像サイズの指定となっており、拡大画像のサイズは
「var pageImgSize_large = 」の部分です。
拡大画像を表示サイズ以上の大きさで作成した場合でも、表記の変更は必要ありません。
———————————————————————————————————–

但し、その分ファイルサイズが大きくなるため、動作に影響が出る可能性がございます。
用途に合わせて、ご活用ください

買切タイプ新規販売終了のお知らせ
2018年3月31日をもちまして、ebook5買切タイプ(有償ライセンス)及び作成ツール無料ベータ版内追加オプション「作成枠追加オプション」の新規販売を終了いたしました。
詳しくはこちらをご覧ください。

【検索用キーワード】
ぼやける/画質が悪い/粗い/粗くなる/低くなる/低い/見づらい

Tagged: