問題タブ [picturefill]

picturefillRetina 画像を提供するにはどうすればよいですか?

現在、ポリフィルとして機能するpicturefill.jsの2番目のバージョンを使用しています。

私のHTMLコードは次のとおりです。

問題は、すべてのブラウザー (Chrome を除く) が「2x」バージョンを取得しているのに、画面が Retina をサポートしていないことです。

この機能は最近実装されたので、Chrome は機能していると思います。

私は何を間違っていますか？

ユーザーのデバイスに最も適切な画像を提供したい場合、潜在的なリソースのリストは、サイズ/比率/ピクセル密度などで急速に増加する可能性があります。

picturefillを使用すると、複数の属性を使用して、特定のアセットを特定のルールに向けることができます。srcset私が現在取り組んでいる例は次のようになります。

これは確かにひどいものではありませんが、かなり冗長に感じ始めています。同じ画像に対して 6 つの異なるソースが指定されており、2 つの「倍密度」網膜画像のみが含まれています。<video>また、IE9 の問題を回避するためにかなり偽のタグを提供する必要があります。

すべての画像サイズに対して 2 倍の密度のリソースを提供するか、または 2 倍の画像表示は特定の画面解像度でのみ利用可能であるという明確な仮定を行う必要があります (これはかなり大きな仮定のようです)。

同様に、リソースの一部またはすべてに 3 倍の画像解像度を提供する必要がありますか?

これらのいずれかに対する答えが「はい」の場合、非常に標準的なターゲット デバイスの幅のセット (これらは Bootstraps xs、sm、mdおよびlg値) の場合、「画像」ごとに 8 つまたは 12 のリソースを提供する必要が生じる可能性があることがわかります。 .

では、これは単に現在の最高の状態ですか? （picturefillは間違いなく役に立ちます）。それとも、すべての不測の事態に対して特定のリソースを指定しようとして、問題を過剰に設計しようとしていますか?

更新 より最近のアプローチについては、Responsive Images Community Groupの進行状況に従ってください。

Web サイトで picturefill を使用しようとしていますが、どちらのバージョンも機能していないようです。

ページの頭の中で：

大きな画像用のwelcome.jpgと小さな画像用のwelcome_sm.jpgの2つの画像があります。

それを機能させるために他に何かする必要がありますか？ブラウザーで Javascript が有効になっているため、何も表示されません。もちろん、noscript タグによるフォールバックが排除されます。

私は何を間違っていますか？

私のウェブサイトは novuslandscapes ドットコムです。

ありがとう、

ジョン

現在 Handlebars 1.3 を使用しているAssembleを使用しています。私のテンプレートでは、現在の仕様構文を使用するPicturefillで picture 要素を使用しています。<picture>

この一部は変更される可能性があるため (たとえば、メディア クエリを追加する可能性があります)、サイト全体でこのスニペットを簡単に更新できるようにしたいと考えています。これにはパーシャルが最適だと思います。たとえば、次のようなものです。

このパーシャルで

私のバージョンのハンドルバーでそれを行う方法はありますか? これが Handlebars 2.0 のネイティブであることは知っていますが、残念ながら Assemble に統合されているため、そのバージョンに更新することはできません。または、これを行う別の推奨される方法はありますか?

{{> picture this}} ps: hereの使用について読んだことがありますが、1 ページに複数の画像 (および 1 つのパーシャルに複数の変数) がある場合に、それがどのように機能するかはわかりません。また、parseJSON ブロック ヘルパーを使用してみましたが、その構文は少しぎこちなく、上で説明したものよりも少し冗長なので、このようなことを行うためのより効率的な方法があるかどうか疑問に思っています。

レスポンシブ画像には、picturefill ( https://github.com/scottjehl/picturefill ) を使用しています。

750px を超えたときに画像を表示したいページがありますが、それ以下では表示したくありません (つまり、モバイル デバイスでは画像をまったく読み込まないでください)。

私のコード:

このコードの種類は機能します - src が小さな画面にロードされないという点で (代替テキストのみが表示されます)。ただし、理想的には、ブラウザがモバイルで画像を検索しないようにしたいと思います。どうすればこれを達成できますか？

私は RoyalSlider と Picturefill の実装に取り​​組んできましたが、これはすべてのブラウザーで非常にうまく機能しています。srcただし、最新の Chrome Canary では、ページで picturefill を実行すると、正しい属性が img タグに追加されなくなっていることに気付きました。これは現在、他のすべてのブラウザーとは異なります。現在カナリアでネイティブにサポートされている srcset と関係があると思いますが、caniuse によると、v34 以降 Chrome でサポートされており、Chrome でエラーは発生していません。

基本的に、RoyalSlider は src 属性を探してスライダーを作成するため、Canary での実装は壊れています。スライダーがないため、RS はスライダーを作成できず、プリローダーを取得するだけです。

ここに私が何を意味するかを説明するいくつかのスクリーンショットがありますhttp://imgur.com/a/8wo1b

Canaryでは、表示されている画像が であっても、srcset属性が残っていることに注意してください。small.jpglarge.webp

読み込む画像を RS に伝える方法を見つける必要がありますが、現時点ではほとんど不可能に思えます。これは、picturefill (またはおそらく Canary) が使用するのに適していると判断したファイルを指定する DOM で何も変更されていないためです。

Picturefillで網膜画像を実装する方法を理解するのに少し苦労しています

これは私が持っているものです...そして私はそれが機能しているとは思わない:

media-queires は、2 倍の大きさの画像をプルします。Android デバイスの場合は 1.5 に設定します。