WordPress サイトでは   、デフォルトで  各画像のサイズが自動的に縮小されます。 ほとんどのユーザーの  画像は大きすぎることが多いため、モバイルでの Web の読み込みを高速化するため  。

画像がぼやけるのはなぜですか？

WordPressは見た目が変わるシステムだからです。 開くことができるデバイス (  レスポンシブ )に応じて、Web サイトに 1 つの画像をアップロードすると、WordPress システムが自動的に 3 つのサイズの画像を生成します。

• サムネイルのサイズ
• ミディアムサイズ
• サイズが大きい

幅x 高さ (  ピクセル単位の寸法)を構成するサイズは、 WordPress のバージョンと使用する テーマによって異なります。

詳細:  サムネイルとは?

[設定] > [メディア] セクションで、Web 上のデフォルトのサイズをピクセル単位で表示します。

WordPress 自体がデフォルトのサイズをピクセル単位で持っている場合。 いくつかの印象を与える デフォルト  のサイズは、私たちがウェブ上でデザインしたフォーマットよりも小さいです。 それは私たちの写真をそれほど鮮明にしません。

解決

正しい修正  実際には、  画像を Web にアップロードする前に、ピクセル単位で寸法を設定する必要があります。 デフォルトでは、ほとんどのコンテンツはデスクトップで実際に使用されるサイズよりも小さく設定されています。これは、WordPress がモバイル レンダリングを最初に優先するためである可能性があります。

寸法をピクセル単位で指定

さまざまな Web テストに基づいて、サムネイルとメディア セクションのサイズを少し大きくすることをお勧めします。 代わりにこの写真のようにしましょう。

Regenerate Thumbnails Plugin でぼやけた画像を修正します。

上の画像のようにメディアの寸法を調整する前に、誰が画像をウェブに載せたのでしょう。 その結果、古い画像はそれに応じて寸法を変更できなくなります。強制するには、Regenerate Thumbnails プラグインを使用する必要があります。 古い写真に  画像の  サイズを変更して鮮明にする

方法は次のとおりです。

Regenerate Thumbnails プラグインをインストールします   。

次に、[ツール] > [サムネイルの再構築] > [すべての添付ファイルのサムネイルの再構築] に移動します。

この点をクリックするだけです。 これで、私たちのウェブサイトの写真の寸法を解決することができました。

ただし、サムネイルを再作成するには、一度だけ行う必要があるため、完了したら. どの絵も鮮明です。 このプラグインを削除することをお勧めします。

コンテンツがぼやけた画像や小さな画像が全画面表示されない問題を解決する

問題を抱えている一部の人々のために  写真をアップロードして記事を書きます。 そして、ウェブ上に表示される写真は小さいです。 原作の絵は良かったのに

この時点での問題は、Web 上のデフォルトの画像レンダリングが原因です。WordPress は常に画像を中サイズで表示するため、配置する画像が通常よりも小さくなります。 または画像がはっきりしない

解決

「挿入」を押して公開する前に記事に画像をアップロードするたびに  、常にフルサイズの画像サイズを指定する必要があります。下の写真を参照してください。

または、Web ページが Page Builder で設計されている場合、要素画像を追加するときに、画像サイズを調整するオプションを探して、常に元のサイズまたはフル サイズを選択します。

解決

次のようにピクセル単位で寸法を設定することです

次に、Regenerate Thumbnails プラグインを使用して、注目の画像のみの Regenerate Thumbnails を押して、新しいサムネイル セットを作成します。

商品の表紙画像が不鮮明です。

製品カバーの画像がこのようにぼやけているという問題がある場合は、後で問題を解決します 

この時点での問題の原因は、デフォルトの商品画像のサムネイル表示サイズが小さすぎることです。 この新しい値を 400 以上のサイズに調整しましょう。

この時点で、Personalization> WooCommerce> Product Image で編集し、画像に従って設定する必要があります。

要約する

WordPress サイトの画像が粗い、またはぼやけています。 デフォルトの WordPress のおかげで、彼はすべての Web 画像が大きすぎるのではないかと心配していました。 そのため、画像を中間レベルで表示するため、画像をウェブにアップロードするたびに. 常に原寸または元のサイズを選択してください。

広報

すでにこの記事を読んでいる方へ。 プロとして、WordPress + Woocommerce を使用してオンライン ストアを構築することに興味があります。2021 年 8 月 21 ～ 22 日に、学習者が最大限に活用できるように、Woocommerce Expert コースを 1 回のライブ クラス、1 ラウンドあたり 6 人の少人数グループに開放しました。 同時に学び、フォローしてください。