前言介紹
- 這款 WordPress 外掛「Responsive Image Sizes Divi」是 2019-07-02 上架。 目前已經下架不再更新，不建議安裝使用。
- 目前有 200 個安裝啟用數。
- 上一次更新是 2023-08-24，距離現在已有 619 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.9.8 以上版本才可以安裝。
- 有 1 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
wpt00ls |
外掛標籤
divi | image sizes | responsive images |
內容簡介
使用圖片 srcset 在 Divi 主題中讓你的網站更快加載。
問題 – Divi 網頁上的圖片僅顯示單一大小的圖片，而不管裝置大小
你的 Divi 網頁速度緩慢嗎？
對裝置大小不管不顧的圖片標籤是否只顯示一種圖片大小？
網站速度減緩了銷售，因為跳出率增加。
在網頁上使用響應式圖片可以提供相同圖片的不同大小。瀏覽器決定最佳圖片大小以渲染。
Divi 包含全尺寸和常規圖片模組。它們不提供響應式圖片。它們是一個「一個尺寸適用於所有」的模板。
非響應式圖片只有一種圖片大小。相同的圖像會加載到大型桌面、平板和移動裝置上。
假設您使用本機的 divi 圖片模組，圖片大小為 2000px。在裝置寬度為 400px 的裝置上提供 2000px 寬的圖像沒有任何意義，除了減慢網頁速度之外。
解決方案 – Divi 響應式圖片大小外掛
Divi 響應式圖片大小 外掛有兩個模組。
響應式圖片 divi 模組–它在常規 divi 部分中可用。
全寬響應式圖片 divi 模組–它在全寬 divi 部分中可用。
這兩個模組都有助於創建具有響應式圖片大小的圖片標籤。
響應式圖片會在圖像標記中添加 srcset 和 sizes 屬性。
srcset 和 sizes 做什麼？
考慮一個 標籤的例子
讓我們逐一解釋每個屬性。
alt=”Divi responsive image sizes”
alt 屬性描述圖片的替代文字。當瀏覽器無法找到圖片時，會載入此文字。
src=”default.jpg”
src 屬性為不支援 srcset 和 sizes 屬性的瀏覽器定義備用圖像路徑
srcset=”small.jpg 240w, medium.jpg 300w, large.jpg 720w”
srcset 屬性以不同大小的圖像列表。與每個圖像路徑一起，我們指定它的寬度（以像素為單位）
sizes=”(max-width: 360px) 300px, 100vw”
sizes 屬性根據視口（設備）大小指示瀏覽器如何從 srcset 中選擇合適的圖像。
根據上面的例子，
對於 360px 以下的視窗大小，瀏覽器顯示中間圖像（300px）medium.jpg。
對於大於 360px 的視窗大小，瀏覽器顯示寬度為 720px 的 large.jpg。
Divi 圖片大小
Divi 支援以下 CSS 媒體斷點。
大螢幕（1405 像素以上）
筆記型電腦和桌面電腦（1100 像素至 1405 像素之間）
橫向平板電腦（981 像素至 1100 像素之間）
直向平板電腦（768 像素至 980 像素之間）
橫向智能手機（480 像素至 768 像素之間）
直向智能手機（0 至 479px 之間）
對於每個斷點，響應式 Divi 模組有相應的字段來設置圖像寬度。
提高圖像 SEO 分數
圖像 SEO 非常重要。響應式 Divi 模組遵循最佳做法，為每個圖像添加 alt 和 title 屬性。
原文外掛簡介
Make your website load faster in Divi Theme using image srcsets.
The Problem – Images on divi webpage serving single image size irrespective of devices sizes
Is your divi webpage slow?
Do the tags serve a single size irrespective of the device size?
A slower website causes decrease in sales due to increase in bounce rate.
A responsive image offers different sizes of the same image. The browser decides the best image size to render.
Divi includes a fullsize and regular image module. They don’t serve a responsive image. It’s a one-size-fits-all.
The non-responsive image have a single image size. The same image loads on large desktop, tablet and mobiles.
Let’s say you use the native divi image module with image of size 2000px. Serving the 2000px wide image on a device with width 400px serves no purpose other than to slow down the webpage.
The Solution – Divi responsive image size plugin
The Divi Responsive Image Size plugin has two modules.
Responsive Image divi module – It’s available in regular divi section.
Fullwidth Responsive Image divi module – It’s available in fullwidth divi section.
Both the modules help creates a image tag with responsive image sizes.
A responsive image adds the srcset and sizes attributes to the image markup.
What does srcset and sizes do?
Consider the example of an tag
Let’s go over each attribute.
alt=”Divi responsive image sizes”`
The alt attribute describes the alternative text for the image. Browser loads this text when it can’t find the image.
src=”default.jpg”
The src attribute defines a fallback image path for browsers that don’t support srcset and sizesattributes
srcset=”small.jpg 240w, medium.jpg 300w, large.jpg 720w”
The srcset attribute lists images at different sizes. Along with each image path we specify it’s width in pixels.
sizes=”(max-width: 360px) 300px, 100vw”
The sizes attribute instructs the browser on how to pick the right image from the srcset based on the viewport (device) size.
Going by the above example,
For viewport size 360px and below, browser displays medium.jpg (300px) image.
For viewport size above 360px, browser displays large.jpg image that is 720px wide.
Divi image sizes
Divi supports following css media breakpoints.
Large screens (1405px upwards)
Laptops and desktops (between 1100px and 1405px)
Tablets in landscape mode (between 981px and 1100px)
Tablets in portrait mode (between 768px and 980px)
Smart phones in landscape mode (between 480px and 768px)
Smart phones in portrait mode (between 0 and 479px)
For every breakpoint, the responsive divi modules has a corresponding field to set the image width.
Improve image SEO score
Image SEO is important. The responsive divi modules follows google recommendations for image SEO
The responsive divi modules wraps the image in a figure tag.
It can display a caption for the image using the figcaption tag.
The alt attribute text is got from the WordPress media attachment or custom text.
Full divi frontend builder support
The Responsive Image and Fullwidth Responsive Image divi modules provide full divi frontend builder support. Add custom styles to the image and caption text via the modules Design tab.
Divi Responsive Image Sizes Module Settings – See screenshot 1.
Image section – Upload/select an image, set alt and figcaption tags. If alt and caption values are empty, it uses corresponding values from WordPress media attachment.
Responsive Image Width section – Define the image sizes at different media breakpoints.
Caption Text section – Add custom style to the caption text.
Sizing section – Change the max and standard width for the figure element.
Spacing section – Set the padding and margin values for the figure
Border section – Set border styles for the img tag.
Box shadow section – Set box shadow styles for the img tag.
Filters section – Set filters for the figure element.
Transform section – Set transforms for the figure element
CSS ID & Classes section – Set css id and classes for figure element
Custom CSS section – Add custom css for figure, img and figcaption tags
Visibility section – Set visibility for the figure tag on desktop, tablet and mobile.
Divi Premium Plugin
We offer other divi premium plugins. Each of them have a 7-day FREE trial, no upfront payment details required.
Gravity Forms Divi Module
FAQ Plugin For Divi
Image Carousel For Divi
Product Carousel For Divi
Contact Form 7 Grid & Styler For Divi
Blog Carousel For Divi
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Responsive Image Sizes Divi」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.1.0 | 1.2.0 | 2.0.0 | trunk |
延伸相關外掛（你可能也想知道）
Supreme Modules Lite – Divi Theme, Extra Theme and Divi Builder 》Divi Supreme不像其他Divi外掛，它配備了許多免費的創意和有用的強大Divi模組和擴展功能。使用我們簡單易實現的模組和擴展功能，把Divi帶到下一個水平並輕鬆...。
Popups for Divi 》一旦啟用了此外掛，在「區段設定」彈出式視窗中的 Visual Builder 會顯示一個名為「Popup」的新標籤。在「Popup」標籤中，您可以將一個普通的區段變成彈出式...。
Divi Torque – Plugin for Divi Theme and Builder 》, 厭倦了複雜的模組、差勁的表現和昂貴的附加功能，只為得到平庸的結果？, 現在介紹Divi Torque，它是Divi Page Builder的終極Addon。它包含了最全面的模...。
Divi Carousel Maker 》l module for showcasing customer testimonials in a carousel format, including images and text., Countdown Carousel – Create a sense of urgency by d...。
Divi Contact Form 7 Styler 》, Divi Contact Form 7視覺化網頁建構器。現在你可以使用Divi可視化建構器定制和設計美麗的聯繫表單，而不用寫一行代碼。, 查看我們的實時演示, 您可以選擇包...。
Surbma | Divi & Gravity Forms 》, 這個外掛程式可以為 Gravity Forms 增加 Divi 主題的表單樣式，非常輕量化，CSS 壓縮以降低載入時間。, 此外掛程式支援 GF 2.5 標記和 2.6 內嵌按鈕功能，...。
Simple Divi Shortcode 》使用這個工具，您可以透過簡單的短代碼在另一個模組內容或 PHP 模板中嵌入任何 Divi 圖書館項目。, 您只需要在 Divi 圖書館中建立佈局、區段或模組。, 項目 I...。
Shortcodes for Divi 》「Divi 縮略語外掛」由WP Zone製作，允許您在任何文字出現的地方使用Divi縮略語。 , 此外掛可讓您顯示Divi程式庫中的任何範本為縮略語，並為Divi程式庫新增一...。
Breadcrumbs Divi Module 》此外掛為 Divi Builder 新增了一個麵包屑模組。啟用此外掛之後，你的模組清單中會多一個名為 "Breadcrumbs" 的模組。你可以使用這個模組在 Divi Builder 中任...。
Image Carousel Module for Divi 》使用Divi圖像輪播外掛在您的網站上添加圖像輪播。此外掛會在Divi Builder中添加一個新的Image Carousel模組。啟用外掛後，模組列表中將出現名為Image Carouse...。
Customizer Reset 》一鍵重設 WordPress 客製化 (Customizer) 的佈景主題設定。適用於 99％ 的佈景主題，包括WPZOOM佈景主題以及知名的佈景主題，如Divi、Astra。, 此外掛可移除...。
Category Ajax Filter 》支援 Elementor Builder, 不用重新載入網頁，即可按類別篩選文章/自訂文章類型中的文章。在前端選擇特定的分類和分類名詞。使用預置的多種版面和 Ajax 請求來...。
Divi Lightbox for Images 》如果在 Divi 選項菜單中啟用了 Divi Gallery 設置，Divi 主題和生成器將使用本地燈箱腳本，在用戶從相冊中點擊圖像時打開模態窗口。但是，此腳本對於個別自身...。
Flip Cards Module For Divi 》這個外掛在 Divi Builder 中新增了一個翻轉卡片模組。啟用外掛後，模組清單將新增一個名為 Flip Cards 的模組。您隨後可以使用此模組在 Divi Builder 中任何...。
Contact Form DB Divi 》Contact Form DB Divi 外掛是專為 Divi 網站提供儲存及管理表單提交資料的易用工具，安裝後會在 WordPress 後台創建一個名為「Divi Form DB」的選單項目，使...。