ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月14日| 12のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

画像の最適化

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

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

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

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

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

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

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

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

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

WordPress 画像がぼやける WordPress 基本JPG圧縮の設定を変更する方法

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

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

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

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

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

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

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

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

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

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

おわりに

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

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

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

メモ:



12のコメント

コメント

    • サムネイルを再生成しても同じですか?

      表示されるサムネイルのサイズを大きく設定し、CSSでサイズを減らす方法はないでしょうか?

      Newspaper テーマの姉妹のテーマであるNewsmagというテーマで、このような方法を利用したことありました。 サムネイル透明度を高めることができました。 次の記事を参照してみてください:

      https://avada.tistory.com/1734

      応答
  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. 저는 Mac OS를 사용중인데
    ImageOptim 이라는 프로그램으로 이미지 압축을 하고 있습니다.
    제일 편하더라구요.
    윈도우에는 있는지 모르겠지만...

    응답
    • 맥에서 사용할 수 있는 이미 압축 프로그램에 대한 정보를 알려주셔서 감사합니다.

      포토샵에서 이미지를 웹에 최적화하여 저장하는 기능을 제공합니다.

      맥을 사용해보고 싶지만, 활용성이 떨어질 것 같아서 선뜻 구입은는 못 하고 있습니다.

      응답