Wie verwende ich Retina -Produktbilder?

Question

Wie implementieren Sie Retina -Produktbilder in Magento? Ich habe ein paar kommerzielle Themen im Internet gesehen, aber ich bin mir nicht sicher, wie.

Etwas wie etwas wie Retina.js hat auch nicht sowohl für Produktbilder als auch für statische Blockbilder funktioniert.

Answer 1

Sind Retina -Bilder nicht nur Bilder mit einer höheren Pixeldichte? Sie können es erkennen und schalten, indem Sie diese Dichte erkennen

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

Um es sauber zu machen, können Sie ein reguläres Namensbild und die Bildretina erstellen, so können Sie das Bild SRC erhalten, -Retina hinzufügen und das SRC zurücksetzen.

Veröffentlichte dies als Antwort, wie Tim vorgeschlagen.

Answer 2

Sie können es mit folgenden JS tun.

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

Wenn eine Vorlagendatei ein Inline -Bild hat, fügen Sie das Datenattribut hinzu data-retina="true" zum Markup, dh;

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

Für CSS -Hintergrundbilder erstellen Sie zwei Versionen derselben Datei, eine doppelt so groß wie in beiden Dimensionen und verwenden die _2x Namenskonvention, hält sie im selben Verzeichnis, dh;

myimage.png
myimage_2x.png

Sie werden wahrscheinlich Probleme mit den Inline -Bildern treffen, wenn Ihre Produktansichtsseite auch JS wie Cloudoom verwendet. Diese Technik wird jedoch für die meisten Bilder auf der Website Retina -Bilder behandelt (um zu sehen, wie Sie mit der Produktansicht umgehen sollten, sollten Sie kaufen, die Sie kaufen sollten Ein Retina -Bereits -Thema und sehen, wie sie damit umgegangen sind).

Answer 3

Bitte werfen Sie einen Blick auf Generic iphone Magento -Thema. Es ist bereits retina-fähig.

Answer 4

Ich mag keine JavaScript -Lösungen, die die Quelle jedes Bildes ersetzen, da der Benutzer dann normale Bilder herunterladen muss, und insbesondere auf mobilen Geräten, die Sie nicht für alle Daten Byte speichern möchten.

Aber ich fand diese kostenlose Erweiterung: http://www.magentocommerce.com/magento-connect/retina-product-images.htmlEs bietet Retina-Bildern nur für hochauflösende Geräte über PHP ohne Ersetzen.

Answer 5

Sie können verwenden srcset als Fallback.

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

Siehe die Dokumentation in diesem Link:

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

Kompatibilität:

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