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
@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.
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:
In case you want to position your image, this property isn’t available yet, but it’s planned.
Use custom CSS instead:
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 
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.
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 
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.
You can still do this with the image and just a couple of divs with right positionning.
Here are the basics:
Thanks Araminta,
Still not working for me I’m afraid.
https://www.loom.com/share/590e7fe0f9a744b8a04c5b17cf84e751
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
Currently the plugin includes the following performance modules:
I am using version 1.2.9.5.8 and I have a map block on a contact page - the block shows fine in the admin area but is not getting rendered to the site … is this possibly a related issue?
Hey there @Marius , I am trying to use this method of placing an image full width behind my content instead of using a background image but I must be missing something …
Any guidance on what I am doing wrong here?
The image in question is the bottom sand image which is not covering the entire width of the screen.
You can try to swap the values.
width: 100%;
height: auto;
It may be worth checking if any margins or padding have been set on the Section, Columns or Column blocks or on the Image.
Also, depending on the layout of the section the Columns block may not be full width, so that is also something worth checking.
@Marius - swapping the values fixed the issue
@StrangeTech - thank you for the advice
Another question … this method still does not allow me to set different images for different devices … ie: if I set one image for desktop then toggle to mobile and set a different image, the desktop image changes as well. So I guess I am not clear what makes this method the more efficient approach for setting a background image.