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 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.
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:
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: