Automatyczne obrazy Retina dla witryn internetowych

W przypadku nowego Apple MacBook Pro z wyświetlaczem Retina, jeśli umieścisz „standardowy” obraz na swojej stronie internetowej, będzie on trochę niewyraźny. Musisz więc dostarczyć obraz siatkówki.

Czy istnieje sposób na automatyczne przełączanie się na @2xobrazy, tak jak robi to iOS (z Objective-C)? To, co znalazłem, to: CSS dla obrazów o wysokiej rozdzielczości na urządzeniach mobilnych i wyświetlaczach Retina , ale chciałbym znaleźć automatyczny proces dla wszystkich moich obrazów, bez CSS lub JavaScript .

Czy to możliwe?

AKTUALIZACJA
Chciałbym podkreślić ten interesujący artykuł zaproponowany przez @Paul D. Waite i interesującą dyskusję na ten temat, do której prowadzi Sebastian .

Istnieje nowy atrybut dla tagu img, który umożliwia dodanie atrybutu src siatkówki, a mianowicie srcset. Nie potrzeba javascript ani CSS, nie ma podwójnego ładowania obrazów.

<img src="low-res.jpg" srcset="high-res.jpg 2x">

Obsługa przeglądarek: http://caniuse.com/#search=srcset

Inne zasoby:

• Publikacja dotycząca wersji WebKit
• Dokumentacja W3C dla srcset
• dobre wyjaśnienie, dlaczego i jak używać srcset
• Post Chrisa Coyera, aby uzyskać więcej dobrych informacji

Istnieją różne rozwiązania, z których każde ma swoje zalety i wady. To, która z nich jest dla Ciebie najlepsza, zależy od różnych czynników, takich jak sposób zaprojektowania Twojej witryny internetowej, jakiego rodzaju technologii używają Twoi typowi użytkownicy itp. Pamiętaj, że wyświetlacze Retina nie są ograniczone do Macbooka Pro Retina i nadchodzących iMaców, ale obejmują również urządzenia mobilne, które mogą mieć własne potrzeby.

Problem jest również ściśle związany z obrazami w projektach responsywnych w ogóle. W rzeczywistości prawdopodobnie najlepiej jest zastosować ogólne techniki projektowania responsywnego zamiast projektowania pod kątem konkretnych urządzeń. W końcu technologia będzie się zmieniać także w przyszłości.

Niektóre z rozwiązań / dyskusji, które zauważyłem:

• Wektory w miarę możliwości, w tym techniki CSS (gradienty, zaokrąglone rogi itp.), SVG i czcionki ikon.
• Dostarczanie obrazów o wysokiej rozdzielczości („siatkówki”), ale bardziej je kompresuj (jakość JPEG), zgodnie z sugestią Yoav Weiss , lub pozwól sieciom komórkowym kompresować je, gdy są naprawdę potrzebne (np. Gdy są mobilne), zgodnie z sugestią Paula Boaga .
• Obrazy adaptacyjne , (głównie) rozwiązanie po stronie serwera. Opiera się na pliku cookie przechowującym rozdzielczość ekranu, serwerze internetowym skonfigurowanym do obsługi obrazów ze skryptu PHP oraz nazwanym skrypcie, który odczytuje plik cookie i wyświetla odpowiedni obraz.
• Szereg możliwości dobrze opisanych i omówionych w Smashing Magazine .
• Podawanie tylko nieco wyższych rozdzielczości, aby nieco wygładzić obraz siatkówki, jak sugeruje film autorstwa Paula Boaga .
• Technika @ 1,5x w A List Apart jest w zasadzie tym samym pomysłem.
• W niedalekiej przyszłości <picture>tag może stać się rozwiązaniem wspieranym przez grupę roboczą W3C, a nawet Apple.
• Technika JavaScript proponowany przez Jake Archebald .
• Obszerne omówienie różnych technik na Smashing Magazine i problem w ogóle.

Jak pokazują inne odpowiedzi, istnieje jeszcze więcej technik - ale prawdopodobnie nie ma jeszcze najlepszych praktyk.

Zastanawiam się tylko, jak przetestować i debugować niektóre z tych technik bez posiadania odpowiednich urządzeń ...

Ponieważ nikt jeszcze nie wspomniał o tym, co oczywiste, opowiem o tym: tam, gdzie to możliwe, po prostu użyj SVG. Pojawiają się w pięknych rozdzielczościach siatkówki bez żadnego wysiłku.

Wsparcie dla tego jest dobre, ponieważ IE8 jest głównym dinozaurem, o który należy się martwić. Rozmiary plików spakowanych Gzip są często lepsze niż formaty bitmapowe (png / jpg), a obrazy są bardziej elastyczne; można je ponownie wykorzystać w różnych rozdzielczościach i zmienić ich styl, jeśli to konieczne, co oszczędza czas programowania i przepustowość pobierania.

Oto mniej mieszania, którego używam, aby to osiągnąć dla obrazów tła. retina.js nie działa dla obrazów tła, jeśli używasz dotLess, ponieważ wymaga własnej mieszanki, która sama używa oceny skryptu, która nie jest obsługiwana w dotLess.

