Imágenes Retina automáticas para sitios web

Con el nuevo Apple MacBook Pro con pantalla retina, si proporciona una imagen "estándar" en su sitio web, será un poco confusa. Entonces tienes que proporcionar una imagen de retina.

¿Hay alguna forma de cambiar automáticamente a @2ximágenes, como lo hace iOS (con Objective-C)? Lo que encontré es: CSS para imágenes de alta resolución en pantallas móviles y retina , pero me gustaría poder encontrar un proceso automático para todas mis imágenes, sin CSS o JavaScript .

¿Es posible?

ACTUALIZACIÓN
Destacaría este interesante artículo sugerido por @Paul D. Waite y una interesante discusión al respecto enlazada por Sebastian .

Hay un nuevo atributo para la etiqueta img que le permite agregar un atributo retina src, llamado srcset. No se necesita javascript o CSS, no hay doble carga de imágenes.

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

Soporte del navegador: http://caniuse.com/#search=srcset

Otros recursos:

• Publicación de lanzamiento de WebKit
• Documentación del W3C para srcset
• buena explicación sobre por qué y cómo usar srcset
• Publicación de Chris Coyer para obtener más buena información

Existen diferentes soluciones, cada una con sus pros y sus contras. Cuál es el mejor para usted depende de varios factores, como el diseño de su sitio web, el tipo de tecnología que utilizan sus visitantes habituales, etc. Tenga en cuenta que las pantallas Retina no se limitan al Macbook Pro Retina y los próximos iMacs, sino que también incluyen dispositivos móviles, que pueden tener sus propias necesidades.

El problema también está estrechamente relacionado con las imágenes en diseños receptivos en general. De hecho, probablemente sea mejor utilizar técnicas genéricas de diseño receptivo, en lugar de diseñar para dispositivos específicos. Después de todo, la tecnología también seguirá cambiando todo el tiempo en el futuro.

Algunas de las soluciones / discusiones que noté:

• Vectores siempre que sea posible, incluidas las técnicas CSS (degradados, esquinas redondeadas, etc.), SVG y fuentes de iconos.
• Sirve imágenes de alta resolución ("retina"), pero comprímelas más (calidad JPEG), como sugiere Yoav Weiss , o deja que las redes móviles las compriman cuando realmente las necesiten (es decir, cuando sean móviles), como sugiere Paul Boag .
• Adaptive Images , una solución (en su mayoría) del lado del servidor. Se basa en una cookie que almacena la resolución de la pantalla, un servidor web configurado para entregar imágenes desde un script PHP y un script con nombre para leer la cookie y entregar la imagen apropiada.
• Un montón de posibilidades bien descritas y discutidas en Smashing Magazine .
• Sirve resoluciones ligeramente más altas para suavizar un poco la representación de la retina, como sugiere un video de Paul Boag .
• La técnica @ 1.5x en A List Apart es básicamente la misma idea.
• En un futuro próximo, la <picture>etiqueta puede convertirse en una solución respaldada por un grupo de trabajo del W3C e incluso por Apple.
• Una técnica de JavaScript propuesta por Jake Archebald .
• Una discusión extensa de diferentes técnicas en Smashing Magazine y el problema en general.

Como muestran las otras respuestas, hay incluso más técnicas, pero probablemente aún no haya mejores prácticas.

Una cosa que me pregunto es cómo probar y depurar algunas de estas técnicas, sin tener los respectivos dispositivos disponibles ...

Como nadie ha mencionado lo obvio todavía, lo dejaré flotar: cuando sea posible, solo use SVG. Aparecen en hermosas resoluciones de retina sin ningún esfuerzo.

El soporte es bueno, ya que IE8 es el principal dinosaurio del que preocuparse. Los tamaños de archivos comprimidos con Gzip suelen ser mejores que los formatos de mapa de bits (png / jpg) y las imágenes son más flexibles; puede reutilizarlos en diferentes resoluciones y cambiarles el estilo si es necesario, lo que ahorra tiempo de desarrollo y ancho de banda de descarga.

Aquí está la mezcla menos que uso para lograr esto para las imágenes de fondo. retina.js no funciona para imágenes de fondo si está usando dotLess, ya que requiere su propio mixin, que a su vez usa la evaluación de script que no es compatible con dotLess.

El truco con todo esto es obtener soporte para IE8. No puede hacer fácilmente el tamaño de fondo, por lo que el caso base (consulta de medios no móviles) tiene que ser un icono simple sin escala. La consulta de medios luego maneja el caso de retina y es libre de usar la clase de tamaño de fondo, ya que retina nunca se usará en 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;
         }
}

Muestra de uso:

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

Esto requiere que tenga dos archivos:

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

Donde el 2xarchivo es de doble resolución para retina.

Simplemente proporcione imágenes de retina a todos y reduzca la imagen a la mitad de su tamaño nativo dentro del elemento de imagen. Digamos que su imagen es 400pxancha y alta, solo especifique el ancho de la imagen 200pxpara que se vea nítida así:

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

Si su imagen es fotográfica, probablemente pueda aumentar la compresión JPG sin que se vea peor, porque los artefactos de compresión JPG probablemente no serán visibles cuando se muestre la imagen en 2x: consulte http://blog.netvlies.nl/ design-interactie / retina-revolution /

si sus imágenes de fondo, una forma sencilla de hacer esto es:

    #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%; }
}

otra forma sencilla es utilizar este método:

Simplemente reemplace:

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

con

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

Encontré esta forma interesante de proporcionar imágenes de resolución múltiple.
En realidad, usa CSS, algo que quería evitar, y solo funciona en Safari y Chrome.
Estoy hablando image-set.

Aquí hay un ejemplo , proporcionado por Apple ( aquí ):

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

Quiero compartir también estos dos enlaces:

• Safari 6 y Chrome 21 agregan un conjunto de imágenes para admitir imágenes de retina
• La image-set()notación @ W3C

Con JSF, puede crear una etiqueta Facelets personalizada para evitar la molestia de tener que agregarsrcset a cada imagen.

En tu taglib.xmlpodrías tener algo como:

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

Y su etiqueta podría verse así:

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

Que podría usarse como:

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

Y rendirá:

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

Este problema es especialmente complicado con sitios receptivos donde una imagen puede tener un ancho variable dependiendo del tamaño del navegador. Además, cuando se trata de un CMS en el que varios editores están cargando potencialmente miles de imágenes, me parece poco realista pedirle a la gente que cargue imágenes especialmente comprimidas.

Así que escribí una secuencia de comandos que tiene esto en cuenta, se activa en la parte inferior de la página y al finalizar el cambio de tamaño. Cada vez teniendo en cuenta la densidad de píxeles y el tamaño que ocupa la imagen.

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

Si no se siente frustrado por el miedo a usar java-script, aquí hay un buen artículo http://www.highrobotics.com/articles/web/ready-for-retina.aspx . Tiene una solución muy sencilla.

Y el ejemplo en JSFiddle vale más que mil palabras.

Utilizando:

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