ウェブパフォーマンスを向上させるために画像を最適化する6つの方法

人間は視覚的な生き物であり、そのことは研究でも証明されています。テキストは3日後の定着率が10％～20％程度ですが、画像は65％にもなります。脳は視覚情報の90％を受け取り、6万倍速く処理します。ビジュアルは間違いなく、ウェブサイトのエンゲージメントに重要な役割を担っています。

重い画像は帯域幅を消費し、ページの読み込み速度を低下させます。検索エンジンはこの遅いパフォーマンスに気づき、ランキングを下げるというペナルティを与えます。

当記事では、2021年にウェブパフォーマンスを向上させるために画像を最適化する6種類の方法をご紹介します。

でのウェブパフォーマンスを向上させるための画像最適化のヒント

例えば、非営利団体のウェブサイトをデザインする場合、画像を多用して作品を紹介します。寄付者やスポンサーなどの関係者は、こうした情報をもとに継続的な支援を行います。しかし、画像を最適化しなければ、ユーザー体験とエンゲージメントが損なわれます。最大の問題は、ページの読み込みやタイムアウト応答が遅くなることでしょう。

画像の最適化とは、ファイルのサイズ、フォーマット、解像度を小さくすることです。画像の品質を損なうことなく、これを行うことができます。

選択肢の中から、いくつか確認してみましょう。

マーケティングキャンペーンイラストレーション by Deemak Daksina

1.画像最適化監査から始める

画像最適化監査は、改善すべき箇所の関連情報を提供します。

まずは、サイトに掲載されている画像のインベントリーを作成し、関連するテストを行うことで、対処すべき問題を診断します。

例えば、監査によって画像が多すぎることがわかります。また、画像のフォーマットが表示され、次の対策を決めることができます。例えば、ファイルフォーマットを削除または変更することで、ページの読み込み速度が大幅に向上することがあります。

2.画像に適した形式を選ぶ

画像ファイルにはさまざまなフォーマットがあります。ここでは、Webアプリケーションの画像フォーマットとして知っておきたい代表的な3種類を紹介します：

PNGは、非常に高品質な画像であるという利点があります。しかし、これを実現するために、ファイルサイズが非常に大きくなります。シンプルな画像やロゴに有効で、可逆圧縮が可能です。
JPEGは、多くのウェブサイトで最も一般的な画像で、複雑でカラフルな画像に適しています。ただし、JPEG画像を圧縮する際には注意が必要で、画像が小さくなるほど鮮明さが失われます。これをロッシーと呼ぶ人もいます。
GIFはアニメーションや小さなアイコン、低解像度の画像に有効です。可逆圧縮が可能ですが、256色までしか使用できません。

Andreas StormによるSave Icons

3.画像のリサイズと圧縮

画像が少しずつ読み込まれているように見えるのは、画像が重すぎる証拠です。サイズを変更したり、圧縮したりすることで、問題を解決できます。

関連項目: 初めての社内リトリートなお、画像を最適化する前にアップロードすることは避けてください。また、最高の品質を保つために、ファイルは1～2MBの範囲内を目安にしてください。

トリミングツールで画像のサイズを変更すると、ファイルサイズが小さくなり、ページの読み込み速度が向上します。たくさんのツールが用意されているんですね。

画像を圧縮するとファイルサイズを小さくすることができますが、圧縮しすぎると画像が歪んでしまいます。画質を保ちたい場合は低圧縮が理想的かもしれませんが、大きくサイズを小さくすることはできません。

コンプレッションの種類

ロスレス圧縮とロッシー圧縮という、すでに述べた2つの概念がある。

ロスレス圧縮で画質を維持しつつ、不要なメタデータを削除。
非可逆圧縮は、一部の要素を取り除くことでファイルサイズを小さくします。画質を損なう可能性がありますが、その差に気づかない場合もあります。そのため、画像を圧縮する優れた方法であることには変わりありません。

