Imágenes Retina automáticas para sitios web

104

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 .

jan267
fuente
6
retinajs.com
Stephan Bönnemann-Walenta
3
Puede hacerlo del lado del servidor con PHP: retina-images.complexcompulsions.com
ReLeaf
2
@ michaelward82: para imágenes fotográficas, Daan Jobsis sugiere que puede servir imágenes del tamaño de la retina a todos sin que los tamaños de los archivos sean más grandes que las imágenes sin retina , aumentando la cantidad de compresión JPG aplicada a la imagen. El hecho de que la imagen se muestre reducida o en una pantalla retina a menudo significa que los artefactos de compresión no son visibles.
Paul D. Waite
1
En realidad no está mal , pero me preguntaba si había algún truco para usar. En iOS es automático ... ¡por eso lo pregunto! :)
jan267
2
Tenga en cuenta que el autor del "artículo interesante sugerido" ha cometido algunos errores importantes que se describen aquí: silev.org/test/Retina-resize.html , por lo que el artículo debe tomarse con un gran grano de sal.
Sebastian

Respuestas:

147

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:

ebuat3989
fuente
<img src = "LaunchAirportIcon.png" srcset = "[email protected] 2x">
malhal
7
Esto ya no es solo un webkit, Edge y Firefox también lo admiten. caniuse.com/#search=srcset - por lo que actualmente ~ 64% de los usuarios a nivel mundial. Luego, tenga en cuenta que muy pocos usuarios de alta DPI estarán en los navegadores no compatibles (IE y Android antiguo) y, por último, es a prueba de fallas: los usuarios sin soporte simplemente ven una imagen DPI normal. Definitivamente creo que está listo para usar.
andrewb
1
Además, no hay doble carga es una gran ayuda. Esto significa que nunca desperdiciará el ancho de banda de nadie.
andrewb
IE una vez más se queda corto. Pero a pesar de esto, estoy de acuerdo con @andrewb. Para aprovechar su comentario, proporciono el x2 dentro del, srcpor lo que IE / Opera siempre solicitará la versión de DPI más alta.
Ricky Boyce
1
Esta debería ser la respuesta aceptada. Es, con mucho, la solución más sencilla para este hilo.
Julien Le Coupanec
14

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

bhell
fuente
11

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.

svachalek
fuente
¡Me gusta tu pista! El único problema svges con los navegadores más antiguos.
267
15
Y casos en los que tienes fotografías
Baumr
De hecho, son geniales siempre que tenga una versión vectorial de la imagen que desea usar, pero no creo que pueda guardar imágenes rasterizadas normales como SVG.
Chuck Le Butt
No hay una "buena" forma de convertir en esa dirección, por lo tanto, "cuando sea posible". Pero con la excepción de los sitios de fotografía, etc., generalmente creará sus activos de arte, por lo que le recomiendo que los haga como vectores, que se pueden convertir fácilmente a raster si lo desea, en cualquier resolución.
svachalek
SVG no funciona para capturas de pantalla (por ejemplo, al documentar funciones de la interfaz de usuario).
Greg Brown
9

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:

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

muzzamo
fuente
8

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 /

webdev
fuente
1
Daan Jobsis sugiere que para imágenes fotográficas, esto ni siquiera tiene que resultar en tamaños de archivo más grandes: vea blog.netvlies.nl/design-interactie/retina-revolution
Paul D. Waite
Sin embargo, lo ideal sería especificar una altura para que el navegador pueda diseñar la página antes de que se descargue la imagen.
Paul D. Waite
8
No creo que sea una gran idea proporcionar un archivo de imagen más grande y pesado si no es necesario ...
jan267
1
@ PaulD.¡Esperamos interesante para lo primero y exactamente para lo último! :)
jan267
2
@ PaulD.Waite Tenga en cuenta que el autor del artículo vinculado ha cometido algunos errores importantes que se comentan aquí: silev.org/test/Retina-resize.html , por lo que el artículo debe tomarse con un gran grano de sal. Especialmente el hecho de que la "imagen sin escala de la derecha" está de hecho escalada y, por lo tanto, no se puede comparar con aquella cuya resolución se duplica exactamente (dígale a su navegador que muestre las imágenes correctas en una nueva ventana y verá lo que yo y el autor de ese otro artículo significa)
Sebastian
1

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" />
SonnyP
fuente
1

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:

jan267
fuente
1

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"/>
Jasper de Vries
fuente
0

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/

Keegan 82
fuente
0

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