Immagini Retina automatiche per siti web

Con il nuovo Apple MacBook Pro con display retina, se fornisci un'immagine "standard" sul tuo sito web, risulterà un po 'sfocata. Quindi devi fornire un'immagine della retina.

C'è un modo per passare automaticamente alle @2ximmagini, come fa iOS (con Objective-C)? Quello che ho trovato è: CSS per immagini ad alta risoluzione su display mobili e retina , ma vorrei poter trovare un processo automatico per tutte le mie immagini, senza CSS o JavaScript .

È possibile?

AGGIORNAMENTO
Vorrei sottolineare questo interessante articolo suggerito da @Paul D. Waite e un'interessante discussione su di esso collegata da Sebastian .

C'è un nuovo attributo per il tag img che ti permette di aggiungere un attributo src retina, cioè srcset. Nessun javascript o CSS necessario, nessun doppio caricamento di immagini.

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

Supporto browser: http://caniuse.com/#search=srcset

Altre risorse:

• Post di rilascio di WebKit
• Documentazione W3C per srcset
• buona spiegazione sul perché e su come usare srcset
• Post di Chris Coyer per maggiori informazioni

Esistono diverse soluzioni, ognuna con i suoi pro e contro. Quale sia il migliore per te dipende da vari fattori, come il modo in cui è progettato il tuo sito web, il tipo di tecnologia utilizzata dai tuoi visitatori tipici, ecc. Nota che i display Retina non sono limitati al Macbook Pro Retina e ai prossimi iMac, ma includono anche dispositivi mobili, che possono avere le proprie esigenze.

Il problema è anche strettamente correlato alle immagini nei progetti responsive in generale. In effetti, è probabilmente meglio utilizzare tecniche di responsive design generiche, invece di progettare per dispositivi specifici. Dopotutto, la tecnologia continuerà a cambiare continuamente anche in futuro.

Alcune delle soluzioni / discussioni che ho notato:

• Vettori ove possibile, comprese tecniche CSS (gradienti, angoli arrotondati ecc.), SVG e caratteri di icone.
• Servire immagini ad alta risoluzione ("retina"), ma comprimerle di più (qualità JPEG), come suggerito da Yoav Weiss , o lasciare che le reti mobili le comprimano quando realmente necessario (cioè quando sono mobili), come suggerito da Paul Boag .
• Immagini adattive , una (principalmente) soluzione lato server. Si basa su un cookie che memorizza la risoluzione dello schermo, un server Web configurato per fornire immagini da uno script PHP e uno script denominato per leggere il cookie e fornire l'immagine appropriata.
• Un sacco di possibilità ben descritte e discusse su Smashing Magazine .
• Serve solo risoluzioni leggermente più alte per rendere più uniforme la rappresentazione della retina, come suggerito in un video di Paul Boag .
• La tecnica @ 1.5x su A List Apart è fondamentalmente la stessa idea.
• Nel prossimo futuro, il <picture>tag potrebbe diventare una soluzione supportata da un gruppo di lavoro W3C e persino da Apple.
• Una tecnica JavaScript proposta da Jake Archebald .
• Una discussione approfondita delle diverse tecniche su Smashing Magazine e il problema in generale.

Come mostrano le altre risposte, ci sono ancora più tecniche, ma probabilmente ancora nessuna best practice.

Una cosa che mi chiedo è come testare ed eseguire il debug di alcune di queste tecniche, senza avere i rispettivi dispositivi disponibili ...

Dal momento che nessuno ha ancora menzionato l'ovvio, lo farò fluttuare là fuori: dove possibile, usa semplicemente SVG. Appaiono a splendide risoluzioni della retina senza alcuno sforzo.

Il supporto è buono con IE8 che è il principale dinosauro di cui preoccuparsi. Le dimensioni dei file compressi sono spesso migliori dei formati bitmap (png / jpg) e le immagini sono più flessibili; puoi riutilizzarli a diverse risoluzioni e modificarli se necessario, risparmiando tempo di sviluppo e larghezza di banda di download.

Ecco il minor mixin che uso per ottenere questo risultato per le immagini di sfondo. retina.js non funziona per le immagini di sfondo se si utilizza dotLess, poiché richiede il proprio mixin che utilizza a sua volta la valutazione dello script che non è supportata in dotLess.

Il trucco con tutto questo è ottenere il supporto per IE8. Non può facilmente fare la dimensione dello sfondo, quindi il caso di base (query multimediale non mobile) deve essere un'icona semplice e non in scala. La media query gestisce quindi il caso della retina ed è libera di utilizzare la classe background-size poiché retina non verrà mai utilizzata su 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;
         }
}

Esempio di utilizzo:

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

Questo richiede che tu abbia due file:

• start_grey-97_12.png
• start_grey-97_12@2x.png

Dove il 2xfile è a doppia risoluzione per la retina.

Fornisci semplicemente immagini della retina a tutti e comprimi l'immagine a metà della sua dimensione nativa all'interno dell'elemento immagine. Ad esempio, supponiamo che la tua immagine sia 400pxampia e alta: specifica la larghezza dell'immagine 200pxper renderla nitida in questo modo:

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

Se la tua immagine è fotografica, puoi probabilmente aumentare la compressione JPG su di essa senza peggiorarla, perché gli artefatti della compressione JPG probabilmente non saranno visibili quando l'immagine viene visualizzata su 2x: vedi http://blog.netvlies.nl/ progettazione interactie / retina-rivoluzione /

se le sue immagini di sfondo un modo semplice per farlo è:

    #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(image@2x.png); background-size: 50%; }
}

un altro modo semplice è usare questo metodo:

Basta sostituire:

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

con

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

Ho trovato questo modo interessante per fornire immagini a risoluzione multipla.
In realtà utilizza CSS, qualcosa che volevo evitare, e funziona solo in Safari e Chrome.
Sto parlando image-set.

Ecco un esempio , fornito da Apple ( qui ):

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 */
}

Voglio condividere anche questi due link:

• Safari 6 e Chrome 21 aggiungono il set di immagini per supportare le immagini retina
• La image-set()notazione @ W3C

Con JSF puoi creare un tag Facelets personalizzato per salvare il fuzz di dover aggiungere srcseta ciascuna immagine.

Nel tuo taglib.xmlpotresti avere qualcosa del tipo:

<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>

E il tuo tag potrebbe avere un aspetto simile a:

<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>

Quale potrebbe essere usato come:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:myTag="http://your.com/namespace-of-taglib">
  <myTag:src2x="image@2x.jpg"/>
</html>

E renderà:

<img src="image.jpg"
     srcset="image@2x.jpg 2x"/>

Questo problema è particolarmente complicato con i siti reattivi in ​​cui l'immagine può essere di larghezza variabile a seconda delle dimensioni del browser. Inoltre, quando ho a che fare con un CMS in cui più editor stanno caricando migliaia di immagini, mi è sembrato irrealistico chiedere alle persone di caricare immagini appositamente compresse.

Quindi ho scritto uno script che tiene conto di questo, si attiva in fondo alla pagina e al termine del ridimensionamento. Ogni volta si tiene conto della densità dei pixel e delle dimensioni che l'immagine sta occupando.

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

Se non sei frustrato dalla paura di usare java-script, ecco un buon articolo http://www.highrobotics.com/articles/web/ready-for-retina.aspx . Ha una soluzione molto semplice.

E l' esempio in JSFiddle vale più di mille parole.

usando:

<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');            
    });
});