Note: This code is no longer supported. If you need help with updates and custom work please post this project for our partners.

The downside of visual page builders is that they all have a big limitation. None of them use truly responsive images. Yes, the images adapt to different resolutions but the same 1900px large 2MB image is being loaded on both desktops, tablets, and mobiles. I’ve investigated themes like Divi, Avada and Enfold and they all load the same image size in every scenario. The solution I’m implementing below for Divi theme can be adapted to work with any theme.

WordPress SRCSET and SIZES for Divi Theme

WordPress is already using srcset and sizes for its native editor but Divi builder replaces that functionality with its own. When this happens the image loads the full image. Using the solution below will ensure that responsive, smart cropped, retina ready images are being used. Implement the code below in your functions.php file in your child theme. Please remove the PHP opening/closing tags and enable Divi functions snippet if you already have that file created.
View Solution

How does it work?

1) Content area images

Divi content images responsive
The code identifies all images in the content area and replaces the full URL with the SRCSET.
The image sizes (break points) are the sizes registered by the theme (and WordPress). We have 1080px, 1024px, 768px, 300px, on top the 1440px was added so you’ll need to regenerate thumbnails. For example:

2) The fullwidth header module

fullwidth header responsive
This module is heavily used for the intro images. It needed special treatment because it’s setting images as background which are not compatible with the srcset. To solve that we need a different aproach and it’s working as it follows:

For non-retina screen:

For retina screen:

Additional notes and suggestions

View Solution