Retina製品画像の使用方法は？

Question

MagentoでRetina製品画像をどのように実装していますか？ウェブ上のいくつかの商業的なテーマがそれを行っているのを見てきましたが、方法はわかりません。

のようなものを使用します Retina.js 製品画像と静的ブロック画像の両方で機能していません。

Answer 1

網膜画像は、ピクセル密度が高い画像だけではありませんか？この密度を検出することで、検出して切り替えることができます

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

それをきれいにするために、通常の名前の画像と画像Retinaを作成することができます。それは、画像SRCを取得し、-retinaを追加してSRCを戻すことができるようにすることができます。

これをティムが示唆したように答えとして投稿しました。

Answer 2

次のJSを使用してそれを行うことができます。

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

テンプレートファイルにインライン画像があるときはいつでも、データ属性を追加します data-retina="true" マークアップに、つまり;

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

CSSバックグラウンド画像の場合、同じファイルの2つのバージョンを作成します。 _2x 条約を命名し、それらを同じディレクトリに保持します。

myimage.png
myimage_2x.png

製品ビューページがCloudZoomのようなJSを使用している場合、インライン画像の問題に遭遇する可能性がありますが、この手法はサイト内のほとんどの画像の網膜画像を処理します（購入する製品ビューを処理する方法を確認するにはRetina Readyテーマと、それらがどのように処理したかを確認します）。

Answer 3

ジェネリックを見てください iphone マゼントのテーマ。すでに網膜に対応しています。

Answer 4

ユーザーが両方の画像をダウンロードする必要があるため、特にデータのすべてのバイトを保存するためにwanしないモバイルデバイスでは、各画像のソースを置き換えるJavaScriptソリューションは好きではありません。

しかし、私はこの無料の拡張機能を見つけました： http://www.magentocommerce.com/magento-connect/retina-product-images.html交換せずにPHPを介して高解像度デバイスにのみ網膜画像を提供します。

Answer 5

使用できます srcset フォールバックになります。

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

このリンクのドキュメントを参照してください。

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

互換性：

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