適切なピクチャーエディターは、どの圧縮が最も効果的かを判断するのに役立ちます。

4.モバイルファーストによる画像の最適化

Googleがモバイルファーストのランキングに切り替えたため、どのような手順でもモバイルファーストのSEO戦略に従わなければなりません。画像はどのモバイルデバイスでもデスクトップデバイスと同じように見える必要があります。膨大な量のインターネットトラフィックがこのようなデバイスを通じてもたらされます。

モバイルデバイスを使用する際に、優れたUXでユーザーを惹きつけられなければ、ユーザーを失うことになります。

モバイルファーストのために画像を最適化することを検討しましょう。小さな画面で美しく見えるなら、デスクトップやノートパソコンでも素晴らしく見えるはずです。

ASOの最適化 by Abbi_Kerimov

5.ファイル名とそのSEOへの影響

画像の最適化には、ファイル名の付け方にも気を配る必要があります。検索エンジンで上位に表示されるようにするためです。写真をアップロードしたり撮影したりすると、デバイスが自動的にファイル名を付けます。この名前は通常、ランダムなコードや数字で構成されています。 2224444.jpgのように見えることもあります。

関連項目: グラフィックデザイナーのカバーレターの作り方（例文付き）

写真をそのままホームページにアップロードしても、検索エンジンには全く役に立ちません。

画像に説明的なラベルを付けることで、ウェブクローラーに見つけてもらいやすくします。ビジネスやサイトの情報を示す関連キーワードを盛り込みます。

6.レイジーローディングの利用を検討する

画像の遅延読み込みは、その名の通り、画像全体を一度に読み込むのではなく、ページをスクロールすればするほど画像が読み込まれていく仕組みです。

レイジーローディングは、その時点で必要なものだけを表示するため、不要なリソースを使わず、帯域幅を節約することができます。

Loading... by Dona

最終的な感想

ウェブパフォーマンスは、検索エンジンが使用する重要なランキング要素です。ページの読み込み速度が低いと、Googleはあなたのサイトにペナルティを与えます。

ページ速度を決定する要因は数多くありますが、画像の使用はその中でも上位に位置します。画像を最適化しなければ、ウェブパフォーマンスは低下します。ページの読み込みが遅くなり、ユーザー体験やエンゲージメントもよくありません。

適切な画像形式を選択し、次にリサイズや圧縮などのテクニックを使ってファイルサイズを小さくします。定期的にページテストやサイト監査を予定して、サイトのパフォーマンスをチェックします。

Rick Davis

Rick Davis は、業界で 10 年以上の経験を持つ、熟練したグラフィックデザイナー兼ビジュアルアーティストです。彼は小規模な新興企業から大企業まで、さまざまなクライアントと協力して、効果的でインパクトのあるビジュアルを通じてクライアントがデザイン目標を達成し、ブランドを高めるのを支援してきました。ニューヨーク市のスクールオブビジュアルアーツを卒業したリックは、新しいデザイントレンドとテクノロジーを探求し、この分野で可能なことの限界を常に押し上げることに情熱を注いでいます。彼はグラフィックデザインソフトウェアに関する深い専門知識を持っており、自分の知識や洞察を他の人と共有することに常に熱心です。デザイナーとしての仕事に加えて、Rick は熱心なブロガーでもあり、グラフィックデザインソフトウェアの世界の最新のトレンドや発展をカバーすることに専念しています。彼は、情報やアイデアを共有することが強力で活気に満ちたデザインコミュニティを育成する鍵であると信じており、オンラインで他のデザイナーやクリエイターとつながることに常に熱心です。クライアントのために新しいロゴをデザインしているときも、スタジオで最新のツールやテクニックを試しているときも、有益で魅力的なブログ投稿を書いているときも、Rick は可能な限り最高の仕事を提供し、他の人がデザイン目標を達成できるよう支援することに常に取り組んでいます。