如何將圖像轉換爲視網膜顯示？

Question

我有一個40像素，20像素，72像素/英寸的圖像。

我想創建一個Retina顯示版本。

我該怎麼辦？尺寸加倍？更改分辨率？

我應該保存哪種格式？ PNG？ JPG？ ...

我正在網站上使用這個圖片...

Answer 1

您可以使用CSS不透明選項。

這將根據您設置爲不透明度的值爲您提供透明的圖像外觀。

嘗試學習不透明度：http://www.w3schools.com/css/css_image_transparency.asp

Answer 2

的Photoshop給你調整圖像大小几個選項。例如，如果圖像是iPhone尺寸，則可以將圖像尺寸增加200％。 Photoshop爲您提供了一些圖像重採樣選項。雙三次，雙線等。這將以更高的分辨率重新制作圖像並插入缺失的像素。希望這可以幫助。

Answer 3

我的回答是轉換圖像爲SVG

你有插圖？如果是這樣的話，將圖像保存爲SVG（如果需要，可以使用png作爲後備）。

<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

在您的圖像編輯器中，將圖像的大小加倍至80px 40px。

在您的標記設置寬度爲40和高度20

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

，如果您需要透明度，或者圖像線條你應該保存爲PNG。將照片保存爲jpg。

Answer 6

視網膜顯示圖像（或高密度顯示圖像）是標準圖像的像素尺寸的兩倍 - 其比例因子爲2.0。這意味着是的，對於您的40x20像素圖像，您需要製作一個80x40像素版本（然後在屏幕上以雙像素密度顯示）。格式不重要，PNG和JPG都可以正常工作（PNG壓縮質量不會降低，但文件大小將大於JPG）。

但是，高密度顯示圖像的問題在於它們佔用更多的帶寬，對於不具備高分辨率或Retina顯示的設備而言是不必要的。這意味着更多的數據通過網絡傳輸，給移動用戶和數據傳輸限制有限的用戶帶來不便。

一個解決方案是使用類似Retina.js的東西。這是一個開源的javascript客戶端腳本，它將自動從您的服務器加載視網膜大小的圖像，並在低密度版本（如果存在的話）中就地交換它。它遵循蘋果的standard for naming high-resolution images - @2x，這樣你就可以擁有HTML代碼：

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

和腳本會搜索自己的服務器也爲/images/my_image@2x.jpg。如果它存在，它將加載它，並在原地進行交換，而不必擔心會搞亂CSS。