タイトル画像の修正作業

このサイトのタイトル部分,左右にスライドする画像を修正した.ファイルサイズが大きすぎて、表示時間が掛かり過ぎるという報告が相次いだからだ.その昔,回線速度が遅かった時代はどんな小さな画像にも必ず手を入れて,少しでもファイルサイズを小さくしていたが,最近は速度も早いし,なにより大きい方がきれいなので,気にしないでバンバン大きなのをアップしていた.が,やはりものごとには限度があって,特にスマホの回線ではきついらしいので,全面的に手を入れてみた.

修正①の画像は最初に1枚だけ入れていたもの.これ自体かなり重量級だったが,②はさらに大きく,こちらを増やした時点で重量オーバーになった.2枚はスライドさせて入れ替えるので,PCが2枚分のデータを読み込んでからでないと表示が始まらない.まずはリミットを超えてしまった②の方から調べると,そもそも表示寸法より大きな画像をアップしていて,wordpressが普通サイズに縮小表示していたらしい。大きいのは当たり前だ.そこで、表示画面の寸法に縮小すると同時に,JPG描き出し時の%を下げた.これは,サイズ縮小の基本技である.どの程度の%がよいのかは絵柄によって変わるため,書き出しては目で見て,ボケぐあいが許せるかどうかチェックする.

番号が1違いの色
番号が1だけ違う色

一般的に画像ファイルは,同じ寸法でも絵柄によってサイズが違う.「青い空と白い雲」のような同じ系統の色ばかりのものはサイズが小さく,「大都市の繁華街」のような色数が多くて,こまごましたものが集まった画像はサイズが大きい.また,画像はRGB3色をそれぞれ256階調ずつ持っていて,3色を掛け合わせるので,画素ごとに計1640万色の表示ができる.そして,番号1つ違いでも別なデータとして扱われるが,実際その程度の差はヒトの目で判別できない.このことを利用して同じような色が並ぶ箇所は,同じ色に変えてしまう.そして画素ごとに色データをつけていたのを,「ここから先何個は全部この色」という簡素な情報に変えてしまう.これが画像縮小技術の基本だ.やり過ぎれば画像は鮮明さが無くなるが,うまくやると見かけは変わらないのにサイズだけ小さくできる.

修正2
②はこの方法でサイズを半分ほどに減らすことができた.続いてビオラの上に乗ったカードの修正.表面を見ると,見た目はほぼ白一色だが,データ的には番号がちょっとだけ違う画素が散らばっている.そこで文字とキャラクター以外の部分を切り取って,白一色で塗りつぶした.

修正
次に楽器以外の暗い部分だが,この部分は,よく見なければケースの内張りであることがわからない,という程度だったので,全部切り取って単一色の背景にしてしまった.黒ではなく内張りの色を基調にしたため,そこまでやっても,印象としてはさほど変わらなかった.これでファイルサイズは最初の1/4以下になった.

次回「タイトル画像の修正作業(続き)」(9/4公開予定)
乞うご期待!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です