0

Picturefill ポリフィルに関する初心者向けの質問:

src属性を使用すると、Firefox (33) と Safari (7.1) で短いちらつきが発生することに気付きました。これらのブラウザは、追加の HTTP リクエストを作成します。これは私のコードです：

<img src="images/300x180-1.jpg"
    alt="My alt text"
    sizes="(min-width: 768px) 364px, 100vw"
    srcset="images/364x220@2x-1.jpg 728w, images/364x220-1.jpg 364w" />
  • Picturefill はブラウザが不要な画像をダウンロードするのを防ぐべきではありませんか?
  • src属性を削除することによるマイナス面はありますか? (JS がオフになっているか、ネイティブのレスポンシブ画像のないブラウザーを使用している人は、画像がまったく表示されず、代替テキストのみが表示されることを認識しています)
  • src欠落している属性は SEO にどのような影響を与えますか?
4

2 に答える 2

1
  1. 画像のダウンロードは chrome でのみ中止できます。つまり、ff や safari では中止できません。
  2. src のない画像は、プリロード パーサーには表示されません。仕様では src 属性が必要です (すでに JS オフについて言及しました)。

一般的な画像マークアップについて。300 と 364 の違いはごくわずかです。それが実際に大きな違いをもたらすとは思わないでください。ただし、保持したい場合は、ブラウザがそのプロパティを認識できるように、srcset に追加することもできます (画面が非常に小さい場合や帯域幅が低い場合は、ブラウザで動作します)。

<img src="images/300x180-1.jpg"
    alt="My alt text"
    sizes="(min-width: 768px) 364px, 100vw"
    srcset="images/364x220@2x-1.jpg 728w, images/364x220-1.jpg 364w, images/300x180-1.jpg 300w" />

respimageを使用することもできます。これは、IE での画像のダウンロードを中止し、safari/firefox でソースを変更するのを少し待ちます (低品質の画像プレースホルダー手法を実装します)。さらに、よりスマートなリソース選択を使用して帯域幅を節約しようとします。

于 2014-11-11T23:06:03.303 に答える
0

src 属性がないと SEO にどのような影響がありますか?

Google の Fetch As Google ツールを使用してテストすると、デフォルトでは、Google はsrcset属性で参照されているファイルのインデックスを作成しませんが、Picturefill を使用するとインデックスを作成することがわかります。

Stack Exchange Webmasters に関するより包括的な回答をここに書きました。

于 2015-07-17T11:32:22.260 に答える