come utilizzare le immagini dei prodotti retina?

Question

Come stai implementando le immagini dei prodotti in Magento Retina? Ho visto un paio di temi commerciali sul web a farlo, ma non sono sicuro di come.

Utilizzando qualcosa come Retina.js non ha funzionato né per entrambe le immagini dei prodotti e immagini statiche di blocco.

Answer 1

Non sono immagini della retina solo le immagini con una densità di pixel più elevato? Si potrebbe rilevare e accenderlo rilevando questa densità

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

Per renderlo pulito si potrebbe fare un immagine nome normale e l'immagine-retina, come che si potrebbe ottenere lo src dell'immagine, aggiungere -retina e mettere la parte posteriore src.

Inviato questo come una risposta come Tim suggerito.

Answer 2

È possibile farlo utilizzando seguente JS;

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

Ogni volta che qualsiasi file di modello ha un'immagine in linea si dovrebbe aggiungere l'attributo di data-retina="true" dati al markup, vale a dire;

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

Per CSS immagini di sfondo si creano due versioni dello stesso file, una due volte le dimensioni in entrambe le dimensioni e utilizzare la convenzione di denominazione _2x, mantenendoli nella stessa directory ie;

myimage.png
myimage_2x.png

È probabile incorrere in problemi con le immagini in linea se la tua pagina di visualizzazione del prodotto è anche utilizzando JS come CloudZoom - ma questa tecnica consente di gestire le immagini retina per la maggior parte delle immagini nel sito (per vedere come gestire la visualizzazione del prodotto si dovrebbe comprare un tema pronto retina e vedere come hanno gestito esso).

Answer 3

Si prega di dare un'occhiata al iphone generico Magento tema. E 'già Retina-ready.

Answer 4

Non mi piace soluzioni Javascript che sostituiscono la fonte di ogni immagine, perché l'utente deve quindi normalmente per scaricare entrambe le immagini e soprattutto su dispositivi mobili wan't salvare ogni byte di dati.

Ma ho trovato questa estensione libera: http: //www.magentocommerce .com / magento-connect / retina-prodotto-images.html Esso fornisce immagini retina solo per i dispositivi ad alta risoluzione tramite php senza sostituire.

Answer 5

È possibile utilizzare srcset per essere un ripiego.

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

Vedere la documentazione in questo link:

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

Compatibilità:

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