【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
早ければ早い方がいいものの代表といえばサイトの表示速度です。
改善させるためには、適切なファイルサイズ画像を置くことが大切なのですが、画像サイズが重くて困った経験はないでしょうか。
Webサイトでは、画像の重さが原因で、ページの読み込み速度が遅くなり、ページを見てもらえないなど、せっかくのチャンスを逃してしまうことも起こりえます。
今回WebPを中心に、目的に合った適切な画像のファイル形式を選び、Webサイトの表示速度改善につなげる方法をご紹介します。
WebPはウェッピーと読みます。Googleが開発している静止画像フォーマットでファイルの拡張子は「.webp」です。2010年9月30日に提供が開始されました。
WebPは圧縮率が高いのが特徴で、従来の画像ファイル形式を使用する場合と比較して、画像のファイルサイズを小さくすることができます。
また、従来の画像形式でできることをほぼ実行可能です。
画像形式 |
Webp |
JPEG |
PNG |
GIF |
---|---|---|---|---|
圧縮方式 |
非可逆圧縮 |
非可逆圧縮 |
可逆圧縮 |
可逆圧縮 |
透過 |
◯ |
✖️ |
◯ |
△ |
アニメーション |
◯ |
✖️ |
✖️ |
◯ |
ただし、WebPでは古いWebブラウザで対応していないものがいくつかあります。
Internet Explorer および古いバージョンのSafari (iOS 13 以前) では WebP画像を表示できません。
※MicrosoftはIEのサポートを終了させ、Edgeを使用することを推奨しています。
また、まだWebP画像のアップロードをサポートしていないWebサイトやサービスもあるため確認が必要です。
非可逆圧縮(ひかぎゃくあっしゅく)とは、圧縮前のデータと、圧縮・展開を経たデータとが完全には一致しないデータ圧縮方式のことで、不可逆圧縮(ふかぎゃくあっしゅく)とも呼ばれています。
可逆圧縮(かぎゃくあっしゅく)とは、圧縮前のデータと、圧縮・展開の処理を経たデータが完全に等しくなるデータ圧縮方法のことです。ロスレス圧縮とも呼ばれています。
JPEG(ジェイペグ)はJoint Photographic Experts Groupの略です。静止画のデジタルデータを圧縮する方式のひとつで、ファイルの拡張子は.jpgもしくは.jpegです。
一般的には非可逆圧縮の画像フォーマットでWebPと同じです。ただし、色の透過ができない点はWebPと違います。
JPEGは、表現できる色数が豊富で24ビット(1670万色)まで扱うことができるので、色数の多い写真や、グラデーションのように色が細かく変化する画像の保存に適しています。
検証したところ、WebP のファイルサイズはJPEGと比較して25-34%小さくなります。
PNG(ピング)は、Portable Network Graphicsの略です。コンピュータでビットマップ画像を扱うファイルフォーマットであり、圧縮による画質の劣化のない可逆圧縮の画像ファイルフォーマットです。ファイルの拡張子は.pngです。
JPEGと同じくフルカラー1670万色を扱うことができ表現できる色の数が豊富で、画像の質を維持したまま透過処理ができるのが特徴です。テキストや線画など色の境界がはっきりしたイメージに適しています。
PNGは可逆圧縮に対応しており、一度圧縮しても元の状態に戻すことが可能です。
GIF(ジフ)は、Graphics Interchange Formatの略で、ファイルの拡張子は.gifです。
GIFは256色以下の画像を扱うことができる可逆圧縮形式のファイルフォーマットであり、圧縮画像ファイルフォーマットでは歴史の長いもののひとつで、WebブラウザではJPEGと並んで標準的にサポートされています。
圧縮形式の特性上、同一色が連続する画像の圧縮率が高くなるため、イラストやボタン画像など、使用色数の少ない画像への使用に適しています。
また、GIFは透過処理も可能です。
可逆圧縮の画像形式なので、一度低画質で保存しても元の画質に戻すことができます。
GIFの最も大きな特徴は、アニメーション画像を作成できる点です。色数の多くないシンプルなアニメーションを作成する際には重宝します。
アニメーションのWebP画像のファイルサイズは、アニメーションGIF画像のファイル サイズの約30%です。
GIF形式は256色しかサポートしていないので画像をGIF ファイルとして保存すると、ほとんどの場合、以前より画質が低下します。WebP にはそのような制限はなく、最大 16,777,216色をサポート、フルカラーのアニメーションを作成したいけれどファイルサイズは小さくしたい時に適しています。
WebPの最大の特徴は、画像の圧縮率の高さにあります。
その特徴を活かして、Webサイトの画像をWebPに変換することでサイトの表示速度を上げることができます。
読み込み速度の遅いWebサイトは、ユーザーにとってストレスになるので、ページの離脱率が高まります。
WebPで表示速度を改善されたユーザーが利用しやすいサイトは、ユーザーファーストの観点からも良いとされ、Googleの評価も高くなるのでSEO対策にもつながります。
存在感を増している画像ファイル形式WebPをご紹介しました。
既存のファイル形式より20%以上も軽くWebサイトの表示速度を改善できるのが特徴です。
技術の進歩とともに新たなファイル形式も誕生しています。世の中の主流になる前にそのファイル形式の特徴や特性を学んでおきつつ、Webサイト制作へも生かしていきたいと思います。
KOHIMOTO LABO
東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。
INDEX
PICK UP