3

しばらくの間、次のマークアップを使用しています。

<img src="lowresImage.jpg" srcset="lowresImage.jpg, highresImage.jpg 2x" alt="Lorem Ipsum">

これは、picturefill ( http://scottjehl.github.io/picturefill/ ) で完全に機能し、クロスクライアントの問題は発生しません。

これがインライン網膜画像の使用をサポートする有効なマークアップであることを誰かが確認できるかどうか疑問に思っていました. 私は次の理由でこれを使用します。

  1. 画像はコンテンツの一部であるため、背景画像は使用できません。
  2. Google は srcset-attribute をインデックスに登録していませんが、src-attribute をインデックスに登録しているため、両方を使用しています。したがって、これは主に SEO に関する考慮事項です。
  3. これをテストした限りでは、ブラウザが二重の HTTP リクエストを送信していることはわかりませんでした。通常のデスクトップでは src-image を要求し、Retina ディスプレイでは srcset-retina (2x) イメージを要求します。

SEO と retina-display に関連して、src を srcset および picturefill と一緒に使用することに関する情報はほとんど見つかりません。したがって、このマークアップに欠陥がなければ、レスポンシブで SEO に適した画像に対してこのアプローチを使用する人が増えることを願っています。

4

3 に答える 3

1

はい、有効です。ブラウザーが srcset をサポートしていない場合、src はフォールバックとして使用されます。

ただし、Retina 用にのみ使用している場合は、picturefill を使用する必要はありません。ブラウザーが srcset をサポートしていない場合は、通常の src に戻す傾向があります。

srcset は、src 画像に別のサイズと解像度を提供するだけでよいため、Google はそれを読み取れません。

このように数か月使用していますが、特に問題はありません。

余談ですが、キャッシュされた画像が大きい場合は、小さい画像の代わりにそれが使用されます。それはかなり賢くてクールです。

srcset に関するいくつかの優れた記事を次に示します。

https://ericportis.com/posts/2014/srcset-sizes/

https://css-tricks.com/responsive-images-youre-just-ching-resolutions-use-srcset/

于 2015-09-03T10:11:01.243 に答える
1

ピクチャフィルを含むイメージタグで src と srcset の両方を使用することは有効ですか?

はい、そうです。しかし、picturefill はこれをお勧めしません。ダブル ダウンロードが発生する可能性があるからです。(詳細については、以下を参照してください。)

Google は srcset-attribute をインデックスに登録していませんが、src-attribute をインデックスに登録しているため、両方を使用しています。したがって、これは主に SEO に関する考慮事項です。

基本的に、これについて心配する必要はありません。googlebot は古いヘッドレス Webkit ブラウザに似ており、JavaScript を実行します。したがって、googlebot も picturefill によってポリフィルされます。これは、を使用せずにsrc、picturefill が含まれている場合、画像がインデックス化されることを意味します。(参照: https://github.com/scottjehl/picturefill/issues/549#issuecomment-122538689 )

これをテストした限りでは、ブラウザが二重の HTTP リクエストを送信していることはわかりませんでした。

iOS 8 または Chrome/Firefox for Android でテストしたことがあると思います。これらのブラウザは をサポートしていsrcsetます。または、1x デバイスのサポートされていないブラウザーでのみテストしました。ただし、Android 4.x Stockbrowser はこの機能をサポートしていないため、2x デバイスを使用すると、ダウンロードが 2 回行われます ( http://caniuse.com/#search=srcsetを参照)。

私のアドバイス: を使用srcしますが、picturefill を含めないか、src を省略して picturefill を使用します。srcsetx 記述子のみを使用しpicture、w 記述子を使用しない場合は、picturefill を含めずに のみを使用しますsrc。

于 2015-09-04T11:16:31.667 に答える