WebP Format Display Function Breaks the Theme

Hi,

The reason for this is because we change the HTML output by adding <picture> tag on top of your original tag. If your theme does not handle picture tags with CSS as same as for img tag, there is layout issue.

There are two solutions:

1. to contact your theme provider and ask them to update the theme to handle picture tags as same as img tags
2. to add custom CSS in order to fix these layout issues

Since you use Cloudflare, there is no possibility to use rewrite rules to show WebP, otherwise, this would be the recommended way.

?Let me know if you need any further assistance, I am happy to help.

Best Regards

Hi and thank you for the reply.

Could you please give me the custom CSS code to put it into the style.css file? We use Genesis News Pro theme.

Best regards

Hi, i have the same problem, many css are not working anymore

A normal text image align is not working, border radius not working etc….

The theme support found the problem regarding your plugin they told me:

The image is not outputting the normal HTML. It is inside of a <picture> element

The code that you sent through in the previous email should work:

But in the inspector:

<picture class=”size-medium wp-image-1739 aligncenter” width=”300″ height=”300″>
<source type=”image/webp” srcset=”https://www.gfour.co.th/web/wp-content/uploads/2019/10/GFour-App-Icon-300×300.jpg.webp, https://www.gfour.co.th/web/wp-content/uploads/2019/10/GFour-App-Icon-150×150.jpg.webp 150w, https://www.gfour.co.th/web/wp-content/uploads/2019/10/GFour-App-Icon-100×100.jpg.webp 100w, https://www.gfour.co.th/web/wp-content/uploads/2019/10/GFour-App-Icon.jpg.webp 600w” sizes=”(max-width: 300px) 100vw, 300px”>

</picture>

Of course, cannot work

Please i need a solution as soon as possible, i need to go online and all my image, css in general are not working

Hi everyone,

Thanks for your patience!

Unfortunately, the custom CSS code could be different for each site or site’s element so we are not able to deliver the general code that works ??

If there are many layout issues and your theme provider can not give the CSS code to fix it, you should consider using rewrite rules of displaying WebP (if you are on Apache server and don’t use CDN/Cloudflare) or turn off WebP display completely ??

Best Regards

Thank you for clarifying, WP Media ??