響應式圖像尺寸Divi
外掛程式描述
使用圖像srcsets使您的網站在Divi Theme中加載更快。
問題 – 無論設備大小如何，提供單個圖像大小的divi網頁上的圖像
您的divi網頁是否很慢？無論設備大小如何，標籤都是單一尺寸嗎？
響應圖像提供相同圖像的不同尺寸。瀏覽器決定要渲染的最佳圖像大小。
Divi包括一個全尺寸和常規圖像模塊。它們不提供響應式圖像。這是一個萬能的。
非響應圖像具有單個圖像尺寸。大型台式機，平板電腦和手機上都會加載相同的圖像。
假設您使用原生divi圖像模塊，圖像大小為2000px。在寬度為400px的設備上提供2000px寬的圖像除了減慢網頁速度之外沒有任何其他用途。
解決方案 – Divi響應式圖像大小外掛程式
Divi響應式圖像大小外掛程式有兩個模塊。
自適應圖像分割模塊 – 它可以在常規的divi部分中使用。 全寬響應圖像除法模塊 – 它可用於全寬分頻部分。
這兩個模塊都有助於創建具有響應圖像大小的圖像標籤。
響應圖像將srcset和sizes屬性添加到圖像標記。
srcset和尺寸有什麼作用？
考慮一個＆lt; img＆gt;的例子。標籤
＆lt; img alt =＆quot; Divi響應圖像izes＆QUOT; SRC =＆QUOT; default.jpg＆QUOT; srcset =＆quot; small.jpg 240w，medium.jpg 300w，large.jpg 720w＆quot; sizes =＆quot;（max-width：360px）300px，100vw＆quot;＆gt;
讓我們回顧每個屬性。
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＆amp;類部分 - 為圖元素設置css id和類自定義CSS部分 - 為圖添加自定義css， img 和 figcaption tagsVisibility部分 - 設置桌面，平板電腦和手機上的圖標籤。 屏幕截圖
Divi響應圖像尺寸模塊設置。 此外掛程式是否具有任何依賴性？
優雅主題的Divi主題是這個外掛程式的先決條件。
這是否適用於優雅主題的額外主題
我們尚未在額外主題上進行測試。如果您碰巧讓它工作，請告訴我們🙂
