サイトオーナーにとって、これはフラストレーションのたまる瞬間です。美しく鮮明なJPEG画像をアップロードしても、ライブサイトでは驚くほどソフトでぼやけて見えます。
これは、WordPressがサイトの読み込みを高速化するために画像を自動的に圧縮するためです。速度にとっては素晴らしいことですが、高品質のビジュアルを表示する必要がある写真家やビジネスオーナーにとっては問題となる可能性があります。
長年画像が多用されるウェブサイトを管理してきた経験から、適切なバランスを見つけることの重要性を理解しています。幸いなことに、この設定は完全に制御できます。
WordPressでJPEG画像の圧縮を簡単に調整する方法をご紹介します。速度をあまり犠牲にすることなく、完璧な画質を得ることができます。
このガイドで説明する内容を簡単に紹介します。必要なセクションに直接ジャンプするには、以下のリンクを使用してください。
WordPressのJPEG画像圧縮を変更する理由
WordPressウェブサイトにJPEG画像をアップロードするたびに、画像は自動的に90%の品質に圧縮されます。WordPress 4.5では、モバイルユーザーのサイトパフォーマンスを向上させるために、この数値はさらに82%に引き下げられました。
ウェブサイトに高品質な画像を表示したい写真家であれば、WordPress で画像圧縮をオフにすることができます。
WordPressで画像圧縮を無効にする方法
画像圧縮設定を変更する最も安全な方法は、WordPressに短いコードを追加することです。コードをテーマのfunctions.phpファイルに直接追加することもできますが、一般的なエラーを避けるためにコードスニペットプラグインを使用することをお勧めします。
この目的のために、私たちはWPCodeを定番のプラグインとして使用しています。なぜなら、無料であり、強力であり、初心者にも使いやすいからです。実際、私たちは Awesome Motive のすべてのウェブサイトで WPCode を使用してカスタムコードを管理しており、テーマの更新中もすべてを整理して安全に保っています。
まず、無料のWPCodeプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドに従ってください。
有効化したら、WordPressダッシュボードのコードスニペット » + スニペットを追加に移動する必要があります。その後、「カスタムコードを追加」テンプレートにマウスカーソルを合わせ、「スニペットを使用」ボタンをクリックします。
ここでカスタムスニペットを作成できる新しい画面に移動します。「WordPressでの画像圧縮を無効にする」のようなスニペットのタイトルを追加する必要があります。
その後、コードタイプのドロップダウンメニューから「PHP スニペット」を選択し、次のコードスニペットを「コードプレビュー」ペインに貼り付けます。
add_filter('jpeg_quality', function($arg){return 100;});
値を100に設定すると、WordPressは画像を最高の品質で圧縮します。
最後に、画面上部のトグルスイッチを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックする必要があります。
おめでとうございます。WordPressサイトでのJPEG圧縮が無効になりました。
写真家やアーティストでない場合は、品質にあまり違いが見られないでしょう。しかし、日常的に高品質な画像を取り扱っている人にとっては、品質の違いは明らかです。
WordPressで画像圧縮を増やす方法
圧縮品質をそのままにしておくことには、確かにパフォーマンス上のメリットがあります。しかし、必要であれば、数値を100から80などに下げて画像をより圧縮し、スペースを節約することもできます。
前の方法で行ったように、新しいWPCodeスニペットを作成し、以下のコードを貼り付けてください。
add_filter('jpeg_quality', function($arg){return 75;});
スニペットをアクティブにして保存すると、JPEG画像はより小さなファイルサイズに圧縮されます。画像は低品質に見えますが、ウェブサーバーのスペースを節約できます。
ヒント: これらの画質設定を変更する際は、サムネイルを再生成することも忘れないでください。
画像圧縮に関するよくある質問
WordPressでJPEG圧縮設定を変更することについて、よく寄せられる質問への回答を以下に示します。
WordPressのデフォルトのJPEG圧縮レベルはいくつですか？
デフォルトでは、WordPressはJPEG画像を元の品質の82%に圧縮します。この設定は、画像の鮮明さと訪問者にとってのページ読み込み速度のバランスを取るために選択されています。
圧縮設定を変更すると、既存の画像に影響しますか？
いいえ、このコードは追加後にアップロードする新しい画像にのみ適用されます。すでにメディアライブラリにある画像は変更されません。
新しい設定を以前にアップロードした画像に適用したい場合は、サムネイルを再生成する必要があります。
この方法は、画像最適化プラグインを使用するよりも優れていますか？
このコードスニペットは、デフォルトの品質設定を調整するためのシンプルで軽量な方法です。ただし、専用の画像圧縮プラグインは、さらに多くの機能を提供します。
プラグインは、外部サーバーで画像を圧縮したり、WebPのような最新フォーマットに変換したり、遅延読み込みを追加したりできます。ほとんどのユーザーにとって、完全なプラグインはウェブサイトの速度を向上させるためのより包括的なソリューションを提供します。
どのくらいの圧縮レベルを使用するのが良いですか？
デフォルトの82%は、ほとんどのウェブサイトにとって堅実な中間点です。写真家やアーティストの場合は、作品を可能な限り最高のディテールで表示するために、90%または100%に設定することもできます。
主な目標がサイトの最大速度である場合は、75％前後の値で実験できます。最良の結果が得られるように、いくつかのオプションをテストすることをお勧めします。
画像最適化に関する追加リソース
デフォルトの圧縮を変更することは、画像を効果的に管理する上でほんの一部にすぎません。速度とSEOのために画像をさらに最適化するのに役立つ他のガイドを以下に示します。
- Best WordPress Image Compression Plugins Compared – この簡単なコードスニペットが提供する以上の機能が必要な場合は、専用のプラグインが最適です。このガイドでは、利用可能な最良のオプションを比較しています。
- Web用に最適化された画像の保存方法 – WordPressにアップロードする前に、画像をWeb用に適切に準備する方法を学び、最良の結果を得てください。
- 画像SEOの初心者ガイド – 画像検索からウェブサイトへのトラフィックを増やすために、画像を検索エンジン向けに最適化する方法を発見してください。
- WordPressで画像を遅延読み込みする方法 – 遅延読み込みは、画像がユーザーの画面に表示されたときにのみ読み込むことで、ウェブサイトをより高速に感じさせる別のテクニックです。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
ケリー
例えば、これがバナー/カルーセル画像にのみ適用されるようにカスタマイズする方法はありますか？
他の画像はサイト上で圧縮しておきたいのですが、ホームページのカルーセルにある画像は訪問者が最初に目にするものなので、品質を100%に保ちたいのです！
WPBeginnerサポート
We do not have a simple way for that, in this we would recommend optimizing images before uploading them and that would solve the issue in a different way
https://www.wpbeginner.com/beginners-guide/speed-wordpress-save-images-optimized-web/
管理者
イジー・ヴァネック
WordPressはこの圧縮をJPEG画像にのみ適用するのか、それとも他の形式にもこの機能が使用されるのか、お伺いしたいと思います。特にWebP形式、そしてそれほど重要ではありませんがPNG形式に興味があります。私のウェブサイトの画像の大部分はWebP形式です。この形式はすでに高度に圧縮されていることは知っているので、WordPressによるさらなる圧縮で品質をさらに低下させたくありません。
WPBeginnerサポート
JPEG 画像圧縮は JPEG ファイルタイプにのみ影響します。
管理者
トム
何度も、そしてこのコードのさまざまなバリエーションを試しましたが、うまくいきません。他に何をすればいいのかわかりません。写真をアップロードするたびに、品質がぼやけているのがわかります。他に何かヒントはありますか？
WPBeginnerサポート
画像を圧縮/最適化する他のプラグインがインストールされていないことを確認してください。それが画像の圧縮の最も一般的な原因です。もう1つの一般的な原因は、テーマが画像をリサイズしている場合です。その場合は、以下の記事をご覧ください。
https://www.wpbeginner.com/beginners-guide/wordpress-image-sizes-beginners-guide/
管理者
トム
返信ありがとうございます。アップデートです。結局、私の写真を圧縮していたのはホスティング会社でした。私が知らなかったCDN機能が自動的に有効になっていました。それを無効にした後、私の写真は問題なくなりました。
Purnendu Mukherjee
こんにちは。
Smush、Optiomole、またはその他の画像圧縮プラグインを使用した場合、私の画像は2回圧縮されますか（WordPressで一度、プラグインで一度）？
WPBeginnerサポート
使用を計画しているプラグインのサポートに確認することをお勧めしますが、ほとんどのプラグインは標準の圧縮をキャンセルする機能を持っているはずです。
管理者
Rigsby
こんにちは、PHPを追加した後、後でインストールされた画像圧縮プラグインを上書きしますか、それともプラグインがコードを上書きしますか？以前に追加されたPHPを覚えておくのは難しいでしょう。そのため、プラグインが正しく機能しない理由を考えて頭を悩ませる可能性があります。
ありがとうございます :)
トム
「もしよろしければ、数値を100から80などに下げることができます。その後は、次のコードを貼り付けるだけです。」
コードはどこに追加すればいいですか???
WPBeginnerサポート
上記のコードと同様に、テーマのfunctions.phpまたはサイト固有のプラグインに配置します。テーマの更新から保護するために、通常はサイト固有のプラグインを推奨します。
https://www.wpbeginner.com/beginners-guide/what-why-and-how-tos-of-creating-a-site-specific-wordpress-plugin/
管理者
rob
こんにちは – 効果を発揮させるために画像を再アップロードする必要がありますか？
また、これはPNG画像にも有効ですか、それともPHPコードでJPEGをPNGに変更する必要がありますか？
ありがとうございます
WPBeginnerサポート
これは新しい画像にのみ適用され、現在の画像には適用されません。PNG圧縮について心配する必要はありません。
管理者
Netgoondoo
このコードスニペットはPHP 7で有効ですか？
WPBeginnerサポート
スニペットはまだ機能しているはずです
管理者
puspa chaulagai
こんにちは、love and fun quotesの者です。WordPressで画像の自動圧縮を停止する方法を検索中にあなたの記事を見つけました。コードを試しましたが、まだ機能しません。テーマを変更すると機能しますが、適用したテーマでは機能しません。テーマによる自動画像圧縮を削除するには、どうすればよいですか？助けてください。
WPBeginnerサポート
特定のテーマの圧縮についてサポートを受けるには、お使いのテーマのサポートに連絡する必要があります。
管理者
Sukanya
再生成しても、あまり違いが見られません。何か見落としていることはありますか？
Heather Wilson
Hello,
wordpress.com で作業しています。カスタマイズ CSS メニューからこれを行うことはできますか？できる場合、方法は？コーディングは初めてです。
WPBeginnerサポート
こんにちは、ヘザーさん、
いいえ、できません。セルフホスト型WordPress.orgと無料WordPress.comブログの違いに関するガイドをご覧ください。
管理者
Karlo Gavric
圧縮を100にしても、私の画像は品質が悪く見えます。フルサイズ（幅1300px以上）を使用した場合のみOKですが、ラージファイル（900px）を使用するとひどいです。
functions.phpに圧縮を変更するコードを追加しましたが、テーマのサプライヤーとホスティングサポートに連絡したところ、どちらも圧縮は有効になっていないとのことでした。
何かアイデアはありますか？
WPBeginnerサポート
Karlo様
すべてのプラグインを無効にし、デフォルトのテーマに切り替えてから、大きな画像をアップロードして問題が解決するかどうか確認してください。
管理者
Karlo Gavric
こんにちは、
試しましたが、問題はまだ解決しません。プラグインを有効/無効にした状態でテーマを変更しても変化がありませんでした（？！本当に混乱しています？！）
nospampls
大画像サイズをより大きな画像サイズに設定する必要があります。WordPressは画像を自動的にトリミングします…
アン
これはどういう意味ですか
fatal error をチェックするためにサイトと通信できませんでした。そのため、PHPの変更は元に戻されました。SFTPなどの別の手段でPHPファイルの変更をアップロードする必要があります。
ありがとうございます
Eoin
これは、WordPressのエディターが制限されているため、外部エディターを使用してファイルを編集する必要があることを意味します。WordPress管理画面からテーマファイルを編集するためのプラグインが利用可能なので、新しいプラグインを追加するページで検索できます。そうでなければ、FTPソフトウェアを使用してテーマファイルをダウンロードし、functions.phpファイルを更新して、サーバー上のテーマフォルダに再度アップロードする必要があります。FTPに慣れていない場合は、WordPress管理画面で編集できるようにテーマエディタープラグインを探すことをお勧めしますが、セキュリティ上の問題を防ぐために、終了したら必ずプラグインを無効にしてください。
デヴィ・チャンド
こんにちは、
私の製品画像は、すでに最適化されており、WordPress が再度最適化していた（と思われる）ため、ぼやけていました。上記のコードを使用し、サムネイルも再生成しました。最初は、変更が見つかりませんでした。しかし、その後、しばらくの間、画像は私が望んでいたように（ぼやけず、完璧に）表示されるようになりました。しかし、再度確認すると、画像はすべて再びぼやけて見えます。助けていただけますか？
Bjornen
こんにちは！
WordPressの「メディア」からアップロードする際に、WPが画像サイズ（KB/MB）をアップスケールしないようにする方法はありますか？
意味は、WP にサムネイル、中、大に画像をスケーリングさせ、デフォルトどおり元の画像を保持させたいが、サムネイル、中、大のファイルサイズをアップスケールさせたくないということです。
ありがとうございます！
マイク
ここに示されているとおりにコードを追加しましたが、写真をアップロードできなくなり、エラーメッセージが表示され続けます。助けてください！ありがとう！
Yara
Hi
無料版のWordPress.comで画像の品質を向上させることは可能ですか？
ありがとう
Yara
または、可能であれば、画像の品質を低下させない方が良い
WPBeginnerサポート
こんにちは、Yaraさん、
WordPress.comの画像処理方法に制限があります。セルフホスト型WordPress.orgと無料のWordPress.comブログの違いに関するガイドをご覧ください。
管理者
Yara
Hi
今はwordpress.orgを使っています。画像の品質に不満があったからです。でも、今はもっとひどいです。あなたの動画で言っていたことをしましたが、まだ問題があります。
画像をアップロードするだけで大丈夫だと思っていました。私のヘッド画像と、投稿にアップロードしたときの品質が良くありません。
どうすればいいのか本当にわかりません :/
Mélanie
こんにちは、このコードを使用し、すべての画像を再生成しましたが、残念ながら画像のサイズは同じです。Enfoldテーマを使用しており、WPのバージョンは4.7.2です。何か手順を飛ばしましたか？
Mélanie
言い忘れていましたが、75に圧縮しました。
ルーク・カバナー
レベルを92または90に設定しても問題ありません。デフォルトは以前は90でしたが、82に引き下げられました。
Alessandro
こんにちは、ビデオで示されているコードを追加しましたが、何も起こりません。WordPress は私の画像のサイズを縮小し続けています。
他に何か方法はありますか？
ご支援ありがとうございます
アレッサンドロ
Lukas Priyambodo
JPEGアルゴリズムと画像のコンテンツの種類により、品質100が必ずしも最高品質を意味するわけではありません。SSIMを使用すると、品質95の方が品質100よりもスコアが高い場合や、少なくとも品質100と比較して品質95の方がファイルサイズのトレードオフが良い場合があることがわかりました。
Jaime
こんにちは。無料のWordPressアカウントで画像圧縮を無効にすることはできますか？もしできるなら、function.phpファイルはどこで見つけられますか？
WPBeginnerサポート
セルフホストのWordPress.orgと無料のWordPress.comブログの違いについては、こちらのガイドをご覧ください。
管理者
M.Mairaj
WordPressでの画像圧縮に関する素晴らしい投稿を共有していただきありがとうございます。すべてのヒントが非常に非常に価値があります。
Keep sharing
Regards
Mairaj
Peter
このアドバイスには従わないでください！ functions.php ファイルにこのコードを追加したところ、ウェブサイトを読み込む際にこのメッセージが表示されるようになりました！
Parse error: syntax error, unexpected T_STRING in /home/sittin11/public_html/wp-content/themes/Divi/core/functions.php on line 44
WPBeginnerサポート
WordPressで構文エラーを修正する方法については、当社のガイドをご覧ください。
管理者
blogmann
ありがとうございます
Imsanityプラグインを使用しています。より多くの設定があります。
karl
いくつか明確にしておきましょう。
1 – WPは元のアップロードファイルをいじりません。議論されている圧縮レベルは、WPによって生成された画像用です – WPメディア設定のTN、Med、Largeです。
2 – 圧縮設定を変更しても、WPは現在のすべてのアップロードを再処理しません。そのため、サムネイルの再生成を実行します。
3 – 100と90のJPGの品質の違いを見分けられる写真家はいないでしょう。まれに、見分けられる場合もあります。しかし、画像の99%では、違いはわからないでしょう。
4 – テーマやメディア設定によっては、元のアップロードから一部の小さい画像サイズが切り抜かれることがあります。それが仕様です。もしTNが正方形で、横長の写真をアップロードした場合、当然切り抜かれます。画像をアップロードする前に切り抜きを行い、テーマのレイアウトと互換性のある比率を使用すると、問題が少なくなるでしょう。
サンティアゴ・ゴンザレス
Karlさん、ありがとうございます。コメントは状況を明確にするのに非常に役立ちました。
Thanks
chang hong
こんにちは、WPがアップロードするすべての画像をクロップする理由を教えていただけますか？どうすればそれを防げますか！ありがとうございます
Dave Porter
記事ありがとうございます、とても参考になりました。
「サムネイルを再生成することを忘れないでください」というコメントに興味があります。
画像が例えば82%でアップロードされた場合、サムネイルを再生成するとどうなりますか？
そして、パーセンテージを変更した後、これは新しい画像のみに適用されると仮定してよろしいでしょうか？
既存の画像は同じ品質のままだと思いますが、WordPressは元のアップロードされたコピーを保持していますか？
TIA、Dave
WPBeginnerサポート
WordPressは、アップロードされた元のファイルのコピーを保持します。
管理者
マイケル
WordPressで画像圧縮を無効にすることは可能ですか？
記事の見出しにはそのように書かれていますが、その後「最小限の圧縮」と説明されており、圧縮を無効にしているわけではありません…アップロードした画像に対して圧縮を無効にすることが可能かどうか疑問に思っています…
karl
圧縮を100に設定することは、それを無効にすることです。
Thomas
素晴らしいヒントをありがとうございます。
もう一つ質問があります。すでに圧縮された画像（例えば90%まで）をWPにアップロードした場合、それらは再度圧縮されますか（90%の82% = 74.8%）？
スティーブン
はい。唯一の例外は、アップロードした画像が将来の使用のためにそのまま保存されることです。