Responsive Image Sizes Divi – WordPress plugin 外掛推薦下載

點擊下載

響應式圖像尺寸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模塊遵循

谷歌推薦圖像搜索引擎優化 響應式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響應圖像尺寸模塊設置。
FAQ

此插件是否具有任何依賴性?

優雅主題的Divi主題是這個插件的先決條件。

這是否適用於優雅主題的額外主題

我們尚未在額外主題上進行測試。如果您碰巧讓它工作,請告訴我們🙂

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

shares