このサイトのタイトル部分，左右にスライドする画像を修正した．ファイルサイズが大きすぎて、表示時間が掛かり過ぎるという報告が相次いだからだ．その昔，回線速度が遅かった時代はどんな小さな画像にも必ず手を入れて，少しでもファイルサイズを小さくしていたが，最近は速度も早いし，なにより大きい方がきれいなので，気にしないでバンバン大きなのをアップしていた．が，やはりものごとには限度があって,特にスマホの回線ではきついらしいので，全面的に手を入れてみた．
①の画像は最初に1枚だけ入れていたもの．これ自体かなり重量級だったが，②はさらに大きく，こちらを増やした時点で重量オーバーになった．２枚はスライドさせて入れ替えるので，ＰＣが２枚分のデータを読み込んでからでないと表示が始まらない．まずはリミットを超えてしまった②の方から調べると，そもそも表示寸法より大きな画像をアップしていて，wordpressが普通サイズに縮小表示していたらしい。大きいのは当たり前だ．そこで、表示画面の寸法に縮小すると同時に，JPG描き出し時の％を下げた．これは，サイズ縮小の基本技である．どの程度の％がよいのかは絵柄によって変わるため，書き出しては目で見て，ボケぐあいが許せるかどうかチェックする．
一般的に画像ファイルは，同じ寸法でも絵柄によってサイズが違う．「青い空と白い雲」のような同じ系統の色ばかりのものはサイズが小さく，「大都市の繁華街」のような色数が多くて，こまごましたものが集まった画像はサイズが大きい．また，画像はＲＧＢ３色をそれぞれ２５６階調ずつ持っていて，３色を掛け合わせるので，画素ごとに計１６４０万色の表示ができる．そして，番号１つ違いでも別なデータとして扱われるが，実際その程度の差はヒトの目で判別できない．このことを利用して同じような色が並ぶ箇所は，同じ色に変えてしまう．そして画素ごとに色データをつけていたのを，「ここから先何個は全部この色」という簡素な情報に変えてしまう．これが画像縮小技術の基本だ．やり過ぎれば画像は鮮明さが無くなるが，うまくやると見かけは変わらないのにサイズだけ小さくできる．
②はこの方法でサイズを半分ほどに減らすことができた．続いてビオラの上に乗ったカードの修正．表面を見ると，見た目はほぼ白一色だが，データ的には番号がちょっとだけ違う画素が散らばっている．そこで文字とキャラクター以外の部分を切り取って，白一色で塗りつぶした．
次に楽器以外の暗い部分だが，この部分は，よく見なければケースの内張りであることがわからない，という程度だったので，全部切り取って単一色の背景にしてしまった．黒ではなく内張りの色を基調にしたため，そこまでやっても，印象としてはさほど変わらなかった．これでファイルサイズは最初の１／４以下になった．
次回「タイトル画像の修正作業（続き）」（９／４公開予定）
乞うご期待！