PR

WordPressブログを運営していて、記事を書く中で画像をアップロードしたことがあると思います。

もし、まだWordPressブログを運営していなくて、これからだという人もこの記事は目を通しておくと後々役に立ちます。

WordPressブログで画像をアップロードしてみると、アップロードする前は高画質だったのに、記事にアップロードしてみると、少しボヤけるということが起きます。

この現象が起きる原因として様々な要因があります。

今回は、原因と解決方法について解説していきます。

アップロード前とアップロード後の違い

まずは、こちらの比較画像をご覧ください。

全く同じ画像ですが、よく見ながら比較すると、画質の違いが一目瞭然です。

ちなみに上の画質が粗い方は、ダウンロードした画像をそのままアップロードした状態です。

下の画質が良い画像は、アップロードする前に一手間加えたものです。

しかも、画像の容量は、画質が粗い方が12MBもありますが、画質が綺麗な方はなんとたったの368KBしかありません。

容量が大きい方が画質が粗いという不思議な現象が起こりましたが、これにはしっかりと理由があります。

画像のサイズとブログのコンテンツ幅の関係

使用するWordPressテーマには、それぞれのパーツごとに、高さや幅が設定されています。

例えば、僕の使用しているWordPressテーマでは、コンテンツ部分(記事本文部分)の幅は728pxとなっています。

先程の、比較画像で画質が粗い方は、ダウンロード後そのままアップロードしたと言いましたが、元の画像のサイズ幅は、5764pxもあります。

一方、画質が良い方は、コンテンツ幅と同じ728pxと同じ幅に変更してからアップロードしています。

実は、記事に画像をアップロードすると、画像をコンテンツの幅に合わせて無理やり縮小するようになっています。

なので、無理やり縮小された画像は、その分画質が粗くなります。

解決方法としてはアップロードする前に、コンテンツの幅に合わせて画像を『リサイズ』しておくことです。

リサイズであれば、画質を保ったままサイズを変更できます。

そして、コンテンツ幅に合わせてあるので、WordPressにアップロードした際に無理やり縮小されることがありません。

ちなみに、画像をWordPressにアップロード後、WordPress内で画像をリサイズすることも可能です。

パソコンでリサイズしてからとWordPressの機能でリサイズした時の違い

僕の環境で以下の画像で試した結果、パソコン(Mac)で728pxにリサイズしてからと、WordPressに元画像(2MB)をアップロード後、WordPressの機能で728pxにリサイズしたものでは、リサイズ後の容量に違いが出ました。

↓元画像3840 × 2160(2MB)

↓パソコンで728pxにリサイズ(121 KB)

↓WordPressの機能で728pxにリサイズ(311 KB)

よく見ないと分からないレベルですが、パソコンでリサイズしてからの画像は、容量がかなり減らせる分、WordPressに画像をアップロード後編集したものに比べると、ほんの少し画質が粗いです。

WordPressに画像をアップロード後編集したものは、パソコンで編集したものよりも、容量が少し大きいですが、その分画質はいいです。

どちらの方法でリサイズするかは、状況で使い分ければいいと思います。

その記事では画像が大量に使われる場合であれば、画像は軽ければ軽いほうがいいです。

そこまで画像は使わないのであれば、WordPressでリサイズしたものでいいと思います。

ただ、風景などの画像と違い、スクリーンショットで撮ったテキストなどの画像は、パソコンでリサイズしたものの方が、テキストが見やすい、などの違いもあります。

画質が粗いその他の原因

以上の方法で、ほとんどの方はWordPressにアップロードした画像が粗くなってしまう問題が解決することができますが、実はその他の原因によって、画像が粗くなってしまうことがあります。

もし、以上の方法でも画質が変わらない場合は、これらの原因を探ってみて下さい。

『CDN』を使っている

CDN(コンテンツデリバリーネットワーク)とは、ざっくり言ってしまえば、コンテンツに関わるファイル(動画、画像、CSS、)を、別のサーバーから呼び出し、自分が所有しているサーバーの負担を減らすというものです。

要は、CDNを用いることで、サイトの表示スピードなどを上げるということができます。

ただ、画像をCDNで読み込ませると、思わぬ挙動を起こしたり、画質が粗くなるなどの問題が起こります。

WordPressのプラグインに、『Jetpack by WordPress.com』というものがあり、このプラグインの機能1つに画像をCDNで使う機能があります。

もし、画質がどうしても粗いのが直らない場合は、この機能がオンになっていないかチェックしてみましょう。

《画像と写真をスピードアップ》をオンにするとCDNが機能します。

サーバーの高速化設定をオンにしている

こちらも気が付きづらい原因なのですが、エックスサーバーの場合で解説になりますので、予めご了承下さい。

エックスサーバーに、サイトを高速化するための機能が備わっています。

こちらは任意でオンにするものなので、通常であればオフ状態です。

エックスサーバーのサーバーパネルに『mod_pagespeed設定』という項目があります。

ここの設定が《オン》になっていると、画像が粗くなります。

もし、オンの状態になっている場合は、オフにしましょう。

WordPressのデフォル設定で画像のアップロード時に画質が下がる

実はWordPressには、画像をアップロード時、自動で画質を90%に下げる設定が施されています。

WordPressテーマによっては、その設定を無効化しているものもあります。

WordPressがアップロードされてるフォルダの中にある、《wp-includes》→《deprecated.php》というファイルに、《$jpeg_quality = 90》という記述があります。

これは、画像をWordPressにアップロードした最、画像を90%に圧縮するという記述です。

この《90》の部分を《100》に変えることで、画像を圧縮せず、そのまま100%の状態でアップロードできるようになります。

ただ、この《wp-includes》→《deprecated.php》は、サーバーから直接探すか、FTTPソフトでアクセスしないといけないため、初心者の方には敷居が少々高いです。

簡単な方法として、WordPressの《外観》→《テーマの編集》→《functions.php》に以下の記述をすることで済む方法があります。

サーバーのPHPのバージョンが5.3以上の場合は、以下のコードをfunctions.phpの最下部に貼り付けて下さい。

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

サーバーのPHPのバージョンが5.2以下の場合は、以下のコードをfunctions.phpの最下部に貼り付けて下さい。

add_filter('jpeg_quality', create_function('$arg','return 100;'));

これでWordPressにアップロードした画像を100%の状態を保ったままにできる設定を反映させることができます。

まとめ

普段何気なく画像を記事に載せている人は非常に多いですが、画像の重さも検索エンジンからの評価に繋がる大切な要素です。

そして何より、解説するために載せた画像が見づらいのでは元も子もありません。

見たい部分がボヤケていることほどストレスが溜まることはありません。

画像を最適化して、検索エンジンからもユーザーからも評価を高めましょう。

PR

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事