ロゴ

Shopify 画像サイズを最適化する7つのベストな方法

Shopify で商品を販売する場合、最適化が鍵となります。商品画像は、できるだけ鮮明で高品質でありながら、ファイルサイズはできるだけ小さくしたいものです。このバランスを取るのは難しいことですが、Shopify の画像を品質とファイルサイズの両方で最適化するためにできることがいくつかあります。

Shopify 画像サイズを最適化する最善の方法は、正しいファイル形式を使用し、画像をピクセル寸法1080px前後に最適化することです。画像が大きすぎる場合は、画像圧縮ツールを使うことができます。また、altテキストを使用し、コンテンツ・デリバリー・ネットワーク(CDN)を使用する必要があります。 

画像の最適化をマスターするには少し時間がかかりますが、長い目で見ればその価値はあります。ページの読み込みが速くなるだけでなく、在庫の管理もしやすくなります。この記事では、Shopify における画像最適化のトップヒントを探ります。

なぜShopify で画像を最適化する必要があるのですか?

画像をリサイズしたい理由は、ページの読み込みをできるだけ速くするために、ファイルサイズをできるだけ小さくする必要があるからです。

Googleは検索結果において、読み込みの速いページを好みます。また、読み込みの速いランディングページを持つことで、商品のコンバージョン率が上がることは実証済みです。

ページの読み込みに時間がかかりすぎると、特にモバイルネットワーク接続を使用している場合、店舗訪問者は離れてしまいます。最近のウェブサイト訪問者のアテンション・スパンは非常に短くなっています。

換算率
クレジット -Cloudflare

2.4秒で読み込まれたページのコンバージョン率は1.9%であったのに対し、5.7秒以上のページのコンバージョン率は0.6%程度であった。詳細はCloudflareの記事をご覧ください。

ページスピードを速めることで、より多くの収益を上げられるとしたら、何を待っているのか?


DDAデジタル資産

デジタル製品の販売?

デジタル商品配送Shopify アプリ.

Shopify 自らが選んだスタッフ。


画像を最適化する方法Shopify

1.正しいファイル形式を使用する

Shopify 画像サイズを最適化する最初のステップは、適切なファイル形式を使用することです。商品画像の場合、最も一般的なフォーマットはJPEGとPNGの2つです。しかし、WEBPという新しいフォーマットが登場しました。

JPEGは一般的に写真に適しており、PNGは透明な背景(アルファチャンネル)を持つ画像に適しています。

クラウドフレアを利用する

私からの提案は、最初に正しいフォーマットで画像をサイトに追加し、その後Cloudflare CDNを使用することです。Cloudflareを使えば、訪問者にWEBP画像を自動的に配信することができる。

以下のオプションを有効にしてください:

スクリーンショット 2022 08 29 at 13.29.33
スクリーンショット 2022 08 29 at 13.29.42

2.画像のサイズを変更する

正しいファイル形式が決まったら、画像のサイズを確認する必要があります。Shopify 、商品画像の標準サイズはおよそ1024×1024ピクセルです。

画像がこれより大きい場合は、画像サイズ変更ツールを使って適切なサイズに縮小することができます。

画像の解像度をリサイズすると、ファイルサイズが大幅に小さくなります。しかし、画質の維持とファイルサイズの縮小のバランスを見極める必要があります。

3.画像を圧縮する

次のステップは、画像を圧縮することです。これは、画像の圧縮率を変えることで、画像のファイルサイズを小さくすることを意味します。これにはいくつかの方法がありますが、簡単な方法はTinyIMGのようなオンラインツールを使うことです。画像をサイトにアップロードするだけで、自動的に圧縮してくれます。

また、Photoshopがあれば、画像のフォルダを素早くバッチ処理することもできます。Photoshopを使ってShopify 、画像を圧縮する方法については、こちらのガイドをご覧ください。

4.altテキストを使う

もうひとつの重要な最適化ステップは、画像にaltテキストを使用することです。altテキストは、検索エンジンやスクリーンリーダーが使用する画像の短い説明文です。検索エンジンやスクリーンリーダーが、その画像が何なのか、何についての画像なのかを理解するのに役立ちます。各画像の設定で、画像にaltテキストを追加することができます。

ハーバード大学のコンテンツ・クリエイター・リソース・ライブラリーによると、質の高いaltテキストを書く鍵は、情報量が多く、かつ簡潔な説明を作成することに集中することだという。

白地に黒革のドレスシューズ

