響應式圖像尺寸Divi
外掛程式描述
使用圖像srcsets使您的網站在Divi Theme中加載更快。
問題 – 無論設備大小如何,提供單個圖像大小的divi網頁上的圖像
您的divi網頁是否很慢?無論設備大小如何,標籤都是單一尺寸嗎?
響應圖像提供相同圖像的不同尺寸。瀏覽器決定要渲染的最佳圖像大小。
Divi包括一個全尺寸和常規圖像模塊。它們不提供響應式圖像。這是一個萬能的。
非響應圖像具有單個圖像尺寸。大型台式機,平板電腦和手機上都會加載相同的圖像。
假設您使用原生divi圖像模塊,圖像大小為2000px。在寬度為400px的設備上提供2000px寬的圖像除了減慢網頁速度之外沒有任何其他用途。
解決方案 – Divi響應式圖像大小外掛程式
Divi響應式圖像大小外掛程式有兩個模塊。
自適應圖像分割模塊 – 它可以在常規的divi部分中使用。 全寬響應圖像除法模塊 – 它可用於全寬分頻部分。
這兩個模塊都有助於創建具有響應圖像大小的圖像標籤。
響應圖像將srcset和sizes屬性添加到圖像標記。
srcset和尺寸有什麼作用?
考慮一個< img>的例子。標籤
< img alt =" Divi響應圖像izes" SRC =" default.jpg" srcset =" small.jpg 240w,medium.jpg 300w,large.jpg 720w" sizes ="(max-width:360px)300px,100vw">
讓我們回顧每個屬性。
alt =“Divi響應圖像大小”`
alt
屬性描述圖像的替代文本。瀏覽器在找不到圖像時加載此文本。
src =“default.jpg”
src
屬性為不支持srcset和sizesattributes
srcset =“small.jpg 240w,medium.jpg 300w,large.jpg 720w”
srcset 屬性列出不同大小的圖像。與每個圖像路徑一起,我們指定它的寬度(以像素為單位)。
sizes =“(max-width:360px)300px,100vw”
sizes屬性指示瀏覽器如何從srcset中選擇正確的圖像基於視口(設備)大小。
按照上面的例子,
對於360px及以下的視口大小,瀏覽器顯示medium.jpg(300px)圖像。對於360px以上的視口大小,瀏覽器顯示寬720px的large.jpg圖像。
Divi圖像尺寸
Divi支持以下css媒體斷點。
大屏幕(向上1405px)筆記本電腦和台式機(在1100px和1405px之間)橫向模式下的平板電腦(介於981px和1100px之間)平板電腦在縱向模式(介於768px和980px之間)橫向模式下的智能手機(介於480px和768px之間)縱向模式下的智能手機(0到479px之間)每個斷點,響應式divi模塊都有相應的字段來設置圖像寬度。
提高圖像搜索引擎優化得分
圖像搜索引擎優化是重要的。響應式divi模塊遵循
圖形標籤中。它可以使用
顯示圖像的標題figcaption 標籤。alt屬性文本來自WordPress媒體附件或自定義文本。
完整divi前端構建器支持
響應圖像和全寬響應圖像 divi模塊提供完整的divi前端構建器支持。通過模塊“設計”選項卡為圖像和標題文本添加自定義樣式。
Divi響應式圖像尺寸模塊設置 – 參見屏幕截圖1.
圖像部分 – 上傳/選擇圖像,設置alt和figcaption標籤。如果alt和caption值為空,則使用WordPress媒體附件中的相應值.Responsive Image Width部分 – 定義不同媒體斷點處的圖像大小.Caption Text部分 – 為標題文本添加自定義樣式.Sizing部分 – 更改最大值和
figure 元素的標準寬度。空間部分 - 設置figureBorder部分的填充和邊距值 - 設置
img 標籤的邊框樣式.Box陰影部分 - 設置框陰影樣式
img tag.Filters部分 - 設置數字元素的過濾器。變換部分 - 設置數字元素的變換CSS ID&類部分 - 為圖元素設置css id和類自定義CSS部分 - 為
圖添加自定義css,
img 和
figcaption tagsVisibility部分 - 設置桌面,平板電腦和手機上的圖
標籤。 屏幕截圖

此外掛程式是否具有任何依賴性?
優雅主題的Divi主題是這個外掛程式的先決條件。
這是否適用於優雅主題的額外主題
我們尚未在額外主題上進行測試。如果您碰巧讓它工作,請告訴我們🙂