menu
menu

キーワード検索

 

11月更新・前月(10月)の人気記事トップ10 - 11/10/2019

  1. ( 2 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  3. ( 1 ↓) 【CSS】CSSだけでドロップダウンメニュー
  4. (圏外↑) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  5. ( 5 - ) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. ( 7 ↑) 【Mac】Safariでソースコードを見る方法
  7. ( 10 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. (圏外↑) 【Mac】iMovieの保存場所を変更する
  9. ( 4 ↓) 【制作Tips】iPhone画面解像度まとめ
  10. ( 8 ↓) 【制作Tips】画面解像度一覧表
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

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

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

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

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

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

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

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

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

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

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

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

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

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

それは画像サイズです。

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

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

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

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

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


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

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