Title: WebP Format Display Function Breaks the Theme
Last modified: October 21, 2019

---

# WebP Format Display Function Breaks the Theme

 *  Resolved [ArtFl](https://wordpress.org/support/users/artfl/)
 * (@artfl)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/webp-format-display-function-breaks-the-theme/)
 * Hi team,
 * You’ve got a great plugin but there’s a problem.
 * We had to turn off the “Display images in webp format on the site” function of
   your plugin because it breaks the design of our website.
    If this function is
   switched on, then the padding around the aligned-left pictures disappear and 
   they look bad on the page.
 * Please view the screenshots.
 * Without Imagify:
    1/ [https://drive.google.com/open?id=1VPxyThJDoO5jui6iQnrcaa2ZO7WsB7Cv](https://drive.google.com/open?id=1VPxyThJDoO5jui6iQnrcaa2ZO7WsB7Cv)
   2/ [https://drive.google.com/open?id=1s-serybldevzZwhMrD6TbCKe_cWTtMYf](https://drive.google.com/open?id=1s-serybldevzZwhMrD6TbCKe_cWTtMYf)
 * With Imagify:
    1/ [https://drive.google.com/open?id=1ic49YAheH5PoarZRKjjHXgueQ9kA4v3y](https://drive.google.com/open?id=1ic49YAheH5PoarZRKjjHXgueQ9kA4v3y)
   2/ [https://drive.google.com/open?id=15_VbZbscOZt35eqPvbmqsDVWO2QnACbR](https://drive.google.com/open?id=15_VbZbscOZt35eqPvbmqsDVWO2QnACbR)
 * It’s a pity because we have installed Imagify to display WebPs.
    Is it possible
   to fix this bug?
 * Regards,

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [WP Media](https://wordpress.org/support/users/wp_media/)
 * (@wp_media)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/webp-format-display-function-breaks-the-theme/#post-12075317)
 * 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
 *  Thread Starter [ArtFl](https://wordpress.org/support/users/artfl/)
 * (@artfl)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/webp-format-display-function-breaks-the-theme/#post-12076213)
 * 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
 *  [alexdex](https://wordpress.org/support/users/alexdex/)
 * (@alexdex)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/webp-format-display-function-breaks-the-theme/#post-12120664)
 * 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:
 * ![GFour App Icon](https://i0.wp.com/www.gfour.co.th/web/wp-content/uploads/2019/
   10/GFour-App-Icon-300x300.jpg?resize=300%2C300&ssl=1)
 * 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-300×300.jpg.webp),
   [https://www.gfour.co.th/web/wp-content/uploads/2019/10/GFour-App-Icon-150×150.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](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](https://www.gfour.co.th/web/wp-content/uploads/2019/10/GFour-App-Icon.jpg.webp)
   600w” sizes=”(max-width: 300px) 100vw, 300px”> ⌊GFour App Icon⌉ </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
 *  Plugin Author [WP Media](https://wordpress.org/support/users/wp_media/)
 * (@wp_media)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/webp-format-display-function-breaks-the-theme/#post-12195399)
 * 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
 *  Thread Starter [ArtFl](https://wordpress.org/support/users/artfl/)
 * (@artfl)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/webp-format-display-function-breaks-the-theme/#post-12195497)
 * Thank you for clarifying, WP Media 🙁

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘WebP Format Display Function Breaks the Theme’ is closed to new replies.

 * ![](https://ps.w.org/imagify/assets/icon-256x256.gif?rev=3452959)
 * [Imagify: Optimize Images for Top Speed (Compress & Convert to WebP/AVIF)](https://wordpress.org/plugins/imagify/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/imagify/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/imagify/)
 * [Active Topics](https://wordpress.org/support/plugin/imagify/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/imagify/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/imagify/reviews/)

## Tags

 * [webp](https://wordpress.org/support/topic-tag/webp/)

 * 5 replies
 * 2 participants
 * Last reply from: [ArtFl](https://wordpress.org/support/users/artfl/)
 * Last activity: [6 years, 6 months ago](https://wordpress.org/support/topic/webp-format-display-function-breaks-the-theme/#post-12195497)
 * Status: resolved