例えば、黒い靴の画像があるとします。この画像のaltテキストは、"black leather dress shoes on a white background"が良いでしょう。 

画像が文章の文脈と明確に対になっている場合、画像が使われている文脈を説明することで、altテキストを次のレベルに引き上げることができます。例えば、人道主義的な活動に関する記事の中で、「就職面接のためにホームレスの女性に贈られる黒い革のドレスシューズ」というラベルを画像に付けることができます。

5.画像ファイル名に正しい単語を使用する

もうひとつ気をつけなければならないのは、画像のファイル名です。画像を保存する際は、説明的なキーワードを含む最適なファイル名を使用してください。

例えば、青い靴の画像があれば、"blue-shoes.jpg"として保存する。

6.コンテンツ・デリバリー・ネットワーク(CDN)を利用する

CDNは、世界中のサーバーにコンテンツを保存することで、ユーザーにより速くコンテンツを届けるためのサービスです。ユーザーがあなたのコンテンツにアクセスしようとすると、最も近いサーバーに誘導されます。これにより、画像の読み込み時間やその他のコンテンツを改善することができます。

CDNを使うべきかどうか迷っている場合、考慮すべき点がいくつかあります。まず、ウェブサイトのトラフィックを見てみましょう。世界のさまざまな地域から多くの訪問者がある場合、CDNはそれらの訪問者の読み込み時間を改善するのに役立ちます。

もうひとつ考慮すべきなのは、ウェブサイトから提供するファイルの種類です。画像や動画など、大きなファイルが複数ある場合は、CDNを利用することでサーバーへの負担を軽減することができます。

最後に、CDNを使用するコストを検討しましょう。予算に限りがある場合は、無料で利用できるCDNサービスもあります。しかし、リソースに余裕がある場合は、有料のCDNサービスに投資することで、より多くの機能とより良いパフォーマンスを提供することができます。

私の提案 - Cloudflareを使う

Cloudflareは最も利用されている最高のCDNのひとつで、 Shopify !

しかし、Cloudflareをあなたのストアに追加すれば、画像の最適化、CSS、Javascriptの配信など、より強化された機能を利用することができます。Cloudflareには、サイトの高速化に役立つ様々な無料および有料機能があります。その一部をご紹介します:

  • Polish- お客様のドメインでホストされている画像を最適化することで、画像のロード時間を改善します。オプションで、WebP画像コーデックをサポートされているクライアントで使用すると、さらにパフォーマンスが向上します。
  • Auto Minify- ウェブサイト上のソースコードのファイルサイズを縮小します。
  • Brotli- Brotli圧縮を適用することで、訪問者のHTTPSトラフィックのページ読み込み時間を短縮します。
  • Mirage- ネットワーク接続の遅いモバイルデバイスで画像を含むページのロード時間を改善します。
  • Rocket Loader- JavaScriptを含むページの描画時間を改善します。
cloudflareページ速度テスト

7.GIFを使わない

GIFは旧式だ。通常、ファイルサイズが非常に大きく、ページの表示速度が極端に遅くなります。ほとんどの場合、もうGIFを使う必要はなく、代わりにMP4を使うことができます。

それでもGIFを使うべき唯一の場面は、画像のアップロードしか許可されていない場合で、GIFは技術的に画像ファイルなので動きが欲しい場合です。

最新のブラウザでMP4ビデオを使用できるようになりました。MP4はより小さく圧縮され、品質もはるかに優れています!GIFの代わりにMP4動画を使う方法はこちらをご覧ください。

8.画像の遅延ロード

レイジーローディングとは、ページ上で画像や動画を読み込む際に使われる用語です。通常、テーマのコードに記述されているか、PageFlyのようなページビルダーを使用している場合は、画像を自動的に遅延ロードするようにページを設定することができます。

これにより、すべての重要なコンテンツが最初にページにロードされ、その後に画像がロードされます。

9.画像を最適化するShopify アプリを使用する。

画像最適化のためのShopify アプリはたくさんありますが、その多くは素晴らしいものではなく、おそらくあなたのストアの速度をより遅くするでしょう。画像最適化Shopify アプリはこちらでご確認ください。

賢明な選択をし、人々がどんなものを使っていて、どんなものを薦めるのか、記事をチェックしてみるのもいいかもしれない。

画像最適化shopify アプリ

最後の言葉

何かご提案やご質問がございましたら、ご連絡ください!私たちはShopify アプリとストアを構築しています。