ブログ画像の最適なリサイズ方法

 ブログに画像を掲載するときに、ブログの表示幅に合わせて、画像の幅も調整しなければなりません。方法は何通りかありますが、画像の鮮明さにかなり差ができることに気づきました。

 実際に試してみますが、元の画像は、無料写真素材サイトの写真素材 足成【フリーフォト、無料写真素材サイト】から、1600×1067のJPGファイルをダウンロードして使いました。

1.HTMLで画像の幅を指定

 元の画像をそのままサーバーにアップロードして、表示するときに、HTMLで「Width=550」を指定しました。

2.IrfanViewでリサイズ

 Windowsの無料で使える画像編集ソフトであるIrfanViewで、画像の幅を550ピクセルに変更してから、記事に挿入しました。

3.「Photo editor online」でリサイズ

 無料で使えるオンラインのフォトレタッチサービス「Photo editor online」で、画像の幅を550ピクセルに変更してから、記事に挿入しました。

 24インチのモニタで1920×1200ピクセル表示で見ても、「1.HTMLで画像の幅を指定」が一番きれいであることが、わかります。MacBook Pro Retina ディスプレイで見ると、全然違います。iPhone4Sの小さい画面で見ても違いがわかります。

 IrfanViewと「Photo editor online」では、IrfanViewのほうが、きれいなような気がしますが、「1.HTMLで画像の幅を指定」ほど、差はありません。

 サーバーの容量の問題や画像のアップロードの時間の問題はありますが、高解像度の画像は、そのままサーバーにアップロードして、表示するときに、HTMLでサイズを指定することが、一番良いことがわかりました。

  • このエントリーをはてなブックマークに追加

フォローはこちらからお願いします。

会社勤めから起業するためのウェブ集客セミナー
会社勤めから起業するための7つのステップ