NCP20160713

Pocket

大きめの画像をCSSで小さく表示すると解像度があがってきれいに見える

元画像は横幅640px
ファイルサイズ31.4KB

windowsのペイントで300pxに縮小
ファイルサイズ17.7KB
paint300

640の画像をcssで300pxに縮小
ファイルサイズ31.4KB
s-640

300×250のバナー ファイルサイズは83.9kb
test

600×500のバナーを300×250で表示 ファイルサイズは227kb
test3

画像の加工ができない場合でもCSSでサイズを縮めれれば綺麗に見せることができます。

ただし、広告素材(特にバナー)はサイズ変更が禁止されていることも多いので要注意。
商品画像のサイズ変更は広告主さんに確認してください。
(たぶん縦横費が変わらなければ問題ないはず、
既にレスポンシブデザインなどで勝手にサイズ変わってますよね)

cssは横幅(width)だけを指定しておけば縦横比が変わることはない。

小さめで尚且つ映りの悪い画像しか手に入らない場合は、逆手にとって
更に小さく表示し「大きい画像はこちら」

元画像は横幅200px
paint200

cssで300に引き延ばす
paint200

cssで140に縮小
paint200大きい画像

見えやすいけど汚い大きな画像よりも、小さく見にくくともきれいな画像

シェアする

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

フォローする