モバイルで小さなロゴを鮮明に見せるには？

私のウェブサイトのロゴのサイズは300x50ピクセルです。デスクトップ上では正常に見えます。しかし私がモバイルで自分のサイトを開くと、そのエッジの周りにピクセルがあるように、それは小さくなり、ぼやけて見えます。モバイルで小さなロゴを鮮明に見せるには？

非常に小さいサイズでもシャープに見えるようにするにはどうすればよいですか？

出典

2016-05-08 KingkongP

だろうか？ x2スケールのディスプレイであれば、デバイスが好みのサイズまでイメージをスケーリングしてから非常に鮮明に見えないため、ロゴのサイズを大きくする必要があります。 – beeef

ベクター画像形式を使用しますか？ – jonrsharpe

私はいくつかを読んだことがあり、AIやPhotoshopのTracing機能をユーザに提案します。私は試して、それは動作しませんでした。私はそれを正しいかどうかわからない。（私はAIやPhotoshopを使用したことがありません:(） – KingkongP

SVG Rather Then Ico Formatを使用してください。 IcoフォーマットはSVGと比較して少しビットが小さい

出典

2016-05-09 06:23:22

あなたのぼやけた画像の問題は、おそらく網膜/ HiDPIデバイス上の非網膜またはHiDPI画像の使用に起因します。これは、ベクターベースの画像（SVGなど）またはダブル（2x - iPhone6 - 600x100pxなど）またはトリプルサイズの画像（3x - iPhone 6など）を使用する必要がある網膜デバイスで300x50ピクセルの画像を鮮明に表示したい場合プラス - 900x150ピクセル）

srcsetを使用してください。 Srcsetを使うと、1つのimg要素に複数の画像を追加して、それをサポートするブラウザがその装置の正しい画像を選択できるようになります。 srcsetをサポートしていないブラウザがsrcに戻っても、リスクはありません。この例では、私はJPGのみを使用している

<img src="myNormalImgForOldBrowsers.jpg" srcset="highResImg.jpg 2x, ultraHighResImg.jpg 3x" alt=" " />

が、srcset例で宣言された画像は、同じように簡単にあなたがモバイルどのようなデバイスを使用しているSVG

出典

2016-05-09 08:54:28 elmarko

モバイルで小さなロゴを鮮明に見せるには？

答えて

関連する問題