{"id":65,"date":"2021-03-29T09:57:00","date_gmt":"2021-03-29T09:57:00","guid":{"rendered":"https:\/\/imagify.io\/documentation\/?p=65"},"modified":"2025-09-24T12:31:50","modified_gmt":"2025-09-24T12:31:50","slug":"my-images-are-broken","status":"publish","type":"post","link":"https:\/\/imagify.io\/documentation\/my-images-are-broken\/","title":{"rendered":"My images are broken"},"content":{"rendered":"\n
<\/i>TL;DRIn Imagify settings, switch WebP display setting from \u201cUse <picture> tags\u201d to \u201cUse rewrite rules\u201d as long as your website doesn’t use a CDN or Cloudflare.<\/div>\n\n\n\n

If you’re seeing broken layouts, missing images, or degraded image quality on your site, this could be due to how Imagify is serving Next-Gen images like WebP.<\/p>\n\n\n\n

Imagify provides two options for displaying Next-Gen images on your site:<\/p>\n\n\n\n

    \n
  1. Using <picture><\/code> Tags<\/strong><\/li>\n\n\n\n
  2. Using Rewrite Rules (Recommended)<\/strong><\/li>\n<\/ol>\n\n\n\n

    Using <picture><\/code> Tags<\/h3>\n\n\n\n

    The <picture><\/code> tag method<\/strong> works by replacing <img><\/code> tags with <picture><\/code> tags to serve WebP images. While this method is effective for most browsers, some themes or plugins may not be fully compatible, which can result in broken layouts or missing images.<\/p>\n\n\n\n

    Solution:<\/strong>
    To check if the <picture><\/code> tag method is causing the issue, you can disable the \u201cDisplay images in Next-Gen format on the site\u201d<\/strong> option in your Imagify settings. After disabling, clear all caches (including any caching plugins, browser cache, and CDN cache if applicable) and see if the issue is resolved.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Workaround:<\/strong>
    If you confirm that the <picture><\/code> tag method is causing the issue and you cannot switch to rewrite rules, you can try using this helper plugin<\/a> to keep the attributes in the <img><\/code> tag instead of converting them to <picture><\/code>. This workaround can help maintain compatibility with your theme. It would be good to test it to ensure that it works properly.<\/p>\n\n\n\n

    Using Rewrite Rules (Recommended)<\/h3>\n\n\n\n

    If you\u2019re not using Cloudflare or a CDN, switching to the Rewrite Rules<\/strong> method is a safer way to serve Next-Gen images. This method doesn\u2019t modify your site’s HTML but adds rules to your .htaccess<\/code> file (on Apache servers) to serve WebP images smoothly without affecting your site\u2019s layout.<\/p>\n\n\n\n