Jak przekonwertować obraz na ekran siatkówki?

Question

Mam obraz 40px o 20px z 72 pikselami/calami.

Chciałbym stworzyć wersję wyświetlacza Retina.

Co należy zrobić? Podwajasz rozmiar? Zmień rozdzielczość?

W jakim formacie należy go zapisać? PNG? JPG? ...

Używam tego obrazu na stronie internetowej ...

Answer 1

Możesz użyć opcji krycia CSS.

Zapewni to przejrzysty wygląd obrazu w zależności od ustawionej wartości krycia.

spróbować nauki krycie: http://www.w3schools.com/css/css_image_transparency.asp

Answer 2

Photoshop daje kilka opcji do zmiany rozmiaru obrazu. Na przykład, jeśli obraz ma rozmiar iPhone'a, możesz zwiększyć rozmiar obrazu o 200%. Photoshop oferuje kilka opcji ponownego próbkowania obrazu. Bicubic, bilinear itd. Spowoduje to remake obrazu w wyższej rozdzielczości i interpolacji brakujących pikseli. Mam nadzieję że to pomoże.

Answer 3

Moja odpowiedź jest konwertować obraz do SVG

masz Illustrator? Jeśli tak, zapisz obraz jako SVG (i jeśli chcesz, użyj png jako fallback).

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

Dopóki używasz Modernzr który może pracować, aby uzyskać svg przyjazny w większości przeglądarek.

Można go zobaczyć tutaj jak to zrobić: http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

Nadzieję, że to pomaga :)

Answer 4

Jest to bardzo interesujący artykuł przedstawiający piękny opcję czynienia z wysokiej jakosci obrazów:

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

Zasadniczo mówi się, że jeśli obraz jest dość duży (szerokość i wysokość), ale zachowuje go w dość niskiej jakości, nadal jest bardzo ostry wyświetlacze tina. Oznacza to, że możesz używać tego samego obrazu na wszystkich urządzeniach i że rozmiar pliku jest bardzo niski, co jest dodatkowym bonusem. Możesz ustawić szerokość i wysokość obrazu w swoim CSS i/lub HTML, aby ustawić go na pożądane wymiary wizualne.

Ten artykuł mnie powalił i jest moim podejściem do radzenia sobie z obrazami przyjaznymi zarówno dla siatkówki, jak i dla pasm. Wygraj, wygraj.

Answer 5

W edytorze zdjęć dwukrotnie zwiększ rozmiar obrazu do 80 pikseli na 40 pikseli.

W znaczników ustawić szerokość i wysokość do 40 do 20.

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

Należy zapisać jako png, jeśli potrzeba przejrzystości lub obraz jest liniowa. Zapisz zdjęcia jako jpg.

Answer 6

Obraz wyświetlany na siatkówce (lub obraz o wysokiej gęstości) jest dwukrotnie większy niż standardowy obraz - jego współczynnik skalowania wynosi 2,0. Oznacza to, że tak, dla obrazu o rozmiarze 40x20 pikseli, konieczne będzie wykonanie wersji o rozdzielczości 80x40 pikseli (wyświetlanej wówczas z gęstością podwójnego piksela na ekranie). Format nie ma znaczenia, zarówno PNG, jak i JPG będą działały poprawnie (PNG nie pogorszy jakości z kompresją, ale rozmiar pliku będzie większy niż JPG).

Jednak problemem z obrazami o wysokiej gęstości jest to, że pobierają one więcej przepustowości i są niepotrzebne w przypadku urządzeń, które nie mają wyświetlaczy o wysokiej rozdzielczości lub Retina. Oznacza to, że więcej danych jest przesyłanych przez sieć, co powoduje utrudnienia dla mobilnych użytkowników i ograniczonych limitów transferu danych.

Jednym z rozwiązań jest użycie czegoś takiego jak Retina.js. Jest to skrypt klienta javascript o otwartym kodzie źródłowym, który automatycznie ładuje obraz rozmiaru siatkówki z twojego serwera i zamienia go w miejscu dla wersji o niskiej gęstości, jeśli istnieje. Wynika Apple standard for naming high-resolution images - @2x, więc można mieć kod HTML tak:

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

i skrypt wyszuka serwer również dla /images/my_image@2x.jpg. Jeśli istnieje, załaduje go i zamieni na miejsce, nie martwiąc się o kłopoty z CSS.