Blurry image incidents are majority by theme styling, means design of image dimensions in pixels that may not play nicely with WooCommerce.

Update as of WooCommerce 3.3 Back to top

WooCommerce version 3.3 and higher comes with support for themes compatible with WooCommerce and improvement to image sizes rendering and cropping.The most of blurry image incidents is caused by the theme styling. これらの新機能は、以下を意味します。

• テーマの非互換性やオーバーライドコードによる画像のぼやけは、もはや発生しないでしょう。
• サムネイルのサイズ変更は、自動または手動で行うことができます。
• 顧客に表示する画像は、デフォルトで常に美しく見えるので、製品は売れ続けます！

これらの新機能の使用方法については、次を参照してください。

その他のソリューション トップに戻る

WooCommerce 3.3 より前のバージョンを使用している場合は、上記の機能を利用するために最新バージョンに更新することをお勧めします。

何らかの理由で最新版を使用したくない場合、または 3.3 にアップデートしても問題が解決されない場合は、次の原因が考えられます：

• 画像サイズの設定が小さすぎる。
• オリジナル画像の解像度が高すぎる。

これを解決するには:

• 画像の寸法がテーマの寸法と一致するか高くする。

お使いのテーマが求める最大画像サイズを見つける方法は、動画と下記で紹介しています。

画像の種類 トップに戻る

• 単一商品画像: 個々の製品詳細ページで最も大きな画像で、メイン/フィーチャー画像を指します。
• カタログ画像。 ショップページ、商品カテゴリページ、関連商品、アップセル、クロスセルなどの商品ループで使用される中型の画像です。
• 商品サムネイル画像。

Standard image dimensions Back to top

WooCommerce バージョン 3.2x 以下では、商品画像の設定は WooCommerce > 設定 > 商品 > 表示 > 商品画像 で確認することができます。 最初の数字はwidth、2番目の数字はheightであることに注意してください。

入力した値に合わせて、アップロードした画像のサイズが変更されます。 たとえば、設定が 100×100 で、300×600 の画像をアップロードした場合、100×200 にリサイズされます。 また、「ハードクロップ」を選択すると、アップロードした生の画像に関係なく、設定で指定したサイズになるように強制されるので、縮尺が歪むのではなく、切り取られます。

商品画像をアップロードした後に設定を変更した場合、変更を適用するには WordPress でサムネイルを再作成する必要があります。 これを行うには、Regenerate Thumbnails プラグインを使用することをお勧めします。

WooCommerce バージョン 3.0 以降は、サムネイルが表示されないことがあります。3では、商品画像の設定は、WooCommerce > Product Images:

テーマの商品画像寸法を調べる トップに戻る

選んだテーマが画像の最大サイズを指定するので、WooCommerceで設定するにはそのテーマで表示する寸法を知る必要があります。

カタログ画像 トップに戻る

あなたのテーマがカタログサムネイルを最も大きくレンダリングする場所を決定してください。 いくつかのケースでは、これはショップページであり、Twenty Elevenテーマでは、それは関連製品のループです。

選択したブラウザで開発者ツールを有効にすると、画像を右クリックして、「検査」または「要素を検査」を選択できます。 これで画像の寸法がわかります。

Storefront (上記) では、最大のカタログ画像は 213 x 213px でレンダリングされます。

単一の製品画像 トップに戻る

1 つの製品画像 (製品ページで最大の画像) についてこのプロセスを繰り返します。

Storefront では、最大の Single Product Image は 298 x 298px でレンダリングされます。

Product Thumbnail Back to top

最小は、製品ギャラリー内のサムネイルと思われます。 検査プロセスを繰り返して寸法を取得します。

Storefront では、43 x 43px で表示されます。

画像の寸法を調整してサムネイルを再生成する トップに戻る

特定のテーマに関するすべてのサムネイル画像サイズがわかったので、今後の画像サイズがこのサイズまたはそれより大きくなるよう、これらの新しいサイズを WooCommerce に追加することができます。

WooCommerce > 設定 > 商品 > 表示で、最大イメージ サイズが、テーマがこれらのサムネイル用にレンダリングする寸法と少なくとも同じ大きさであることを確認します。

アップロードされた新しい商品画像は、この設定でサムネイルを持つようになり、歪みやぼやけなしに表示されるはずです。 古い画像を更新するには、WordPress でサムネイルを再生成する必要があります。 これを行う優れたプラグインが Regenerate Thumbnails です。

Retina support トップに戻る

HiDPI ディスプレイは一般に Retina ディスプレイとして知られており、古いディスプレイよりも 2 倍以上のピクセル数を含んでいます。 Retina ディスプレイでピクセルが完璧な画像を表示するには、テーマによって表示されるサイズの 2 倍になるようにサムネイルを設定します。 たとえば、テーマが80×80pxで画像を表示する場合、160×160pxになるようにします。