menu
menu

キーワード検索

 

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

  1. ( 1-) CSSだけでドロップダウンメニュー
  2. ( 2-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) スマホサイトの作成・基本編
  4. ( 4-) CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) jQueryで日時を表示【実践でjQuery入門】
  6. ( 5↓) 表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 9↑) スマホサイト向け横にスクロールするナビゲーション
  8. ( 8-) HTML5・ページ作成の基本
  9. ( -↑) Windows 10にMySQLをインストール
  10. ( -↑) 変数を宣言する【jQuery入門】

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

  • Labs

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画像をくっきり表示させたい場合は、画像サイズを表示サイズより大きめに作ることが画像をくっきりと表示させるポイントです。

  • カテゴリー:Labs