画像を最適化し、時間を無駄にしないでください
公開: 2019-11-08HTTPArchiveによると、平均Webサイトサイズは5年間でほぼ2倍になり、2014年の1MBから2019年の2MBになりました。確かに、インターネットアクセスはかつてないほど高速ですが、それでも、なぜWebサイトがこれほど大きくなったのでしょうか。 その答えの一部は、マルチメディアアセット全般、特に画像にあります。
ウェブサイトがもはや単純なテキストページではなくなってから長い時間が経ちました。 それらは動的になり、画像、ビデオ、GIFでいっぱいになりました…そして、これらすべてのアセットが、巨大な解像度の画面で見栄えが良く、サクサクと見えるようにしたいと考えています。
ウェブサイトの読み込みが非常に遅く、画像を最適化したことがない場合は、良いニュースがあります。今日は、WordPressを高速化するために何ができるかを学びます。 Webサイトのパフォーマンスを向上させ、画像がユーザーのエクスペリエンスを妨げるのを防ぐために使用できるツールを見てみましょう。
画像の最適化が重要な理由
画像アセットを最適化し、ウェブサイトを高速化するために利用できるさまざまな方法を説明する前に、そうすることの重要性をあなたに納得させるために数分を費やしたいと思います。
画像はウェブページ全体のサイズに大きな影響を与えます
冒頭で述べたように、ウェブサイト上の画像の重みは全体の重要な割合を表しています。 たとえば、次のブログ投稿を検討してください：DevTips –WordPressがURLを推測するのを防ぐ方法。 これは400語未満のかなり短い投稿であり、明確な問題の迅速な解決策を提供します。
GTMetrixによると、この投稿を読み込むには850KBのデータが使用されます。 しかし、なぜそのような短い投稿がそれほど多くのデータを使用するのでしょうか？ ええと、画像はこの問題の一部の原因です。投稿の注目画像だけでも200KB以上の重さがあり、これは全体の25％に相当します。
モバイルトラフィック
statcounterで見つかったデータによると、Webトラフィックの52％はモバイルデバイスから、45％はデスクトップから来ています。 そのため、今日では、小さな画面でうまく機能するレスポンシブデザインの使用に重点が置かれています。
確かにあなた自身が経験したように、モバイルでのインターネット接続は必ずしも素晴らしいとは限りません（特に通勤中や地下にいる場合）。 Statistiaによると、2019年の平均速度は約14Mbpsです。 したがって、モバイルでのWebサイトの速度を上げたい場合は、画像を含めて、Webサイトの重量を可能な限り減らす必要があります。
ストレージとデータ転送のコスト
適切なサイズの画像を使用することを心配する必要があるもう1つの理由は、お金です。 ホスティングプロバイダーがプランを提供する基準には、Webサイトが使用するディスク容量と、サーバーから訪問者に送信するデータの量が含まれます。 より多くのディスクスペースが使用され、より多くのデータが送信されるほど、より多くの支払いが発生します。
画像のサイズを小さくすることで、両方の要素を減らし、毎月いくらかのお金を節約できますか？
画像最適化アクション
画像の最適化について心配する必要がある理由がわかったところで、WordPressサイトを高速化するために何ができるか見てみましょう。
＃1適切に拡大縮小された画像をアップロードする
真新しいデジタル一眼レフカメラから直接剥ぎ取られた写真をアップロードする人の数は驚くべきものです。 問題は、DSLRカメラで撮影した写真は、おそらくWebサイトには大きすぎて重すぎるということです。
あなたがしなければならない最初のことはあなたのウェブサイトにそれらをアップロードする前に画像を合理的なサイズに縮小することです。 たとえば、当社のWebサイトでは、通常アップロードする最大の画像は、投稿の注目画像です。 これらの画像を1200x800pxに制限することにしました。 この別の投稿では、画像をアップロードする前に画像をすばやく拡大縮小する方法について説明しました。
＃2テーマを微調整して適切なサムネイルを生成する
画像をWordPressにアップロードすると、WordPressはいくつかのサムネイルを生成します。 これらのサムネイルはテーマによって定義されます。これは、画像の大きいバージョンまたは小さいバージョンがいつ必要になるかを知っているテーマであるためです。
たとえば、注目の画像は1200x800pxです。 これらのディメンションは、投稿自体を表示するときに最適に機能します。
これは明らかにこのようなものには多すぎます：
そのため、この特定のケースでは、テーマはわずか480x320pxの新しいサムネイルサイズを登録し、投稿リスト画面で使用されます。
テーマが適切なサムネイルを生成していないと思われる場合は、WordPressのドキュメントを読んで、set_post_thumbnail_sizeを使用してサムネイルのサイズを定義する方法、またはset_post_thumbnail_sizeを使用して追加のサムネイルを定義する方法を確認することをおadd_image_sizeします。
そして、いつものように、これについてサポートが必要な場合は、下のコメントセクションでお知らせください。喜んでサポートさせていただきます（または、それについて投稿することもできますか？）
＃3画像サイズを巧みに使用する
WordPressは、メディアライブラリにある画像の複数のサムネイルを生成するため、テーマは考えられる各シナリオで最高の画像を使用できます。 しかし、ここで興味深い部分があります。ページや投稿に画像を挿入するときにサムネイルを使用することもできます。
投稿に画像を挿入するときは、サイドバーを見て、ニーズに最適なサイズを選択してください。
たとえば、このように狭くて小さい画像を配置する場合は、小さい画像（300x200px）が最適です。
しかし、同じサムネイルを大きな画像に使用すると、ひどい結果になります。
より解像度の高いバージョンを使用することをお勧めします。
＃4適切な画像形式を使用する
さまざまな画像形式があり、それぞれに画像を圧縮する長所と短所があります。 最もよく使用される形式は次のとおりです。
- PNG。 たとえば、WordPressエディターのスクリーンショットなど、画像が含まれていないスクリーンショットを共有するための優れた画像形式。
- JPG。 世界で最も普及しているフォーマットの1つ。 事実上すべてのタイプの写真で非常にうまく機能し、非常に高い圧縮率を可能にします。 ただし、これは完全ではありません。写真のエッジが非常に鋭い場合（たとえば、テキストや描画がある場合）、低い圧縮率を使用する必要があります。そうしないと、画像に醜いアーティファクトが発生するリスクがあります。
- GIF。 インターネット（およびソーシャルメディアプラットフォーム）の王様。 アニメーションを可能にするフォーマットタイプです。 正直なところ、私たちが現在使用しているすべての「GIF」は、実際には（短い）ビデオであり、より優れた圧縮率と高品質を提供していると思います…
＃5未使用の画像を削除する
時間が経つにつれて、誰も使用しないWordPressサイトに多くのレガシー画像を簡単に保存できます。 それらをすばやく削除したい場合は、この投稿でToniがその方法を説明します。
＃6遅延読み込みを有効にする
それで、画像はあなたのウェブサイトを遅くしますね？ どうしても必要な場合を除いて、画像を読み込まないようにWebサイトに指示しないのはなぜですか。 それは物事をスピードアップするでしょうね？ LazyLoadingと入力します。
遅延読み込みは非常に単純なアイデアです。訪問者のブラウザに表示されるはずの画像が読み込まれるまで、画像は読み込まれません。 たとえば、ウェブサイトのフッターに特定の画像がある場合、ユーザーがウェブサイトの最後に到達する前に、わざわざ画像を読み込む必要があるのはなぜですか。 彼らがそこに着くまで待って、彼らが到着したら、画像をロードします（そして、彼らが到着しない場合は、画像のロードを保存します！）
WordPress用の多くの遅延読み込みプラグインがあります。 SiteGroundイベントのような一部のホスティングプロバイダーは、インストールにこのオプションを含めています。 ダッシュボードでオプションを探して有効にするだけです。
今日の投稿があなたのウェブの読み込み速度を少し改善するのに役立つことを願っています。 このように簡単に修正して良い結果を出すことができるものはほとんどありません。 乾杯と幸運！
UnsplashのIcons8チームの注目の画像。