ブログに画像を掲載するときに、ブログの表示幅に合わせて、画像の幅も調整しなければなりません。方法は何通りかありますが、画像の鮮明さにかなり差ができることに気づきました。
実際に試してみますが、元の画像は、無料写真素材サイトの写真素材 足成【フリーフォト、無料写真素材サイト】から、1600×1067のJPGファイルをダウンロードして使いました。
１．HTMLで画像の幅を指定
元の画像をそのままサーバーにアップロードして、表示するときに、HTMLで「Width=550」を指定しました。
２．IrfanViewでリサイズ
Windowsの無料で使える画像編集ソフトであるIrfanViewで、画像の幅を550ピクセルに変更してから、記事に挿入しました。
３．「Photo editor online」でリサイズ
無料で使えるオンラインのフォトレタッチサービス「Photo editor online」で、画像の幅を550ピクセルに変更してから、記事に挿入しました。
24インチのモニタで1920×1200ピクセル表示で見ても、「１．HTMLで画像の幅を指定」が一番きれいであることが、わかります。MacBook Pro Retina ディスプレイで見ると、全然違います。iPhone4Sの小さい画面で見ても違いがわかります。
IrfanViewと「Photo editor online」では、IrfanViewのほうが、きれいなような気がしますが、「１．HTMLで画像の幅を指定」ほど、差はありません。
サーバーの容量の問題や画像のアップロードの時間の問題はありますが、高解像度の画像は、そのままサーバーにアップロードして、表示するときに、HTMLでサイズを指定することが、一番良いことがわかりました。
