Select Page

Responsive Images in Divi

Where is SRCSET

Divi doesn’t yet support SRCSET images, though this has been in wordpress since around 2015.

For those who aren’t html programmers the srcset attribute tries to inform the browser what image sizes are available and what screen widths each image is suited to.

So, for example you might define a srcset that displays an image called “image-1600.jpg” for any screen widths 1600px and larger but for smaller screens display an image called “image-450.jpg”.

Why is the advantageous.

Because your smaller screen is downloading a smaller image and thus loading faster.  Smaller screens are often (bit not always) associated with mobile devices who might traditionally be running at lower internet speeds.  Your page will therefore load faster on mobile.

Not everything is a plugin

I just found some code that implements this with some basic code to copy and paste into your divi-child theme functions.php.

Editing theme Files

Sadly, you will need to be happy or brave enough to dig around with the file editor under >appearance>theme editor … but I found that I copied and pasted, made two adjustments to the image sizes (add_image_size) and it all worked perfectly.

add_image_size is used to add custom images sizes that you might need in your divi website. For example I have 3 or 4 pages that display columns of images at 510×375 px. I therefore added a line:

add_image_size( 'belong-here', '510', '375', true );

This causes WP to create an image that size whenever a new image is uploaded. I can then choose that image rather than some huge image that came from the designer or stock image website.

So grab the code from here and paste it into your functions.php

Find the full article here