Sztuczka z tym wszystkim polega na uzyskaniu obsługi IE8. Nie można łatwo ustawić rozmiaru tła, więc przypadek podstawowy (zapytanie o media inne niż mobilne) musi być prostą, nieskalowaną ikoną. Zapytanie o media obsługuje wtedy przypadek siatkówki i może używać klasy rozmiaru tła, ponieważ siatkówka nigdy nie będzie używana w IE8.

.retina-background-image( @path, @filename,@extension, @size )
{
     .background-size( cover );
     background-image: url( "@{path}@{filename}@{extension}" );
         @media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
                only screen and ( -moz-min-device-pixel-ratio: 2 ),
                only screen and ( -o-min-device-pixel-ratio: 2/1 ),
                only screen and ( min-device-pixel-ratio: 2 )
         {
             background-image:url( "@{path}@{filename}@x2@{extension}" );
             background-size:@size @size;
         }
}

Próbka użycia:

.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );

Wymaga to dwóch plików:

• start_grey-97_12.png
• [email protected]

Gdzie 2xplik ma podwójną rozdzielczość dla siatkówki.

Po prostu udostępnij obrazy siatkówki wszystkim i ściśnij obraz do połowy jego natywnego rozmiaru wewnątrz elementu image. Powiedzmy, że twój obraz jest 400pxszeroki i wysoki - po prostu określ szerokość obrazu, 200pxaby wyglądał ostro w następujący sposób:

<img src="img.jpg" width="200px" height="200px" />

Jeśli twój obraz jest fotograficzny, prawdopodobnie możesz zwiększyć kompresję JPG na nim bez pogorszenia wyglądu, ponieważ artefakty kompresji JPG prawdopodobnie nie będą widoczne, gdy obraz jest wyświetlany pod adresem 2x: patrz http://blog.netvlies.nl/ design-interakcje / rewolucja-siatkówki /

jeśli jego obrazy tła, prostym sposobem na zrobienie tego jest:

    #image { background: url(image.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           #image { background: url([email protected]); background-size: 50%; }
}

Innym prostym sposobem jest użycie tej metody:

Wystarczy wymienić:

<img src="image.jpg" alt="" width="200" height="100" />

z

<img src="[email protected]" alt="" width="200" height="100" />

Znalazłem ten interesujący sposób dostarczania obrazów w wielu rozdzielczościach.
W rzeczywistości wykorzystuje CSS, coś, czego chciałem uniknąć, i działa tylko w Safari i Chrome.
mówię oimage-set .

Oto przykład dostarczony przez Apple ( tutaj ):

header {
    background: -webkit-image-set( url(images/header.jpg)    1x,
                                   url(images/header_2x.jpg) 2x);
    height: 150px; /* height in CSS pixels */
    width: 800px; /* width in CSS pixels */
}

Chcę też udostępnić te dwa linki:

• Safari 6 i Chrome 21 dodają zestaw obrazów do obsługi obrazów siatkówki
• image-set()Notacja @ W3C

Za pomocą JSF można utworzyć niestandardowy znacznik Facelets, aby uniknąć konieczności dodawaniasrcset do każdego obrazu.

W swoim taglib.xmlmógłbyś mieć coś takiego:

<tag>
  <tag-name>img</tag-name>
  <source>tags/img.xhtml</source>
  <attribute>
    <name>src2x</name>
    <required>true</required>
    <type>java.lang.String</type>
  </attribute>
</tag>

Twój tag może wyglądać następująco:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

  <img src="#{fn:replace(src2x, '@2x', '')}"
       srcset="#{src2x} 2x"/>

</ui:composition>

Które można wykorzystać na przykład:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:myTag="http://your.com/namespace-of-taglib">
  <myTag:src2x="[email protected]"/>
</html>

I wyrenderuje:

<img src="image.jpg"
     srcset="[email protected] 2x"/>

Ten problem jest szczególnie trudny w przypadku responsywnych witryn, w których obrazy i obrazy mogą mieć różną szerokość w zależności od rozmiaru przeglądarki. Również w przypadku systemu CMS, w którym wielu redaktorów potencjalnie przesyła tysiące obrazów, wydawało mi się nierealne, aby prosić ludzi o przesyłanie specjalnie skompresowanych obrazów.

Napisałem więc skrypt, który bierze to pod uwagę, odpala na dole strony i po zakończeniu zmiany rozmiaru. Za każdym razem biorąc pod uwagę gęstość pikseli i rozmiar zajmowany przez obraz.

http://caracaldigital.com/retina-handling-code/

Jeśli nie denerwuje cię strach przed używaniem skryptu java, oto dobry artykuł http://www.highrobotics.com/articles/web/ready-for-retina.aspx . Ma bardzo proste rozwiązanie.

A przykład w JSFiddle jest wart tysiąca słów.

Za pomocą:

<img onload="getImgSrc(this,'image_x1.png')" width="100" height="100" />

JS:

/* RETINA READY IMG SRC */
function getImgSrc(img, src) {
    var srcResult = src;
    // if high-res screen then change _x1 on _x2
    if (window.devicePixelRatio > 1 && 
        src.indexOf("_x1.")>=0) {
          srcResult = src.replace("_x1.", "_x2.");
    }
    img.onload = null; //protect from second rasing
    img.src = srcResult;    
}

$(document).ready(function(){
  // fire onload trigger on IMG tags that have empty SRC attribute
  var images = $('img:not([src=""])');
    images.each(function(i) {
        $(this).trigger('onload');            
    });
});