menu
menu

キーワード検索

 

前月(10月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 8 ↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  6. (10 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  7. ( 5 ↓) 【PHP】PHPでシンプルなメールフォーム
  8. ( 6 ↓) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. ( - ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  10. ( - ↑) 【Mac】iMovieの保存場所を変更する
このエントリーをはてなブックマークに追加

【制作Tips】Webサイトにはったpng画像がくっきり表示しない原因

png画像

こんにちは(・∀・)

Webサイトに貼り付けたpng画像がなんとなくぼんやりしてるなーってことありませんか。

くっきり表示されないpng画像

PhotoshopやGIMPなど画像レタッチアプリで見ると画像はくっきりしているのにWebサイトに貼り付けた画像を見るとなんとなくぼやけて見える。

画像1枚だけで見るとそれ程気づかいないかもしれません。

しかし並べてみると...

png画像png画像

どちらの画像も横幅200px縦40pxで表示されています。

しかし左側の画像(スマホでご覧の方は上側)はなんだかぼんやりしてませんか。

次にこちらの画像です。やはり左側の画像はぼんやり表示されていますね。

png画像png画像

画像をくっきり表示させる

この左側と右側の画像の違いはなんだと思いますか??

png画像png画像

それは画像サイズです。

表示サイズは横200px縦40pxのところ、左側の画像は横200px縦40pxの実寸サイズで、右側の画像は倍の横400px縦80pxで作られております。

こちらの画像は表示サイズは縦40px横40pxです。

png画像png画像

こちらも違いは画像サイズで左側が横40px縦40pxの実寸サイズで右側が横80px縦80pxの表示サイズの倍の画像サイズです。

そうなんです。画像をWebサイトでくっきり表示したい場合は表示サイズの倍くらいの画像を使用すれば画像がくっきり表示されるのです。


いかがでしたでしょうか、png画像をくっきり表示させたい場合は、画像サイズを表示サイズより大きめに作ることが画像をくっきりと表示させるポイントです。

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