WordPressで、アップロードした画像がぼやける - 基本JPG圧縮を変更する方法

FacebookさえずりredditPinterestのLinkedInのmail

ワードプレスでアップロードした画像がぼやけるがあります。 画像がソースに比べて多くの曇りの問題が発生した場合、以下の説明に基づいて、ワードプレスで画像をアップロードする際に、画像を圧縮する機能を無効にして、大きな画像をアップロードする際に、画像サイズが縮小される機能をオフにして、問題の解決を試してみることができます。

画像の最適化

ワードプレスで画像をメディアライブラリにアップロードすると、元の画像はそのまま複数のバージョンのサムネイルを生成します。 伝言板の 設定>メディアで、基本的に生成されたサムネイルを設定することができます。 そしてテーマとプラグインでもいくつかのサイズのサムネイルを生成することができます。

画像をアップロードする前に、画像をWeb用に最適化して上げれば、Webホスティングスペースも削減し、ページの読み込み速度も上げてSEO(検索エンジン最適化)に肯定的な影響を与えます。

ワードプレスでは、EWWW Image OptimizerやWP Smushようなプラグインを使用すると、画像をアップロードする際に、画像のサイズを削減します。

compressor.ioというイメージの圧縮サービスを提供するサイトを利用して、画像を減らして上げています。 Photoshopを開いてイメージをロードし、Web用に保存することが面倒なので、この方法だけを利用することになりますね。

ワードプレス画像圧縮プラグイン
ワードプレス画像圧縮プラグインWP Smush - 現在100万を超えるサイトに設置されて使用されている。

しかし、このようなプラグインを使用すると、サーバーは、追加の作業を必要があるため、サーバーのリソースを消費します。 どうしても必要な場合を除き、このようなプラグインを使用するよりも、Photoshopで画像をWeb用に保存することも一つの方法です。 ( "Webホスティング容量を節約する - 画像を最適化してファイルサイズを減らしてみよう"参照)

しかし、場合によっては、画像を上げれば、元のに比べて、淡色表示されている場合があります。 このような場合、ワードプレスの基本的なJPG圧縮機能のために、このような現象が発生することがあります。

ワードプレスでは、メディアライブラリに上げる画像に対して、元はそのままに、サムネイルを作成するときに追加で圧縮をすることになります。 既に圧縮された画像を上げたら、二重に圧縮され、実際よりもぼやけて見える場合があります。

ワードプレス4.5からワードプレスでは、デフォルトの圧縮設定で82を使用します。 以前のバージョンでは、この設定が90でした。

ワードプレス画像がぼやけるワードプレスの基本JPG圧縮の設定を変更する方法

WP Smushような画像圧縮プラグインを既に使用している場合、ワードプレスの基本圧縮機能のために、画像の品質が低下することがあります。 この場合、デフォルトJPG圧縮設定を適用しないようにする方がよいことがあります。 または、現在上げる画像のサイズを減らして、Webホスティング容量を節約したいと思うことがあります。

このような場合、テーマの関数ファイルに簡単なコードを追加して、ワードプレスの基本JPG圧縮を解除したり、調整することができます。

add_filter('jpeg_quality', function($arg){return 100;});

100は、画像品質が最も高いことを意味します。 つまり、画像を圧縮しません。

圧縮率を高めたい場合には、数字を調整してくれます。

add_filter('jpeg_quality', function($arg){return 75;});

75に設定すると、画像がデフォルトの設定よりも圧縮されて生成されるサムネイルのサイズは小さくなりますが、その分画質が低下します。

このコードを入れると新しくアップロードされた画像に対してサムネイルを作成するときに適用されます。 以前に作成されたサムネイルには適用されません。 以前に作成されたバージョンにも適用する サムネイルを再生成 同じプラグインを使用して、サムネイルを再生成してくれればされます。

大きな画像ファイルをアップロードする際の画像サイズが減少する現象

