WordPress 6.7 添加了sizes=”auto”延遲加載圖像的功能。此功能最近添加到 HTML 規(guī)范中，它允許瀏覽器在從列表中選擇源時(shí)使用圖像的渲染布局寬度srcset，因?yàn)檠舆t加載的圖像直到布局已知后才會(huì)加載。

背景

響應(yīng)式圖像屬性，srcset是在WordPress 4.4sizes中添加的。引用當(dāng)時(shí)的開(kāi)發(fā)人員說(shuō)明：

為了幫助瀏覽器從源集列表中選擇最佳圖像，我們還提供了一個(gè)sizes相當(dāng)于 的默認(rèn)屬性(max-width: {{image-width}}px) 100vw, {{image-width}}px。雖然此默認(rèn)設(shè)置對(duì)于大多數(shù)網(wǎng)站來(lái)說(shuō)都是開(kāi)箱即用的，但主題應(yīng)sizes根據(jù)需要使用wp_calculate_image_sizes 過(guò)濾器自定義默認(rèn)屬性。

sizes在選擇要從中獲取的正確文件時(shí)，設(shè)置默認(rèn)值非常重要srcset，因?yàn)樗鼤?huì)在瀏覽器知道圖像布局之前告訴瀏覽器圖像的預(yù)期布局。如果沒(méi)有任何值，瀏覽器將使用默認(rèn)100vw值并假定圖像將填充視口的整個(gè)寬度，從而導(dǎo)致大量字節(jié)浪費(fèi)。WordPress 多年來(lái)一直提供的默認(rèn)值可確保圖像布局受其width屬性約束。這有幫助，但在很多情況下仍然不正確，因?yàn)閳D像的布局可能受內(nèi)容寬度或其嵌套的任何塊的約束。 

盡管鼓勵(lì)主題sizes使用wp_calculate_image_sizes過(guò)濾器提供更準(zhǔn)確的屬性值，但這樣做很有挑戰(zhàn)性?，F(xiàn)在瀏覽器能夠自動(dòng)將渲染的布局應(yīng)用于sizes延遲加載的圖像，該sizes值將 100% 正確，從而減少浪費(fèi)的字節(jié)數(shù)。

實(shí)現(xiàn)細(xì)節(jié)

HTML 規(guī)范允許延遲加載圖像省略sizes、明確設(shè)置sizes=”auto”或設(shè)置sizes為以 開(kāi)頭的字符串，"auto,"后跟有效的源大小列表。為了將其作為已支持此功能的瀏覽器的漸進(jìn)式增強(qiáng)功能實(shí)現(xiàn)，WordPress 將在 期間將和 生成的任何圖像標(biāo)記添加到內(nèi)容圖像的屬性中。這將導(dǎo)致不支持新值的瀏覽器回退到上一個(gè)列表。autosizeswp_filter_content_tags()wp_get_attachment_image()autosizes

如果圖像包含 ，WordPress 只會(huì)將 添加auto到值中。否則，支持的瀏覽器將無(wú)法驗(yàn)證該值并應(yīng)用 的默認(rèn)值，這將導(dǎo)致從屬性中選擇大于所需大小的圖像。在 WordPress 生成標(biāo)記后更改圖像加載值的任何自定義實(shí)現(xiàn)都應(yīng)使用新功能來(lái)更正屬性。sizesloading=”lazy”sizes=autosizes100vwsrcsetwp_img_tag_add_auto_sizes()sizes

新增功能

• wp_img_tag_add_auto_sizes– 為HTML img字符串添加自動(dòng)大小。
• wp_sizes_attribute_includes_valid_auto– 測(cè)試圖像上是否已經(jīng)存在自動(dòng)功能，以確保不會(huì)多次添加它。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息