レスポンシブ画像読み込み属性 srcset およびsize_html/css_WEB-ITnose を学習します。

元旦を迎えるとひとつ歳を重ねますが、生きながら学ぶという原則は変わりません。ここ数日、私は WordPress ウェブサイトの一部を最新バージョン 4.4 にアップグレードし、新しいことを学びました。バージョン 4.4 では、記事コンテンツ領域のすべての画像に srcset と size という 2 つの属性が追加されていることがわかりました。例:

これら 2 つの属性の目的は、さまざまな表示サイズに応じてさまざまな画像ソースをロードし、画面サイズに従うだけでなく画像自体が「応答」できるようにすることです。

たとえば、上の図の srcset は

srcset=".../gt-scavenger_1-300x507.jpg 300w, .../gt-scavenger_1-768x1298.jpg 768w, .../gt-scavenger_1-606x1024.jpg 606w, .../gt-scavenger_1-624x1055.jpg 624w, .../gt-scavenger_1.jpg 1407w"

各段落の形式は srcset=”[画像 URL] [画像幅], [画像 URL] です。 [画像幅] ]...」の最新規格では、単位「w」は現在の表示幅のピクセル値を表します。この画像の幅が300ピクセル未満の場合は小さい画像「gt-scavenger_1-300×507.jpg」が表示され、300ピクセル以上606ピクセル未満の場合は中サイズの画像が表示されるという説明です。 「gt-scavenger_1-606」が表示されます。画像表示サイズが1407ピクセルを超える場合は、フルサイズの画像「gt-scavenger_1.jpg」が表示されます。もう 1 つの属性、size は

sizes="(max-width: 1407px) 100vw, 1407px"

と書かれ、その形式は size=”[メディア クエリ] [ウィンドウ幅], [メディア クエリ] [ウィンドウ幅]…” です。ここでの幅はウィンドウの幅であり、よくビューポートの幅と呼ばれるものです。これは、メディア CSS で記述したメディア クエリと一致しています。ここでの最後の「1407px」は、デフォルトの状態、つまり前のメディア クエリで説明されていないときに表示される画像の幅を指します。上記のコードの一般的な説明は、この画像は幅 1407 ピクセルのウィンドウ (100vw) を埋めており、ウィンドウの幅が 1407 ピクセルを超える場合、画像は最大サイズの 1407 ピクセルに従って表示されるというものです。

Srcset とsize は HTML5 の最新の属性です。これらを適切に使用すると、モバイル端末でのリソースの過剰な読み込みを効果的に回避でき、画像の読み込みを短縮できます。ウェブページを開くこと。しかし実際の開発では、このように画像を階層化して表示するのは非常に面倒で、複数のサイズの画像を作成するには、HTMLに追加するコードが非常に多くなり…考えただけで頭が痛くなります。

驚くべきことに、WordPress の最新バージョンでは特別な操作は一切必要なく、通常どおり記事に画像を挿入するだけで済みます。 WordPress は、アップロードした写真に基づいて、各レベルのサムネイルに従って適切な表示グレーディングを自動的に計画します。これは非常に強力です。

しかし、いくつかの古い WordPress プロジェクトでも問題が発生しました。たとえば、いくつかのページで「遅延読み込み」を実行しました。つまり、imgのsrcに事前に空の画像を配置し、実際のURLをdata-original属性に書き込み、その後、次のようにdata-original属性を追加します。ページのスクロールの高さ。値は src 属性に設定されます。画像に srcset 属性が与えられている場合、これはすべて無駄になります。ページがロードされると、ブラウザーは適応された画像を srcset 属性から src 属性に読み取ります。

この状況を回避するには、遅延読み込みと srcset のどちらかを選択するしかありません。 WordPress で srcset とサイズを無効にしたい場合は、次のコードをテーマの関数ファイルに追加できます:

//disable srcset on imagesfunction disable_srcset( $sources ) {	return false;}add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );

最後に、srcset について詳しく知りたい場合は、とサイズについては、この記事をご覧ください。

このサイトのすべての記事はオリジナルであり、転載を歓迎しますが、記事の出典を明記してください: http://blog.brain1981.com/1323.html