ブログなどのWEBサイトでの画像の容量にはこんなことに注意されてはどうでしょう
FC2ブログに限らず画像を使用する場合ここを注意しましょうという話。
画像には縦800px 横1200px などと云う画面上の大きさと、200KB(キロバイト)などと云う容量というものがあります。画面上の大きさが大きくなると、容量も大きくなるのですが、青一色の画像と複雑な風景では同じ画面上の大きさでも容量は画像のファイル形式で違ってきます。
画像の容量は極力減らしてくれないと、スマホから閲覧した場合、表示に時間がかかって俺のギガが無駄になくなってしまう。そんなサイトは見に行きたくない。アフィリをやってるブログを含む商用サイトはこんなケースが多いんです。肝心なところが表示される迄に時間がかかってイライラ。おまけに記事を読んでる最中に、記事の部分が逃げてしまって上下にガクガク。なんなのと思ってたらおもむろにCMが割って入ってきた。
それでも画像の縦横の大きさはある程度ないと、せめて画像の長辺のサイズは1,200px(ピクセル)は必要だと言う話も。でないと最近の高解像度のスマホでも画像が粗くなるらしい。
画像は縦横の大きさと云うか, そんな広さの他に、画像が持ってる容量というものがあります。例えばA4の紙に描かれた210mm×297mmという面積に描かれた画像が、デジタル的にどれだけの容量に格納されているのかと云うことが重要です。jpgという一般的に使用されている画像の様式は特殊な設定にしない限り圧縮の技法が使われています。
jpgの色々な画像を見てもらえば判ってもらえると思いますが、画面に複雑なものが写されているものよりも単純な青空一杯な画像の方が容量が少ないことが判って戴けると思います。
次の画像は、カメラで撮れた画像を、FC2ブログでアップロード(登録)できる1ファイル当りの容量の限度の5MBに近い4.33MBに圧縮したものです。
(以下の画像例では記事内画像をクリックして実際の大きさの画像を体験して欲しい。)
こいつはFC2ブログのアップロードできるファイルの総合容量的にもまずいと思いますが。
この様に書いても閲覧して戴いてる方にどのような影響が実際に出るのかは検証できてないのと、2回目以降の表示にはブラウザのキャッシュが働いて影響は出ないかも知れません。
もしなんの影響もなければ、今回の私の記事は大失敗かもね。スマホで見ていただくと体験できるかも
もし影響が出るとすればPCやスマホが画面に画像を表示する場合、どれだけの時間で表示できるかということと密接な関係があります。
次の画像は、横幅を1,200pxに縮小して、圧縮をしない画像です。画像容量は990KBあまりです。
更に次の画像は横幅が同じ1,200pxで容量を104KBぐらいまで圧縮したものです。
これくらいならば画像の差はそれほど判らないようですが
さすがに画像の横幅が同じ1,200pxであってもここまで圧縮(49KB)すると画像劣化は明白になります。レンガのアーチ下や葉の表現を見てもらえれば、画質の劣化状況は一目瞭然ですね。両方の画像をクリックして二つとも開き、タブをクリックして見比べていただければわかります。どちらも縦横サイズは同じ1200px なのに細かい部分の表現力が違ってます。
この容量を圧縮すると言う方法を採ると、同じ色のエリアが広いほど圧縮後の容量は少なくなります。例えば一面が青空の画面では上記の例よりも更に容量は小さくなります。上記の画像の様に複雑な色が画面のあちこちで使用されている場合は圧縮の効果が悪く、画質の劣化が判りやすくなります。
画質をどこまで確保してそして閲覧者が我慢しなくてもいい表示スピードを保証するのか。そんな優しさが必要になってきて、グーグルもそこを判断基準にしてきた様です。
まぁ、俺のブログはスマホで見てくれなくてもいい。それなりの性能を持ったパソコンで見てくれ!と云うのも有りとは思いますが。グーグルさんには嫌われるかもしれませんね。グーグルさんはモバイル(スマホ)優先を打ち出されてますので。
画像のサイズを小さくしたり、容量を圧縮したりできるフリーソフトでは JTrim が一番有名かも知れません。ただ私は使ったことがなくて、私はXnView というフリーソフトがお気に入りです。
又は下記の様なサイトでも画像の容量を圧縮してくれるサービスがあります。フリーソフトの導入に抵抗のある方にはお勧めかもです。
繰り返し念押しをしておきますが、容量の圧縮とは、縦横のサイズの大きさ px を小さくすることではなくて容量を減らすことです。画像処理するソフトに付いていると思いますが、画質や品質の調整の項目があれば(%表示で載ってる場合が多い)そこを悪い方向に設定変更してみて下さい。
因みにJTrimやXnViewで画像処理を行う場合どこで操作するのかを簡単に書いておきます。
JTrimの場合
JTrimの場合は
メニューのイメージをクリックすると上図の様なドロップダウンメニューが現われます。画像のサイズは「リサイズ(S)」、容量は「JPEG品質(P)」で設定します。
「リサイズ(S)」をクリックすると下図のウィンドウが開いて
画像のサイズが指定できます。下欄の「縦横の比率を保持する」にチェックが入っていれば縦横どちらかの数値さえ入れれば他方は自動で入力されます。
「JPEG品質(P)」をクリックすると
画像の品質(容量)を指定するウィンドウが開きます。私は60に指定しています。私は風景などの画像は1200×800pxにしていますが、品質を60ぐらいにしておくと複雑な画像でも200KB以下に収まってくれます。このJTrimではファイルサイズでも指定できます。この設定は一度やっておくと次からも引き継がれます。
XnViewの場合
画像を選択してアプリ内でフル画面表示させておきます。
画像のサイズを変更する場合は
メニューの「画像(I)」→「リサイズ」と辿って
サイズ変更ウィンドウで画像のサイズが指定できます。下欄の「固定縦横率」にチェックが入っていれば縦横どちらかの数値さえ入れれば他方は自動で入力されます。
画像の容量指定は
「ツール(T)」→「オプション(O)」と辿って
「読み込み/書き込み」→「書き込み」→「JPEG」の画質の数値を変更します。私は55に指定しています。私は風景などの画像は1200×800pxにしていて、画質を55にしていると複雑な画像でも200KB以下に収める事が出来ます。
画像の容量変更は「ファイル名を付けて保存(A)」のウィンドウでも出来ます。
メニューの「ファイル(F)」→「ファイル名を付けて保存(A)」と辿って
「画像ファイルを保存」のウィンドウの オプション ボタンをクリックする事によって同じ画質設定ウィンドウが開きます。この設定は一度やっておくと記憶されます。