Web用の画像の最適化：実用ガイド

公開: 2021-08-15

彼らは、写真は千の言葉の価値があると言います。これが、eコマースで画像が非常に重要である理由の1つです。 顧客が製品を手に取ったり、触れたり、検査したりすることができなければ、製品の色、品質、ストーリーを理解するために画像に大きく依存します。

したがって、画像は高解像度で鮮明である必要があることは言うまでもありません。 しかし、これには代償が伴います。 大きくて高解像度の画像は、ファイルサイズが非常に大きくなる可能性があります。 これらのいくつかをあなたのサイトに置いてください、そしてあなたのオンラインストアをナビゲートするそのきびきびとした経験は糖蜜を通して泳いでいるように感じることになるかもしれません。 これにより訪問者がバウンスするだけでなく、やがてGoogleもそれに気づき、SEOに影響を与える可能性があります。

eコマースでは、サイトの画像を保存するときに、画質と画像ファイルサイズのバランスをとることが重要です。 この投稿では、その方法を紹介します。

商品の写真を撮ってストアに直接アップロードすることが知られている場合は、このチュートリアルが最適です。 ファイルサイズを考慮して画像を保存するための正式な知識やプロセスがない場合は、このチュートリアルが適しています。 あなたのサイトにたくさんの画像があり、物事が遅く感じているなら、このチュートリアルはあなたのためです。 オンラインストアの構築をまだ開始していない場合は、このチュートリアルが特に役立ちます。

画像を最適化する準備はできましたか？

画像ファイルタイプのオプション

Web用に最適化された画像を保存するために焦点を当てたい3つの主要なファイルタイプがあります：GIF、JPG、PNG。 各ファイルタイプには独自の長所と短所があり、画像を保存するときはこれらを知って覚えておくことが非常に重要です。

JPGの操作

JPG（JPEGとも呼ばれます）は、Web上の画像で最も一般的なファイルタイプです。 JPGは、多くの色、影、グラデーション、または複雑なパターンを含む写真や複雑な画像に最適です。 JPGには膨大なカラーパレットがあるため、JPGはこれらのタイプの画像を適切に処理します。

JPGは、高品質、低品質、またはその間の任意の場所に保存することもできます。 これにより、画像を希望どおりに調整して保存し、品質とファイルサイズのバランスをとることができます。

広告

eコマース起業家のユースケース： JPEGはオンラインで最も人気のあるファイル形式であり、製品の画像、写真、ホームページのヒーローバナー/画像に一般的に使用されています。

PNGの操作

PNGは、オンラインで人気のあるもう1つのファイル形式です。 Adobe Photoshopでは、PNGをPNG-8またはPNG-24として保存するオプションがあります。

  • PNG-8には、256色の非常に限られたカラーパレットがあります。 画像サイズは小さくなりますが、これは複雑な画像や写真には適していません。
  • PNG-24ははるかに高品質の画像を提供しますが、ファイルサイズが大きくなります。

最も重要なことは、PNGが透明度を処理できることです。 これは、PNGとJPEGの最大の違いの1つです。

eコマース起業家のユースケース： PNGは高品質で透明性を処理できるため、通常はロゴに使用されます。 これはロゴに適しています。ロゴにはほとんどの場合透明性が必要であり、高品質が必要な場合があります。また、ロゴはサイト全体のごく一部であるため、ファイルサイズはまだ小さいためです。

GIFの操作

GIFは何年も前に人気がありましたが、それでも数色しか必要とされない小さな画像サイズのオプションです。 PNG-8と同様に、GIFファイルは256色のみに制限されています。 このため、商品の写真にGIFを使用しないでください。

eコマース起業家のユースケース： GIFはロゴに使用できますが、色が限られているため、eコマースのほとんどのユースケースではそれほど人気が​​ありません。

画像を適切に保存する

当然のことながら、大きな画像の読み込みには時間がかかります。 大きいと言うときは、画像のサイズではなくファイルサイズ、つまりKB、MB、GBなどの値を指します。47％のユーザーがウェブページが2秒以内に読み込まれることを期待しているため、40 ％は、読み込みに3秒以上かかるページを破棄します。画像が十分に小さいため、サイトを高速化できることが重要です。

オンラインストア用に画像を適切に最適化するためにできることは3つあります。

適切な寸法を保存する

Photoshopで画像を開き、100％で表示する必要があります。 これにより、画像をWeb用に保存するときに、コンピューターのモニターに表示される正確なサイズで画像を表示できます。

Web用に画像を保存

画像の品質を大幅に低下させることなく、ファイルサイズを縮小することが可能です。 画像の品質を大幅に低下させることなくファイルサイズを縮小する私たちのお気に入りの方法は、Photoshopの「Web用に保存」機能を使用することです。 Photoshopで画像を開き、[ファイル]> [エクスポート]> [Web用に保存（レガシー）...]に移動します。 エクスポート品質を選択できるウィンドウが表示されます。 60の品質は、ファイルサイズをメガバイト未満に減らし、品質に目立った違いがないため、最適に機能することがわかりました。

Web用の画像を圧縮する

画像圧縮アプリは、画像のファイルサイズを縮小する最も簡単な方法です。 これらのタイプのツールは、追加のカラープロファイルやメタデータ（写真が撮影された場所のジオロケーションなど）など、不要な画像ファイル内の非表示データを削除します。 これらのツールは、画質を損なうことなくファイルサイズを小さくするための迅速で簡単な方法を提供します。

画像圧縮アプリとサービス

広告

  • ImageOptim
  • ShortPixel
  • TinyJPG
  • TinyPNG
  • Compressor.io
  • クラーケン
  • ImageOptimizer
  • Crush Pics（Shopifyアプリ）
  • ミニファイア（Shopifyアプリ）

