- 吉田智司
ブログやホームページの画像に一工夫
こんにちは、デジタルライフ・コンシェルジュの吉田智司です。
ホームページ（以下HP）やブログの記事に入れる写真やイラスト。
昔はモデムを使ってアクセスしていたため、画像を早く表示するためサイズを小さくしたり、圧縮率を大きくしたり、256色に減色したりしました（少しでも早く表示するためインターレース形式で少しずつ表示したりもしました）。
今でこそ光回線や4G回線など通信速度が高速になりあまり気にしなくなりましたが、最近ではスマホからのアクセスも増えたため、格安SIMなどの普及で回線混雑時は通信速度が遅くなります。
また、アクセスしたページが遅いと開く前に閉じられてしまい、アクセス数にも影響します。 （ここのWIXサイトも少し重いのが悩みのタネですが・・・）
そこで、画像を入れる前に一工夫するポイントをいくつかご紹介しましょう。
１．画像の大きさ適度に小さく
スマートフォンのカメラも高解像度になり、そのままでは長辺が3,000Pxを超えるものが多くなりました。印刷用には高解像度で良いのですが、HPやブログなど画面表示用に使う場合は壁紙サイズで1920Px以下、小さめの画像で640Pxの範囲でリサイズして使用しましょう。
ただしあまり小さくしてしまうと圧縮による画像劣化が目立ったり拡大表示が汚くなってしまいます。
パソコンでの写真のリサイズはこちらがおすすめ。
２．「JPG」と「PNG」を使い分ける
以前はGIFも使われていましたが256色の制限があるためあまり使われなくなりました。
画像を保存する場合は「JPG」と「PNG」を使い分けましょう。
スクリーンショットなどを保存する場合
グラデーションや写真などの画像は「JPG」で保存
白い部分やベタ塗り部分が多い場合は「PNG」で保存
するとファイルサイズを小さくできます。
JPG：136KB ＜ PNG：497KB
JPG：39.7KB ＞ PNG：17.7KB
またJPGは白地に黒文字などでは線の周りに画像の荒れ（モスキートノイズと言います）が出やすくなるのでこの場合も「PNG」がおすすめです。
３．画像サイズを小さくするオンラインサービス「TinyPNG」
JPG・PNG問わず画像を劣化を少なく圧縮して容量を小さくしてくれるオンラインサービスがあります。使いやすくておすすめは「TinyPNG」です。
「TinyPNG」
使い方は簡単。点線エリアの「Drop your .png or .jpg files here!」に画像をドラッグするかクリックして画像を指定するだけ。
上図のスクリーンショットをそれぞれJPGとPNGで保存したものをドラッグしてみました。
ベタ塗り部分が少ないのでJPGの方がファイルサイズが小さくなりました。
自動的に圧縮が始まり
JPGは197.0KB → 86.2KB（-56％）
PNGは303.8KB → 131.3KB（-57％）
それぞれの右の「download」をクリックするか、すべてダウンロードする場合は下の「Download all」をクリックします。
100KB前後であればどちらを使ってもいいですが、300KBを超えると画像を３つも使うと1MB近くになるのでここの圧縮サービスの利用をおすすめします。
デジタルライフ・コンシェルジュ 吉田智司
パソコン塾三郷教室（埼玉）
