cómo usar las imágenes de productos de retina?

Question

¿Cómo está implementando imágenes de productos en Magento Retina? He visto un par de temas comerciales en la web de hacerlo, pero no estoy seguro de cómo.

El uso de algo así como Retina.js no ha funcionado bien para ambas imágenes de productos y bloquear imágenes estáticas.

Answer 1

No son imágenes de la retina sólo imágenes con una densidad de píxeles superior? Se podía detectar y activarlo mediante la detección de esta densidad

var retina = window.devicePixelRatio > 1;
if (retina) {
 // the user has a retina display 
} 
else {
 // the user has a non-retina display 
}

Para que sea más limpio que podría hacer una imagen con el nombre regular y la imagen-retina, como la que se podía conseguir la imagen src, añadir -retina y poner la parte posterior src.

Publicado esto como una respuesta como Tim sugirió.

Answer 2

Puede hacerlo utilizando siguiente JS;

https://github.com/leonsmith/retina-replace-js

Cada vez que un archivo de plantilla tiene una imagen en línea, deberá añadir el atributo de datos data-retina="true" a la marca, es decir;

    <h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img data-retina="true" src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>

En las imágenes de fondo de CSS se crean dos versiones del mismo archivo, una doble de tamaño en ambas dimensiones y utiliza la convención de nomenclatura _2x, manteniéndolos en el mismo directorio, es decir;

myimage.png
myimage_2x.png

Es probable que a tener problemas con las imágenes en línea si su página de vista de producto también se utiliza como JS CloudZoom - pero esta técnica se encargará de imágenes de la retina para la mayoría de las imágenes en el sitio (para ver cómo manejar el producto Vista usted debe comprar un tema listo retina y ver cómo se han manejado él).

Answer 3

Por favor, eche un vistazo a iphone genérica Magento tema. Es ya Retina listo.

Answer 4

No me gustan las soluciones de Javascript que sustituyen a la fuente de cada imagen, porque entonces el usuario tiene que descargar normaly ambas imágenes y sobre todo en los dispositivos móviles que wa no para salvar a cada byte de datos.

Pero encontré esta extensión libre: http: //www.magentocommerce .com / magento-connect / retina a productos images.html Proporciona imágenes de la retina solamente para los dispositivos de alta resolución a través de PHP sin tener que reemplazar.

Answer 5

Se puede utilizar srcset para ser una alternativa.

<img src="normal-image.jpg" srcset="better-image.jpg 2x">

Consulte la documentación en este enlace:

https : //webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/

Compatibilidad:

http://caniuse.com/#feat=srcset