ワードプレス5.3以降のバージョンでは、大きな画像ファイルをアップロードすると、画像の水平方向または垂直方向のサイズの最大値が2560pxに減少します。 大きな画像をアップロードする際に、元のサイズを維持したい場合は、次記事を参照してください。

おわりに

画像の解像度が無条件に高い良いことはありません。 Web用に合わせて画像を最適化して上げれば、Webスペースも節約し、サイト速度も向上させることができます。

また、画像をアップロードすると、インストールされてテーマとプラグインに応じてさまざまなサイズの追加画像(サムネイル)が生成され、意外に多くのスペースを占有することができます。 したがって、安価なWebホスティングに加入するとすぐに、Webホスティングディスクスペースを排出されます。 このため、「アップロードされたファイルがwp-content / uploads / 2018 / 10に移すことができません」などのエラーが発生する可能性があります。

画像のアップロードエラーは、権限の問題など、さまざまな原因が考えられますが、最近では主に、Webホスティングスペース不足である場合があります。 より大規模なWebホスティングスペースが必要な場合 ブルーホストまたはサイトグラウンド 同じ海外ホスティングを利用みることができます。

注:



10のコメント

  1. 今答えてくださるかよく分からないですね。
    ADD_FILTER( 'jpeg_quality'、関数($の引数){100を返します;});
    もし私jpeg桁のpngを入れるとpng画像にも適用できますか?
    Slider Revolution 書いているpngファイルを入れるとプレビューでは大丈夫だ
    直接見ると、画像が多くぼやけています〓〓

    応答
    • コードを入力した後に画像を上げても同じ現象が発生しますか?

      FTPを介して画像を直接上げた後の画像のURLに画像を入れてみていかがでしょうか
      例えば/ wp-content / uploads /フォルダの下にimagesという名前のフォルダを作成し、画像を上げれば、ドメインアドレス/wp-content/uploads/images/abc.pngが画像のURLになります。

      応答
  2. 文よく読みました。 🙂もし写真だけjpeg_qualityを100にすることはできないでしょうか?

    応答
    • こんにちは、Jason様。

      思うようになるかは分からないが... ftpに直接ファイルをアップロードした後、画像ファイルへのリンクとして画像を挿入する方法はどうでしょうか?
      例えば/ imagesフォルダかをルートディレクトリの下に作成し、イメージを挿入すると、サイトのアドレス/images/example.jpgよう画像を挿入することができるようになります。
      しかし、今後のサイトを以前またはバックアップするときに、このフォルダ内のファイルが除外されることがありますので、/ wp-content /フォルダの下にimagesフォルダを作成してもなりそうです。

      応答
  3. ありがとうございます! ところで、第チャイルドテーマ円function.phpファイルがなく、style.cssファイルのみね! これだけ親テーマfunctionファイルに貼り付けた任意のチャイルドテーマの親フォルダにあるfunction.phpをそのままボクブトに持って来て追加してもされている部分はありますか?

    応答
    • こんにちは?

      チャイルドテーマにfunctions.phpファイルを一つ造り親フォルダ内にある関数ファイルに貼り入れたコードを削除して、代わりにチャイルドテーマの関数ファイルに追加してください。

      応答
  4. 気になります
    ADD_FILTER( 'jpeg_quality'、関数($の引数){100を返します;});
    これはどこのパスに入れるといいですか?

    応答
    • 次の記事を参考にしてください。

      https://www.thewordcracker.com/basic/how-to-add-custom-codes-to-wordpress/

      応答
  5. 私はMac OSを使用中なのに
    ImageOptimというプログラムで画像の圧縮をしています。
    一番編んですよ。
    ウィンドウには、かどうか分からないが...

    応答
    • マックで利用できる、すでに圧縮プログラムに関する情報を教えていただきありがとうございます。

      Photoshopで画像をウェブに最適化して保存する機能を提供します。

      マックを使ってみたいけど、活用性が落ちるようで気軽に購入ははないしています。

      応答

コメントを残す