《デザイン基礎講座》フォーマットごとの特徴を押さえて、画像や動画を快適に表示しよう

Webで使える画像や動画にはいくつかのフォーマットがあり、それらの特徴を知り、使い分けることで表現の幅を広げることができます。また、画質を担保しつつもファイルサイズを軽量化するための知識も必要です。

色数や形状などで使い分ける　画像の基本的なフォーマット

画像の定番拡張子

画像にはさまざまなフォーマットがありますが、Webサイトでは主にJPG、PING、GIFが使われてきました。JPGは表現できる色数が多いため、主に写真に使われます。PNGも色数が多いもののグラデーションは苦手なため、複雑なロゴやイラストなどに使われます。一方GIFは、表示できる色数が少ないためシンプルなイラストやロゴなどに使われます。背景の透過や画像を組み合わせたアニメーションをつくれることも特徴です。他にも、計算式によって描画するSVGがあります。ベクター画像のためサイズを変えても劣化せず、ロゴやアイコンなどに使われています。画像のクオリティと快適な表示を担保するには、それぞれの特徴を理解し、画像の性質にあったフォーマットにすることが大切です。

高画質なまま表示高速化を実現　次世代型の画像フォーマット

WebPとAVIF

新たな画像フォーマットも登場しています。Googleが開発したWebPは、画質を担保しながら従来のフォーマットと比べて表示が高速化されます。また、非営利団体「Alliance for Open Media（AOM）」が開発したAVIFは、画質を担保しつつWebP以上の軽量化を実現しています。両者とも、どの従来型フォーマットからの置き換えにも適しています。これらを活用すると、軽量かつ4Kモニターも含めさまざまな環境で美しく表示をすることが可能です。表示にはブラウザの対応が必要となりますが、WebPに関しては現状ほぼすべてのブラウザでカバーし、導入が進んでいます。こうした次世代型フォーマットを知っておくとクオリティを上げられます。

新技術で表現の幅を広げる　動画フォーマットの使い分け

MP4とWebM

動画はファイルサイズが大きくなるので、軽量化の知識が重要となります。従来のWeb動画のフォーマットではMP4が一般的でしたが、GoogleがWebMという次世代型の動画フォーマットを開発しています。こちらは高画質を担保したまま軽量化ができます。また、動画で背景を透過したい場合、従来はPNGを連番で書き出すという方法がありましたが、WebMでは透過動画をつくることもできます。こうした新しい技術を知っておくことで、表現の幅が広げられます。WebMのような次世代フォーマットを使う際は、非対応ブラウザへの対策として、必ずMP4の代替動画を用意しておくようにしましょう。

教えてくれたのは…

Text：平田順子
※本記事は、「Web Designing 2024年2月号」の記事を一部抜粋・再編集して掲載しています。