【一年生の頃の私へつづる言葉③】画像の扱いは慎重に。

・今となっては、当然のごとく使用していることを、ただ手紙としてしたためるだけの記事の第三弾。
・備忘録かつ童心回帰の「Orangeごっこ」による中毒症状は、なかなか治療法が見つからない。
・よし。今回は過去の失敗経験の払拭録を書こう。
・「これが届いた当時の私よ。このことを肝に銘じて、頭を冷やすように。」

画像形式と圧縮について

＜当時＞

• 「画像形式」・・・「透過と無透過での判断」・「写真かイラストかどうか」など、なんとなくの判断で使い分けていた保存形式。仕組みや使い分け・種類など、ほぼほぼ理解せず使用していた。
  →間違った形式で保存して、重くなったり、表示が変になってしまうこともしばしば。
• 「圧縮」・・・画像サイズを気にせず、ただ好きなものを学習用のサイトや添付として貼りまくっていた。
  →個人学習の時は気にしていなかったため、容量やUI等の観点において、そこまで意識していなかった。

→これらにより、「重すぎる」「表示が変」等、担当者からの多大な指摘が吹き荒れる。

＜現在＞

仕組みや圧縮作法・ツール等を基礎からしっかり学習。

• 大きな種類

  • ①ビットマップ画像・・・画像を画素（色等の情報が入った細かい点）で表現したもの。「JPG」「PNG」「GIF」等はこの部類。
    →画素数が増えるほど、解像度が上がってきれいなるが、容量も重くなる。
  • ②ベクター画像・・・画像の線や色を計算式（データ）で表現したもの。「SVG」や「PDF」等はこの部類。
    →拡大の際でも計算式の都度変更のため、画像荒れがほぼない。ただ写真等の大量の色を扱う画像は向いてない。

• 使い分け

  • ①写真・・・基本的に「JPG」を扱う。
    →大量の色の扱いやすさ・容量の小ささという点において、写真に向いている。
  • ②イラスト・・・基本的に「PNG」を扱う。
    →ロゴ画像やグラフ画像等の扱いやすさに加えて、透過画像サポートもしている。
    ※「SVG」はマルチ画面対応や画像編集の柔軟さにおいて多くの強みがあるが、未対応ブラウザのため、導入は慎重にする。

• 圧縮方法

  • ①画像編集ソフト・・・「ペイント」「Photoshop」等のサイズ変更機能や圧縮機能を用いる方法。
  • ②コマンド・・・「Guetzli（Google製圧縮コマンド）」「jpegoptim」等のコマンドで、開かずに行う方法。主に大量圧縮等に使用。
    →主な詳細はこちら
  • ③ブラウザ圧縮ツール・・・インストール不要で、ブラウザ上で行う方法。主に都度使用や小規模圧縮に使用。下記おすすめ。
    • iloveimg・・・PNGの圧縮率が高い。大量圧縮も可能。
    • Squoosh・・・注目の新フォーマット「Webp」圧縮も可能。圧縮前後での比較可能。

• その他
  ・「Webp」をサイト上で扱う場面がある場合（※私がそうであった）、ブラウザ対応状況も考えて、現状は下記のように対応。
  →こちらに応じて、定期的に変更。

<!-- Webp未対応ブラウザの場合、PNG画像を表示 -->
<picture>
  <source type="image/webp" srcset="test.webp" />
  <img src="test.png" width="" height="" alt="test" />
</picture>

＜過去の私へ送る言葉＞

• Web担当になって、てんやわんやが止まらないと思うが、落ち着いて。
• こういう一見地味な知識をコツコツ学んでいこう。

まとめ

• 今回は、画像の扱いということで、容量などおかまいなし精神でペタペタ貼りをしていた頃を懐かしみながら、記事を書く。
• 「あの日の担当者からの怒涛の指摘があって良かったぁ」と、量産型自己啓発の世界へ没入。
• 「とにかく、GoogleとAdobeは最強」という、ただただ着地失敗な結論で終了。