【たった10分】ビギナーにもできるアクセスUPの秘密
2020.03.22
2021.03.08
この記事は約3分で読めます
この記事の筆者：三好アキ
🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。
🔹 自身のJavaScript挫折経験をもとに、HTMLとCSSの知識だけで本格的なアプリ開発を始められる入門書を多数執筆中。合計著作は22冊を超える。
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録
画像形式の最適化
これまで何度か紹介したように、スピードが遅いために成功が遠のいているウェブサイトは多くあります。
ウェブサイトを遅くする最大の原因は画像なので、サクサクと動くウェブサイトを目指すには画像の最適化が必須のプロセスです。
サイズと画質の調整による画像の最適化は「誰でもできるウェブサイトのスピードUP術」で触れたので、今回は画像のフォーマット変更で最適化する方法を紹介します。
「次世代の画像形式」とは？
下の記事で紹介したように、Page SpeedInsightを使うと、ウェブサイトのスピードを診断できます。
診断後に表示される「改善できる項目」で、「次世代フォーマットでの画像の配信」と書かれているのがよく見られます。
画像保存に使われるフォーマットには主にJPG、PNG、GIF、そしてSVGの4つがありますが、「次世代フォーマット」はこれら4つとは異なる新しいフォーマットのことです。
具体的には、JPG2000、JPEG XR、WebPなどで、これらはどれもJPGやPNGよりも圧縮率が高く、画質を維持したままサイズを小さくできる特徴があります。
今回は、その中でもGoogleが開発したWebPを紹介していきます。
WebPの特徴とメリット
2010年にリリースされたWebP（ウェッピー）の目的は、通信量の削減とウェブサイトの高速化で、その目的の通りウェブでの使用を前提としているため、ウェブサイト以外での使用は通常されません。
WebPは、JPGのような非可逆圧縮とPNGのような可逆圧縮（ロスレス圧縮）の2つの圧縮方式を選ぶことができ、Googleの調査によると、WebPはPNG比で26%、JPG比で25〜34%ほど画像サイズを縮小できます。
つまり画質を維持したままサイズを小さくできるので、ウェブサイトのパフォーマンス向上が見込めます。
WebPの作成方法
一番簡単なのは、Googleが開発している画像圧縮サービス、Squooshを使うことです。
PhotoshopでもWebp用のプラグイン導入で可能です。
WebPの注意点
メリットの多いWebPですが、ブラウザによっては表示ができないものがあることに注意しましょう。
Googleクロームが対応しているのは当然として、FirefoxとEdgeもWebPに対応していますが、Safariは対応していません。
（*対応していないブラウザでの表示には<picture>タグを使う必要があります。）
また、WebPがJPGやPNGの代替ではないことにも注意が必要です。
ウェブサイト以外の用途ではJPGやPNGが使われますし、また今説明したようにSafariは対応していないので、WebPに画像を変換しても元のJPGやPNGのイメージは別に保存しておくのがいいでしょう。
冒頭でも書いたように、画像はスピードを遅くする最大の原因ですが、驚くほど多くのサイトで最適化されていない画像が使われています。
今回紹介したWebp方式への変換や、「画像がギザギザして不鮮明な理由」で説明したSVG方式の採用などで、画像をウェブ表示に最適化してスピードUPしていきましょう。
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信はいつでも停止できます）
関連記事
