サイトの画像を最適化するためのヒント：パフォーマンスとユーザーエクスペリエンスを向上させる

あなたはグーグルがあなたのウェブサイトを軽蔑することを望まない、私たちを信じなさい。 幸いなことに、画像を最適化して、サイトの効率を向上させることができます。 それらをフォーマットする際の1つの問題は、変更がそれらの品質に影響を与える可能性があることです（これにより、訪問者がWebサイトを嫌う可能性があります）。

あなたがそれらをひどく見せない限り、それはひどいことではありません。 ウェブサイトに誇らしげに表示できるほど魅力的な画像を維持しながら、画像のファイルサイズを小さくするためのヒントとテクニックがいくつかあります。

それでは、写真を悪く見せずにフォーマットする方法と、Webとパフォーマンスのために写真を最適化する方法を見てみましょう。

画像を最適化するとはどういう意味ですか？

画像が大きいと、Webページの読み込みが遅くなり、ユーザーエクスペリエンスが低下します。 画像の最適化を使用することで、プラグインやスクリプトを使用してファイルのサイズを縮小することで、品質を維持するだけでなく、読み込み時間を改善することもできます。 一般的に使用される2つの圧縮方法は、非可逆圧縮と可逆圧縮です。

画像フォーマットの利点

そもそもなぜ写真をフォーマットする必要があるのですか？ 利点は何ですか？ 写真のパフォーマンスを最適化することには、さまざまな利点があります。 HTTPアーカイブによると、2018年11月の時点で、画像はWebページの総重量の21％を占めています。

これにより、サイトで最適化する必要のある2番目に重要な部分になり、その前にビデオのみが表示されます。

スクリプトやフォントよりも優先されます。 適切な画像最適化手順は確立するのが最も簡単なことの1つであるという事実にもかかわらず、多くのWebサイト所有者はそれを見逃しています。

最も重要な利点のいくつかを次に示します。

• スクリプトの読み込みが大幅に改善されます。 ページの読み込みに時間がかかりすぎると、訪問者がイライラして別のWebサイトにアクセスする可能性があります。
• 優れたWordPressプラグインと組み合わせて使用​​すると、SEOに大きな影響を与える可能性があります。 検索エンジンの結果では、あなたのウェブサイトは上位にランク付けされます。
• バックアップの作成が簡単になります。
• ファイルが小さいほど、使用する帯域幅は少なくなります。 これは、ネットワークとブラウザの両方で高く評価されます。
• サーバーに必要なストレージスペースの量を削減します（これは、最適化するサムネイルの数によって異なります）

Webの画質とパフォーマンスを向上させる方法

画像フォーマットの主な目的は、品質とファイルサイズのバランスを見つけることです。 これらの最適化のほとんどすべては、複数の方法で実行できます。 WordPressサイトにアップロードする前にそれらを圧縮することは、最もよく使用される方法の1つです。 これは通常、AdobePhotoshopやAffinityPhotoなどのプログラムで実行されます。

ファイル形式と圧縮タイプは、常に考慮しなければならない2つの要素です。 各画像またはファイルタイプで何が最適に機能するかを理解するには、調査する必要があります。

適切なファイル形式を選択してください

写真の編集を開始する前に、写真に最適なファイルタイプを選択していることを確認してください。 次のようなさまざまなファイルを使用できます。

• PNG —ファイルサイズは大きくなりますが、品質はほぼ同じです。 ロスレス画像形式になるように設計されていますが、損失が発生する可能性もあります。
• 非可逆および可逆最適化は、JPEGで使用されます。 品質とファイルサイズのバランスを保つために、品質レベルを設定できます。
• GIFでは256色のみが使用されます。 アニメーショングラフィックスの場合、これは理想的なオプションです。 可逆圧縮のみが使用されます。

JPEG XRやWebPなど、他にもいくつかありますが、すべてのブラウザでサポートされているわけではありません。 色の多い写真の場合はJPEGまたはJPGを使用し、プレーン画像の場合はPNGを使用する必要があります。

ロッシーvs.ロスレス最適化

許容できる画像圧縮スタイルには2つあり、それらは非可逆と可逆と呼ばれます。

「不可逆」という用語は、一部のデータを削除するフィルターを指します。 これにより画像が損なわれるため、最小化する量に注意する必要があります。 このタイプの最適化を実行するには、Adobe Photoshop、Affinity Photoなどのソフトウェアを使用できます。上記の例では、非可逆圧縮が使用されています。

「ロスレス」という用語は、データ圧縮フィルターを指します。 これによる画質への影響は最小限です。 PCでは、Photoshop、FileOptimizer、ImageOptimなどのアプリケーションを使用して可逆圧縮を行うことができます。

いくつかの圧縮戦略を試して、各画像または形式に最適な圧縮戦略を見つけるのが最善です。

画像最適化のためのツールとプログラム

写真を最適化するのに役立つ、有料と無料の両方のツールとアプリがいくつかあります。 独自の最適化を実行するためのツールを提供している企業もあれば、それを実行している企業もあります。

Affinity Photoは安価で、Adobe Photoshopとほぼ同じ機能を備えているため、私たちはAffinityPhotoを大いに支持しています。

調査すべきその他のリソースとイニシアチブは次のとおりです。

• アドビフォトショップ
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEGミニ
• OptiPNG

画像のサイズを変更して拡大縮小する

以前は、CSSにサイズを変更させるのではなく、写真を拡大縮小して送信することが重要でした。 WordPress 4.4がレスポンシブ画像をサポートするようになったため、これはもはや問題ではありません。 メディアライブラリに追加された各画像は、WordPressによって自動的にサイズ変更されます。 画像の潜在的なサイズをすべて指定することで、ブラウザは最適なサイズを選択し、他のサイズを無視できるようになりました。

メディアライブラリをクリーンアップする

メディアライブラリを同時にクリーンアップしながらスペースを節約したい場合は、MediaCleanerを使用して不要なメディアファイルを探すことができます。 プラグインはすべてのメディアファイルをスキャンし、使用されていないものをメディアクリーナーダッシュボードに表示して表示および削除します。

使用できる画像最適化プラグイン

ありがたいことに、WordPressを使用してすべてのフォーマットや圧縮を手動で処理する必要はありません。 プラグインを利用して、仕事の少なくとも一部を自動化できます。 あなたがそれらを提出するときにあなたの画像ファイルを最適化する利用可能なプラグインがたくさんあります。 すでに投稿した写真の品質も向上します。

• 画像オプティマイザーを想像する
• ShortPixel Image Optimizer
• オプティモール
• EWWWイメージオプティマイザークラウド
• Optimus Image Optimizer
• WPスマッシュ
• TinyPNG
• ImageRecycle

結論

パフォーマンスを向上させ、ベストプラクティスに従うために写真を準備すると、サイトは検索エンジン、ブラウザ、ネットワークでより好まれ、読者の読み込みが速くなります。

写真をより速く走らせるために写真を準備しましたか？ 手動で、プラグインを使用して、または両方を使用して実行しますか？ あなたが提案するプログラムやプラグインはありますか？ 他に言いたいことはありますか？

コメントセクションで、戦略とベストプラクティスについて教えてください。