example - retina html

Imágenes Retina automáticas para sitios web

Question

Con la nueva Apple MacBook Pro con pantalla Retina, si proporciona una imagen "estándar" en su sitio web, será un poco confusa. Entonces debes proporcionar una imagen de retina.

¿Hay alguna manera de cambiar automáticamente a imágenes @2x , como lo hace iOS (con Objective-C)? Lo que he encontrado 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?

ACTUALIZAR
Quiero enfatizar este interesante article sugerido por @Paul D. Waite y una interesante discussion sobre esto vinculada por Sebastian .

Answer 1

Aquí está el mixin menos que uso para lograr esto para imágenes de fondo. retina.js no funciona para imágenes de fondo si está utilizando dotLess, ya que requiere su propia mezcla, que a su vez utiliza la evaluación de scripts que no es compatible con dotLess.

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

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

Donde el archivo 2x tiene una resolución doble para la retina.

Answer 2

Dado que nadie ha mencionado lo obvio todavía, lo voy a publicar: siempre que sea posible, solo use SVG. Aparecen en hermosas resoluciones de retina sin ningún esfuerzo.

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

Answer 3

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

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

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 notación de image-set() @ W3C

Answer 4

Este problema es especialmente complicado con sitios receptivos donde la imagen puede variar de ancho dependiendo del tamaño del navegador. Además, cuando se trata de un CMS en el que varios editores potencialmente están cargando miles de imágenes, me pareció poco realista que pidiera a las personas que subieran imágenes especialmente comprimidas.

Así que escribí un guión que tiene esto en cuenta, que se dispara en la parte inferior de la página y en el acabado de 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/

Answer 5

Hay diferentes soluciones, cada una con sus pros y sus contras. Cuál es mejor para usted depende de varios factores, como la forma en que se diseña su sitio web, qué tipo de tecnología utilizan sus visitantes típicos, etc. Tenga en cuenta que las pantallas retina no están limitadas a la 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 seguirá cambiando todo el tiempo en el futuro, también.

Algunas de las soluciones / discusiones que anoté:

• Vectores siempre que sea posible, incluidas las técnicas de CSS (degradados, esquinas redondeadas, etc.), SVG e íconos.
• Sirve imágenes de alta resolución ("retina"), pero las comprime más (calidad JPEG), como lo sugiere Yoav Weiss , o deja que las redes móviles las compriman cuando realmente las necesita (es decir, cuando se mueve), como sugiere Paul Boag .
• Adaptive Images , una (principalmente) solución del lado del servidor. Se basa en una cookie que almacena la resolución de la pantalla, un servidor web configurado para servir imágenes desde un script PHP y un script con nombre para leer la cookie y mostrar la imagen adecuada.
• Un montón de posibilidades bien descritas y discutidas en Smashing Magazine .
• Sirve resoluciones ligeramente más altas para suavizar un poco la imagen de la retina, como se sugiere en 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 etiqueta <picture> puede convertirse en una solución soportada por un grupo de trabajo W3C e incluso Apple.
• Una técnica de JavaScript propuesta por Jake Archebald .
• Una extensa discusión de diferentes técnicas sobre Smashing Magazine y el problema en general.

Como muestran las otras respuestas, hay incluso más técnicas, pero probablemente aún no hay una mejor práctica.

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

Answer 6

Hay un nuevo atributo para la etiqueta img que le permite agregar un atributo retina src, llamado srcset. No se necesita JavaScript ni 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:

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

Answer 7

Mi fragmento de código hace esto. No se requiere jQuery, solo use el atributo data-hdimg.

https://github.com/ajkochanowicz/High-Res-Images

document.addEventListener ''DOMContentLoaded'', ->
  HDimgs = document.querySelectorAll ''[data-hdimg]''
  (
    image = new Image()
    image.onload = ->
      console.info ''Image loaded''
      img.src = image.src
      img.style.width = "#{image.width / 2}px"
      img.removeAttribute ''data-hdimg''
    image.onerror = ->
      console.error ''Could not load image''
    image.src = img.dataset.hdimg
  ) for img in HDimgs

Answer 8

Si no te sientes frustrado por el temor de usar java-script, aquí hay un buen artículo http://www.highrobotics.com/articles/web/ready-for-retina.aspx . Tiene una solución muy simple.

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

Answer 9

Simplemente proporcione imágenes de retina a todo el mundo y exprima la imagen a la mitad de su tamaño original dentro del elemento de la imagen. Como digamos que su imagen es de 400px ancho y alto, simplemente especifique el ancho de la imagen como 200px para que se vea nítida como esta:

<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 la imagen se muestre en 2x : consulte article

Answer 10

si su fondo de imágenes es una forma simple 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 simple es usar este método:

Simplemente reemplace:

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

con

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