WordPress 6.7で画像の自動リサイズを遅延ロード

ワードプレス 6.7 追加sizes="auto"画像の読み込み遅延.この機能最近HTML仕様に追加されましたリストからソースを選択する際に、ブラウザが画像のレンダリングレイアウト幅を使用できるようにします。ソースセットなぜなら、遅延ロードされた画像は、レイアウトが判明するまでロードされないからです。

コンテキスト

レスポンシブ画像のプロパティ。ソースセットそうですね。ワードプレス 4.4サイズで追加。当時の開発者ノートを引用します：

ブラウザーがソースセットのリストから最適な画像を選択できるようサイズのデフォルト・プロパティと同等です。(max-width: {{image-width}}px) 100vw, {{image-width}}px.このデフォルト設定は、ほとんどのサイトではすぐに機能しますが、テーマは、次のようにする必要があります。サイズ必要に応じて使用wp_calculate_image_sizes (機械）フィルターデフォルトのプロパティをカスタマイズします。

サイズ正しいファイルを選択する際には、デフォルト値を設定することが重要です。ソースセットなぜなら、ブラウザが画像のレイアウトを知る前に、画像の予想レイアウトをブラウザに伝えるからです。値がない場合、ブラウザはデフォルトの100VWordPressが長年提供してきたデフォルト値は、画像のレイアウトがその幅属性の制約があります。これは役に立ちますが、画像のレイアウトがコンテンツやその中に入れ子になっているブロックの幅によって制約される可能性があるため、多くの場合まだ正しくありません。 

テーマを奨励しながらサイズ使うwp_calculate_image_sizesフィルタはより正確なプロパティ値を提供しますが、それは難しいことです。ブラウザは、レンダリングされたレイアウトを自動的にサイズ画像の読み込み遅延サイズこの値は100%となり、無駄なバイト数が減ります。

実施内容

HTML仕様画像省略時の遅延ロードを許可サイズ明確なセットsizes="auto"またはサイズで始まる文字列です。"オート"の後に有効なソース・サイズのリストが続きます。これをすでにこの機能をサポートしているブラウザ実装の段階的な強化として、WordPress はコンテンツ画像のプロパティに、期間中に生成された画像タグを追加します。これにより、新しい値に対応していないブラウザは、以前のリストにフォールバックするようになります。自動サイズwp_filter_content_tags()wp_get_attachment_image()autosizes

が含まれている場合、WordPress はオートを指定します。そうでない場合、サポートされているブラウザは値の検証に失敗し、デフォルト値が適用されます。WordPress がマークアップを生成した後に画像の読み込み値を変更するカスタム実装は、新機能を使用してプロパティを修正する必要があります。サイズloading="lazy"サイズ=自動サイズ100Vソースセットwp_img_tag_add_auto_sizes()サイズ

新機能

• wp_img_tag_add_auto_sizes- HTML用 イムグ文字列の自動サイズを追加します。
• wp_sizes_attribute_includes_valid_auto- 自動機能がすでに画像上に存在するかどうかをテストし、何度も追加しないようにします。