画像を網膜ディスプレイに変換するには？

Question

私は40ピクセル×20ピクセルの画像で、72ピクセル/インチです。

私は網膜ディスプレイバージョンを作成したいと思います。

どうすればよいですか？サイズを倍増させる？解像度を変更しますか？

どのフォーマットで保存すればよいですか？ PNG？ JPG？ ...

私はこの画像をウェブサイトで使用しています...

Answer 1

CSS不透明度オプションを使用できます。

これは、不透明度に設定した値に基づいてイメージを透過的に表示します。

は、不透明度を学習してみてください。http://www.w3schools.com/css/css_image_transparency.asp

Answer 2

Photoshopはあなたのイメージのサイズを変更するためのカップルのオプションを提供します。たとえば、画像がiPhoneサイズの場合、画像サイズを200％増やすことができます。 Photoshopは、画像の再サンプリングのためのいくつかのオプションを提供します。バイキュービック、双線形などが含まれます。これにより、イメージがより高い解像度で再作成され、欠けているピクセルが補間されます。お役に立てれば。

Answer 3

私の答えはあなたのイメージは、あなたがイラストレーターを持っていますかSVG

に変換ですか？もしそうなら、あなたのイメージをSVGとして保存してください。

<img src="images/logo.svg" alt="" /> 
<img src="images/logo.png" alt="" /> 

は、限り、あなたはModernzrを使用すると、ほとんどのブラウザで優しいSVG取得するために働くことができました。

あなたはどのように行うのそれをここに見ることができます： http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

はそれが役に立てば幸い:)

Answer 4

これは、高解像度の画像を扱うための素晴らしい選択肢を示す、本当に興味深い記事です：

http://blog.netvlies.nl/design-interactie/retina-revolution/

基本的には、イメージを非常に大きく（幅と高さ）作成してからかなり低い品質で保存すると、ティナが表示されます。つまり、すべてのデバイスで同じイメージを使用でき、ファイルサイズも非常に小さく、特別なボーナスです。 CSSやHTMLで画像の幅と高さを設定して、希望の視覚的な大きさに設定することができます。

この記事では私を驚かせました。網膜にやさしい画像と帯域幅に優しい画像の両方を扱うためのアプローチです。勝つ、勝つ。

Answer 5

イメージエディタで、イメージのサイズを80ピクセル×40ピクセルに倍増します。あなたのマークアップで

はあなたが透明性を必要とするか、画像を線画である場合は、PNGとして保存すべき20

<img src="example.png" width="40" height="20" /> 

に40と高さの幅を設定します。 jpgとして写真を保存します。

Answer 6

網膜の表示画像（または高密度表示画像）は、標準画像の画素サイズの2倍です。倍率は2.0です。つまり、40x20ピクセルの画像では、80x40ピクセルのバージョンを作成する必要があります（画面上に2倍のピクセル密度で表示されます）。フォーマットはそれほど重要ではありません。PNGとJPGの両方が正常に動作します（PNGは圧縮で品質が低下しませんが、ファイルサイズはJPGよりも大きくなります）。

しかし、高密度表示画像の問題は、それらがより高い帯域幅を占有し、高解像度または網膜ディスプレイを持たない装置には不要であることである。これは、ネットワーク上でより多くのデータが転送されることを意味し、モバイルユーザーやデータ転送上限が制限されているユーザーには不便です。

1つの解決策は、Retina.jsのようなものを使用することです。これはオープンソースのjavascriptクライアントスクリプトで、サーバーから網膜サイズの画像を自動的にロードし、低密度版がある場合はその場でスワップします。

<img src="/images/my_image.jpg" /> 

、スクリプトが/images/my_image@2x.jpgのためにも、サーバーを検索します：あなたはこのようなHTMLコードを持つことができるので、@2x - それはAppleのstandard for naming high-resolution imagesに従います。存在する場合は、CSSを読み込んで、CSSを使用することを心配することなく、その場でスワップします。