The DIVI Post Slider Module is a wonderful way to showcase our posts and articles, but unfortunately it can be very harmful to our page load time. Because it uses the original size of the featured images, the megabytes can quickly accumulate, especially if a client with little tech knowledge uploads his blog’s featured images directly as he gets them from his camera or high-resolution download. But even besides such an extreme situation of having a few 5 MB giants bloating our website, the difference of a 500kb image compared with 100kb is still summing up significantly in a post slider. The described method might not fit for the parallax effect that requires bigger source files by default, and the 1080px version might not deliver sufficient quality for using the post slider in a fullwidth row – but for a regular standard slider on a site with regular content width, anything bigger would simply be a waste.

Choosing smaller background images for the post slider module

After contacting the Elegant Themes support, Eduard was so friendly to figure out an excellent JQuery solution that can simply be used within a code module, placed on the same page above the post slider. In this way the other pages are not affected. Perfect integration. So with the following code we can make use of two of DIVI’s pre-rendered thumbnail sizes: 1080×675 and 510×382. They are cropped so the filename will always have the same addition and can therefore be added by the script to the image name. So instead of the original full size image, e.g. original-image.jpg, the post slider will now load the most likely much smaller original-image-1080×675.jpg for screen sizes above 600px (the set threshold) and original-image-510×382.jpg for screen sizes below 600px. An immense saving of bytes and therefore pageload.

One size fits all

For me personally the 510px version was even sufficient for all sizes. Overlaid by a strong color as I used on yogaonlineacademy.com, they simply look like they have been blurred by purpose as a nice effect. No pixelation is bespeaking the low resolution, and with an average of only 50kb per image my aim to show up to ten posts is still staying in a decent frame.

By the way, if you use more than one post slider on a page but only want the script to work on one of them, you could assign a custom class to the one you want to adapt, and then you just need to replace .et_pb_post_slider in the code with that class. In this way the script will only influence the specific module(s).

Note: On one of my websites, out of so far unexplainable reasons, the slice method needs to be set to backgroundImg = backgoundProp.slice(4).slice(0,-5); It doesn’t make sense at all, but with (5) and (0, -6) it was suddenly cutting of the h of http and the last letter of the filename. Update: it happened again after a while to behave different and other values would be needed. I copied the code now into the Theme Options / Integration / Header area with the original values. Let’s see if the code module is causing the irregularity.

I am not coding in JQuery, so if you find something to reduce or optimize in the code, or where the above mentioned strange behaviour could come from, let me know in the comments. All the kudos and my thanks go to Eduard from the Elegant Themes support who figured out how to fulfill my needs for a slimmer post slider module.