Linux 软件免费装
Banner图

Responsive Image Sizes Plugin For Divi

开发者 wpt00ls
更新时间 2019年6月30日 13:15
PHP版本: 7.0 及以上
WordPress版本: 5.2.2
版权: GPLv2 or later
版权网址: 版权信息

标签

image sizes divi responsive images

下载

1.1.0

详情介绍:

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
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.
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 <img> tag
<img alt="Divi responsive image sizes" src="default.jpg" srcset="small.jpg 240w, medium.jpg 300w, large.jpg 720w" sizes="(max-width: 360px) 300px, 100vw">
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, Divi image sizes Divi supports following css media breakpoints. 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 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.

屏幕截图:

  • Divi Responsive Image Sizes Module Settings.

常见问题:

Does this plugin have any dependencies?

Divi Theme from Elegant Themes is a pre-requisite to this plugin.

Does this work with Extra theme from Elegant themes

We haven't tested it on Extra theme. If you happen to get it working, let us know :-)

更新日志:

1.1.0 1.0.0