Litespeed and Webp background images

I’ve just built my first site in Cwicly. Its fantastic thank you.
And thanks to @marius for the advice and support.
I’m hosting the site on a litespeed server, which makes it quick and easy to serve images as webp.
The design I have created relies on a lot of background images. Which don’t get served as webp.
PSI suggests changing this would be a big improvement on load speed.

Is there anything I can do to change this? Or anything that can be added in a future update?
Thanks
Dan

1 Like

@jazzydan
I have been using wepb images as div background manually with no issue, so I don’t think it is a Cwicly relative issue.
In my case, I uploaded webp images directly to Worpdress.

Did you try the plugin Performance Lab? It gives you the option to reates WebP versions for new JPEG image uploads if supported by the server.

Best with it,

Julien

Litespeed manages the conversion of images and the displaying of images on the front end dependent on the requirement of the browser being used. Which is pretty cool and worth checking out. Works great on standard images, but not for background images. I think this is just some compatibility issue with cwicly and litespeed. But I’m not positive.

Did you try to work around the background image issue, and instead use a CC image using the size and object fit properties? If that works better with Litespeed, I believe you should be able to use that in most situations.

1 Like

Yeah that could work. I’ve alway had to do it with background images in WPBakery to get the correct responsive effect.

I can’t work out how to get the same centred effect on mobile when I put the images in that way though, which is probably just my poor understanding of cwicly.

I think there a quite a few benefits in using actual images compared to background images in this case.
Plus you’ll get your desired WebP format served.

Just place the image block inside a column and make sure to apply the following values:

image

In case you want to position your image, this property isn’t available yet, but it’s planned.
Use custom CSS instead:

image

Do not forget to give your image a proper description:

In case you leave it empty, the alt text from the WP media library will be used instead.
Consider using lazy load, but I think it’s currently enabled anyway.
Do not remove srcset.

Alternatively, you could check if you find here a solution for your current setup.
There are people reporting being successful using WebP as background images on litespeed.

I’ve seen @sunny also posting there, looking for a solution.
Maybe he can share his experience and give some advice if he could make it work in his case.

PS:
Welcome to the forum @jazzydan, you finally made it :+1:

2 Likes

I prefer this method as well, mainly because it lets you take advantage of srcset and lazy load images.

As for getting background images to work with WebP… I feel like I looked at this a long time ago, but have no idea where. I don’t think it was on this forum.

1 Like

I am also in favour of never using Background images.

This is great, thanks everyone for all the advice.
I have updated all the images.
There is one image which is a background image as it has text over the top. Is there something I should do better in this situation?

Hi @jazzydan,

Great to hear Cwicly is working well for you :slight_smile:

Just thought you should know that the Maps block you have placed in your footer is showing blank.
This was being caused by the Google Maps API key not being saved properly.

With 1.2.4.1 this should now be fixed. Be sure to save your API key once again.

Please let me know if that helps and sorry for the inconvenience.

1 Like

You can still do this with the image and just a couple of divs with right positionning.
Here are the basics:

1 Like

Thanks Araminta,
Still not working for me I’m afraid.
https://www.loom.com/share/590e7fe0f9a744b8a04c5b17cf84e751

Cwicly ThemeVersion: 1.0.3

Plug-in - Version 1.2.4.1
Cheers
Dan

Hey @jazzydan,

just some small advices if you don’t mind.

As soon as you do regenerate your HTML, the menu block will change the div tag to a nav tag, that’s part of the latest update. Since you use the nav tag on the parent container, you should consider changing it back to a div tag.

Enable the following settings to get rid of WP default bloat, you don’t need it in most cases:

Enable this settings to remove the highlighted wrappers from your DOM:

Don’t forget to assign the correct tags then (header <section> to <header> and footer <section> to <footer>.
Do also consider to replace the default post content block with the Cwicly one and assign the <main> tag to it.

To clean up your HTML, enable the following option.

Regarding the Google Maps bug, it’s working properly on my side after the update.
You could try to hard-refresh your browser and try again.

@marius @Araminta
Just had another look.
I think this may be with the Arc Browser. I tried again in Safari and all seems fine.
Thanks
Dan

1 Like

Currently the plugin includes the following performance modules:

  • WebP Uploads: Creates WebP versions for new JPEG image uploads if supported by the server.