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

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

参考までに、Webサーバーの容量とトラフィックを減らすために、画像をWebP形式で挿入することを検討してください。 私は Snagitプログラムを使用して画像ファイルをWEBP形式で保存するしてアップロードしています。

[この記事は、2022年12月20日に最後に更新されました。 ]

画像の最適化

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

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

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

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

WordPress 画像圧縮プラグイン
WordPress イメージ圧縮プラグインWP Smush - 現在100万個を超えるサイトにインストールされ使用されている。

ただし、このプラグインを使用すると、サーバーが追加の作業を行う必要があるため、サーバーリソースが消費されます。 必要な場合以外は、このようなプラグインを使用するよりも、Photoshopで画像をWeb用に保存するのもXNUMXつの方法です。 (「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に減少します。 大きな画像をアップロードする際に、元のサイズを維持したい場合は、次記事を参照してください。

その他の考慮事項

サムネイルがぼやけている場合は、2倍のサムネイルサイズを指定し、CSSを使用してサムネイルサイズを減らすことができます。 Newspaper テーマでは、このような方法が使用されていますが、 Newspaper テーマを作ったメーカーが作ったNewsmagでは、サムネイルがぼやけて見える場合があります。 このような場合は、この方法を試すことができます。 次の記事を参照してください。

別の方法として、FTPを介してメディアファイルをアップロードし、URLに画像を挿入する方法でも鮮明な画像を表示できます。

最後に、

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

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

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

メモ:

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

17のコメント

  1. こんにちは先生。 古くから先生のブログを見て一人で勉強していた人です。
    ほかではなく、最近Aのブログを始めるようになった、写真をアップロードしようとしたときに(キャプチャ本でも何でも)、写真がとても小さくてきます。 だからアップロードする前に、その画像のサイズを大きくすると、画質が割れたりしています。 しかし、BまたはCのウェブサイトは、このような問題が発生していないのに、代替なぜこのような問題が起こるか分かりません。

    1. こんにちは、テバルが様。 おそらく画像を挿入するとき、サムネイルのサイズに挿入されるようですね。 画像を追加するときに、イメージブロックのプロパティで 画像サイズ最大サイズに設定してみてください?

      https://www.screencast.com/t/jD3Tr7JNT8

      通常、メディアファイルを挿入すると、最大サイズに追加されます。 続いてサイズが小さく挿入され、画像を挿入するたびに、サイズを調整してなければなら面倒になります。 そのような場合、次のコードをテーマ関数ファイルに追加してみてください?

      function custom_image_size() {
      // Set default values for the upload media box
      update_option('image_default_align', 'center' );
      update_option('image_default_size', 'large' );
      }
      add_action('after_setup_theme', 'custom_image_size');

      コードを追加する方法は、 https://www.thewordcracker.com/basic/how-to-add-custom-codes-to-wordpress/ 文を参照してみてください。

      上記のコードは、長いされているので、古典的なエディタでは、正常に動作するようだが、 Gutenberg エディタ(ブロックエディタ)ではうまく機能するかどうかは確認することができません。

      上記の方法でよくされるか確認してみましょ?

      1. 先生、私はこの分野には、本当に自信がないので、仕事をグルチルかと思って恐れています。 もしこの部分を先生に助けを求めるなら、どのように進めでしょうか? 詳細をこれまで電子メールでお送りいただくことができお問い合わせについてでしょうか? 私の電子メールは、***************です。 ### PRIVIATE INFORMATION REMOVED ###

      2. 例えば一度してみたいと思います。 先生もしエディタはいくつかのことをスシルでしょうか? 古典的なエディタを無効にして WordPress 基本にしたら問題が解決したようです。 しかし、私は…どうやら古典エディターがもう少し快適だったㅜㅜ

      3. 問題が解決されてよかったですね。 古典的なエディタ(Classic Editor)は、2022年までに対応予定(必要であれば延長)であるため、なるべくデフォルトのエディタである Gutenberg(Gutenberg)を使用するのが望ましいと思われる。 Gutenbergが初めて導入時に抵抗がひどく古典エディタのプラグインが提供されたが、今では機能が強化され、安定化されたので慣れてくると、より便利になります。 次の記事を参考にしてください。 古典的なエディタで、より迅速に文を書くことができます。

        https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B5%AC%ED%85%90%EB%B2%A0%EB%A5%B4%ED%81%AC-%ED%82%A4%EB%B3%B4%EB%93%9C-%EB%8B%A8%EC%B6%95%ED%82%A4/

        クラシックエディタにこだわったら、同様の方法で画像サイズを「最大サイズ」に設定できます。 あるいは、提示されたコードをテーマの関数ファイルに入れると、自動的に「最大サイズ」に設定されないかと思います。 (この部分はテストしていません。)

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

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

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

      https://avada.tistory.com/1734

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

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

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

    1. こんにちは、Jason様。

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

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

    1. こんにちは?

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

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

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

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

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

댓글 남기기

* 이메일 주소는 공개되지 않습니다.