Web用の画像の保存：ウォークスルーの例

まず、私たちがStiff Salt（実際には友人とShopify開発者が所有している）であり、オンラインストアの機能画像を変更したいとします。

固い塩

私たちはシーンを設定し、塩を絶対に信じられないほどに見せ、DSLRカメラで写真を撮ります。 写真があります。 何て美しい！

写真塩

しかし…ファイルサイズは巨大です！ 正確には14.6MB。 そして写真の寸法は5184×3456ピクセルです。 現在、これは完全に使用できません。 それは文字通り映画サイズのポスターを印刷するのに十分な大きさです。 14.6 MBの場合、この画像を訪問者のコンピューターにロードするにはかなりの時間がかかります。 これは良くありません。

オリジナル画像サイズ

仕事に取り掛かり、画像サイズとファイルサイズを大幅に削減する時が来ました。

画像に対して3つのことを行うことを忘れないでください。

  • 画像サイズを小さくする：これは写真の寸法です
  • ファイルサイズを縮小するために適切に画像を保存する：これは、ファイルのサイズと、コンピューターのハードドライブやWebサーバーに必要な容量です。
  • 画像ファイルの圧縮：スペースを占める追加の隠しデータを取り除くため

画像サイズを小さくする

使用するプログラムと個人的な好みに応じて、次のことができます。

広告

  • 保存する前に画像サイズを小さくしてください
  • 画像を保存しながら画像サイズを小さくする
  • 画像を保存してから、画像サイズを小さくしてください

簡単にするために、最初に画像サイズを小さくします。 これを行うには、Photoshopで画像を開きます（最も使いやすい画像プログラムを使用できます）。

サイズを把握するために、テーマの推奨ホームページ画像サイズを確認しました。 それは1600x 800ピクセルでした（元のピクセルは5184 x 3456ピクセルだったことを思い出してください）。

Shopifyのテーマヒーローの画像サイズの提案

Photoshopでは、[画像]> [画像サイズ]を選択します。

画像サイズの縮小

わかりました。画像のサイズ（サイズ）をより適切で、テーマ開発者が推奨するサイズに縮小しました。

画像を適切に保存する（Web用に保存）

Photoshopには、オンラインで表示するために画像ファイルを最適化する「Web用に保存」と呼ばれる特定のコマンドがあります。 通常の「保存」コマンドは、「Web用に保存」コマンドの2〜3倍のファイルサイズを作成する可能性があるため、これは重要です。

[Web用に保存]ボックスで、いくつかの選択を行う必要があります。

  • 画像タイプ：ファイルタイプは、出力ファイルの品質とサイズに影響します
  • 画質：これは重要であり、最終的なファイルサイズに大きな影響を与える可能性があります
  • 寸法：最初のステップですでにこれを行っているため、再度行う必要はありませんが、最初のステップでこれを行わなかった場合は、ここで画像の寸法を変更するだけで済みます。

この投稿の冒頭で学んだことから、JPEGは、写真や、色が多く複雑な画像に最適なファイルタイプであることがわかります。 JPEGを選択します。

広告

Webコマンド用に保存

画質については、最大から低までの5つのプリセットで選択できるスケールがあります。 各品質レベルの最終的な出力ファイルサイズを見てみましょう（この情報は、画像保存ウィンドウの下隅に表示されます）。

  • 最大： 1.38 MB
  • 非常に高い： 611 KB
  • 高： 339 KB
  • 中： 152 KB
  • 低： 86k

品質レベルを下げるたびに、画像サイズが半分近く減少することがわかります。 一般に、ほとんどの画像には高が最適な設定であることがわかりました。 このレベルでは、人間の目で画質の低下を確認することはほぼ不可能であり、ファイルサイズは最大値を選択した場合の約4分の1になります。

画像が非常に重要で詳細な画像である場合は、より高いレベルを選択して、[非常に高い]で保存することをお勧めします。

基本的に、Web用に保存することはバランスをとる行為です。個人的なニーズに合わせて、グラフィックの品質とメディアのファイルサイズのバランスをとる必要があります。

プロのヒント：一般的な経験則として、製品の写真は最大80〜150 KB、大きなホームページのヒーロー画像は最大250〜350KBにする必要があります。 これらは、あなたが目指すべき良いベンチマーク数でもあります。

Photoshop-Web用に保存-低

Web用の画像を圧縮する

Adobe Photoshopを使用した場合、画像サイズの縮小にはすでに非常に優れていますが、ImageOptimやShortPixelなどの圧縮アプリを使用すると、画像サイズをさらに5〜10％削減できる可能性があります。

ImageOptimは、Photoshopほど良くない画像を保存するために別のプログラムを使用した場合に、画像ファイルのサイズをすばやく縮小する最も簡単な方法でもあります。

前のステップの各ファイルをImageOptimにドロップすると、画像サイズをさらに5％縮小することができました。 それほど大きくはありませんが、これらはすでにPhotoshopで最適化されています。 とにかく、すべてのKBが重要です。

広告

結論

要約すると、私たちの写真は私たちが始めたときはめちゃくちゃ巨大でしたが、いくつかの簡単な手順で、写真のサイズを5184×3456から1600 x 800に縮小して、ホームページにぴったり合うようにしました。コンピュータがクラッシュする14.4MBから、はるかに合理的な336KBまで。

ウェブ用に適切に画像を保存することは、早期に学び、宗教的に実装するための重要なステップです。 各画像で10〜20％しか節約できない場合でも、時間の経過とともに、ストアとWebサイトが成長するにつれて、KBごとに大幅な節約が可能になり、訪問者、顧客、およびグーグル。

Web用に画像を最適化する方法：ビデオウォークスルー