画像の見た目が改善すれば雰囲気が変わるWordPressで挿入した画像がぼやけていたり画像内の文字がつぶれて読めなくなっていた経験はありませんか?私はiPhoneで自分のサイトを見たとき、サムネイル画像が激しくぼやけていて驚いた経験があります。画像の見た目には気を使っているのでショックでした。この記事ではWebサイトにアップロードした画像がぼやける原因と対策方法を紹介します。知り、画像アップロード時に一手間加えるだけで大幅に画像の見た目を改善できますよ。画像がぼやける原因Webページにアップロードした画像がぼやける原因は主に3つあります。表示される画像のサイズが元画像から変化するため(拡大縮小による劣化)Retinaディスプレイでは小さな画像がぼやけてしまうWindowsのペイントを使用している画像サイズが変化するとぼやける画像を作成したときは綺麗な画像なのにページで表示するとぼやける。この現象の最も多い原因は画像が縮小・拡大されサイズが変化してしまうことです。下の例では元のサイズから少しでも変化させただけで画像がぼやけているのが分かります。細い文字や線はぼやけやすいです。画像に文字を入れる場合はできるだけ太くするとぼやけにくくなります。Retinaディスプレイでは小さな画像がぼやけてしまうRetinaディスプレイとはiPhoneやMacなどアップル製品に使われているディスプレイのことです。Retinaディスプレイは画像の1つの色を2ピクセル以上で表示するので、画像が拡大されたような見ためで表示されます。高解像な画像は精彩に表示できるのですが、120pxほどの小さなサムネイル等は凄まじくぼやけてしまうのです。これは小さな画像を拡大するとぼやけがとても大きくなるのを想像してもらえれば分かると思います。Retiaディスプレイのぼやけ対策は2倍サイズの画像をアップロードすることです。Windowsのペイントを使用しているWindowsのペイントで保存する画像はあまりきれいではありません。JPEGは赤色がかなり劣化する印象です。画像の見た目にこだわるのであれば別の画像編集ソフトを使いましょう。現在ではWeb上のサービスも充実しています。このサイトでは画像編集ソフトのPhotoshopとGIMPを紹介しているので興味のある方は参考にしてください。PhotoshopとGIMPの違いPhotoshopを始めるGIMPの始め方と基本操作アップロードした画像のぼやけ対策ここではアップロードした画像のぼやけ対策を紹介します。画像のぼやけ対策は次の2種類です。2倍サイズの画像をアップロードする画像の横幅(正確には画像の親要素の最大幅)を超えないようにして縮小が起こらないようにする2倍サイズの画像をアップロードするアップロードする画像をあらかじめ高解像にしておくと縮小によるぼやけの影響が小さくなります。表示される大きさのちょうど2倍の画像サイズをアップロードしておくと縮小による画像の劣化を最も軽減できるでしょう。この方法はRetinaディスプレイへのぼやけ対策として最も有効な方法です。表示されるサムネイルサイズを調べてその2倍サイズの画像をアップロードしておきましょう。すべての画像を2倍の大きさに調整する必要はありません。この方法は記事一覧等のサムネイルとして使われる、アイキャッチ画像に対して行うのがおすすめです。画像の横幅を調整して縮小が起こらないようにする画像の横幅を表示領域以下にしておけば画像サイズの変更は起こらず、画質低下を防ぐことができます。画像は横幅を基準にして拡大縮小されるので横幅を調整しましょう。画像の横幅はトリミングで調整できます。画像をトリミングで切り抜いて大きさを調整する例えばPC表示のとき、画像の表示幅が760pxなら画像の横幅は760px以下にしておきます。画像の横幅が表示領域よりも小さければ画像はそのまま表示されぼやけません。デバイスの解像度が多様化した今日ではこの方法で完全に対応することはできません。PC基準で作った画像はスマートデバイスでは縮小されることを覚えておきましょう。■画像の表示幅を調べる方法ブラウザのデベロッパーツールで画像の表示幅を調べることができます。デベロッパーツールはブラウザごとに少し違いますが基本的な操作は同じです。1:ブラウザで検証画面(デベロッパーツール)を開きます。(mac)2:デベロッパーツール左上の矢印ボタンを押します。3:マウスカーソルを調べたい要素の上に持っていくとデータが表示されます。画像フォーマットの違いを理解し適切に使用する画像を綺麗に表示するには画像フォーマット(特にJPEGとPNG)の特徴を理解しておくことも大切です。各フォーマットによって適している画像が異なり、それぞれに得手不得手があります。適していないフォーマットを使うと無駄に画像の容量が大きくなったり線の境界がぼやけたりしてしまいます。上の画像ではJPEGは色の境目にノイズが発生してぼやけて見えます。これは色の境目がはっきりしているイラストにJPEGが適していないことを表しています。画像フォーマットの違いを理解し適切に使用すればより画像をきれいに表示することができるでしょう。一般的にWeb画像としてよく用いられるのはJPEG、PNG、GIFの3種類です。これらのフォーマットの特徴を見ていきます。JPEGの特徴JPEGは写真を表示するのに向いています。その反面イラストのような色の境界がハッキリ分かれる画像には適していません。(境界面の色が荒れる)写真などの色数が多く一定のパターンが少ない画像に適している写真では他のフォーマットよりも大幅に画像容量を削減できる不可逆圧縮なので保存するごとに画質が劣化する境界面の色が荒れる純粋な赤が出にくい(色が変わりやすい)JPEGは写真に使いましょう。PNGの特徴Web上で利用する場合、PNGは写真には適しておらず色数が比較的少ない画像(イラスト)向きと言えます。PNGが写真で使用できないわけではありません。可逆圧縮の画像として残したい場合はPNGで保存することもあります。色と色の境界がはっきりと分かれるのでイラスト画像に向いているpng-8を利用すれば大幅にファイル容量を小さくすることができる可逆圧縮なので保存を繰り返しても画質が劣化しない写真などの色数が多い画像は容量がとても大きくなる写真などの色数が多い画像をPNGで保存すると容量が大きくなることが多いです。下の例では解像度1920×1080の画像の場合、JPEGが396kbなのに対し、PNGは1640kbと4倍以上の差が出ています。GIFの特徴GIFはアニメーションに用いられる画像フォーマットです。png-8と同様の色表現で画像容量が小さいという特徴があります。色数が少ないので写真やグラデーションは苦手Webでの用途はアニメーションが主なので使用に迷うことはあまりないでしょう。画像の見た目が改善すれば雰囲気が変わるWordPreessなどのWebサイトにアップロードした画像がぼやける原因と対策方法を紹介しました。2倍サイズの画像を用意する画像の縮小が起こらないように画像幅を調整するWindowsのペイントは機能が貧弱JPEGは写真向きPNGはイラスト向きGIFはアニメーションに用いるこの他にレスポンシブ画像が原因で画質が劣化する場合もあります。画像のぼやけを完全に無くすことはできませんが軽減することは可能です。画像の見た目が改善すれば雰囲気も向上するので綺麗な画像表示を目指しましょう。Web画像PhotoshopとGIMPはどう違う?PhotoshopoとGIMPこの2つの画像編集ソフトは似ているようで大きな違いがあります。これから画像編集を始めようと思っている人はPhotoshopとGIMPの違いを知っておきましょう。WebPの特徴について2021/04/13Pixabayの画像表示数が激減した!2021/04/13アイキャッチ画像を記事内容に関連させる必要はない。解決法は?2021/01/11Pixabayの画像表示数が激減した!2021/04/13アイキャッチ画像を記事内容に関連させる必要はない。WebPの特徴について2021/04/13アイキャッチ画像を記事内容に関連させる必要はない。2021/04/13。