Web業界に入社して、今まで特に意識していなかった画像フォーマットについて、実務で意識するようになったので記事にまとめてみようと思いました。
まだまだ見習いですが、Web系職種を志す方の参考になりましたら幸いです。
Webサイトの画像を.webp化🙂
と思った矢先、.avifという拡張子を知る😂技術的には.webpより上なのね😂
ブラウザごとに出し分けの記述で対応したらできそうだけど…
そもそも対応ブラウザが少なすぎ😭
成長性はありそうだけど。.avifってどうなんだろう…
めっちゃ軽くなるみたいだけど🤔— ふらんぶ🌿@UXデザイナもどき (@dayantler) May 11, 2021
・Webデザイナーとして働いている
・Web系職種ってどんな業務をしているんだろう
・画像についての知識を知っておきたい
そういった方向けに書いています。
ちなみに、筆者はこんな仕事してます。
画像フォーマットって？
日々日常のWeb上で画像を扱っているときに、ファイルの後ろに「.png」といったような文字列があると思います。
これを「拡張子」と呼び、かっこよく「フォーマット」と呼ぶ人もいます。
この「フォーマット」を用いることで、画像データの表示・圧縮ができます。
ただ、どのフォーマットを選べばいいのか迷ってしまいますし、それぞれのフォーマットには特徴があります。
適切なフォーマットを選ばなければ、画質の劣化やデータ復元不可という事象に陥ったりしてしまいます。
Webデザイナーさん等の作業する側はデータ復元可否を気にしますが、Webディレクターさん等の管理する側は画像の容量を気にする傾向があります。
現場でよく使う画像フォーマット
様々な画像フォーマットがありますが、主に使うのは下記です。
その他は使うシーンは少ないです。
| JPG | .jpg .jpeg .JPG .JPEG |
| PNG | .png |
| SVG | .svg .svgz |
| WebP | .webp |
それぞれの特徴は下記になります。
写真に使用されることの多いフォーマットです。
ただし、JPGは非可逆圧縮です。（圧縮すると圧縮前のデータが消えてしまう）
一度圧縮してしまうと元には戻せず、サイズを変えたりするだけで画質が劣化していきます。
PNGは背景の透過ができるのがメリットです。
イラストやアイコンに使用されることが多いです。
JPGと異なり、PNGは可逆圧縮です。（データを後で完全に復元可能。圧縮しても画質が劣化しない）
何度も画像を加工する場合はPNG形式で作業しましょう。
しかし、データを復元することができるということは復元のデータを裏で持っていることになります。
そのため、画像によっては容量が大きくなってしまう懸念があります。
この容量が大きくなってしまう点がWebディレクターさんに好まれなかったりします。
色数の少ないイラストやロゴマークに使用されることが多いです。
ほとんどの場合、ロゴ＝SVGといっても過言ではありません。
また、容量を小さく、画像を拡大しても劣化せず表示できるのでWebディレクターさんに好まれます。
ただし、色数が多い画像の場合は逆に容量が大きくなってしまいます。
Google社が開発したWebに対応している画像フォーマットです。
画像の容量が小さく、Web上でのページ表示速度を速くできるというメリットがあります。
JPGやPNGと比べて25〜35％程度小さくなると言われています。
私も実務でやってみましたが、150kb→35kbと大幅削減できました。
画像の容量が小さくなると、Web上でのページ表示速度も速くなるので、SEO対策としても有効です。
WebPに注目が集まっている
GoogleのSEO対策として、「Web Vitals」という指標があります。
その中で重要な要素が「Web上でのページ表示速度」です。
Webディレクターさんは、SEO対策としてWeb上でのページ表示速度を改善したいため、画像の容量が小さいWebPに注目しています。
さいごに
筆者は、職業訓練校卒で、「職業訓練校体験記」を書いています。
より詳細に、職業訓練校の雰囲気がつかめるのではないかと思います！
職業訓練校ではWebデザインを勉強しており、そのときの知識が今でも活きています。
職業訓練校ってどんなところなんだろうと思っている方、ぜひご一読ください！
職業訓練校体験記（Monthly版）のスタートはこちら
職業訓練校体験記（Weekly版）はこちら
筆者の就職活動の体験記はこちら
