CSS border issue on Imagify images

Hi @ddelicious!

This is Joseph from Imagify, and I’ll gladly assist you here!

These styling issues are generally caused by Imagify’s “Use <picture> tags” option for displaying WebP images. This option swaps out your page’s img tags for <picture> tags in order to provide fallback support for users of Apple Safari browsers (they don’t fully support WebP images yet). This change can cause issues when CSS styles are not applied to the <picture> elements because they are targeted for img elements.

A quick and easy option to resolve this is to switch to the “Use rewrite rules” option in your Imagify plugin settings page as long as you don’t use a CDN, Cloudflare, or certain cache services like Varnish (as these conflict and may cause image display issues, especially in Safari browsers).

It’s worth noting that using the rewrite rules option will result in your HTML code appearing to display the JPG or PNG versions of images, though the rewrite rules work to ensure the WebP images are actually being served to users’ browsers. You can follow this guide for ensuring WebP images are being served: https://imagify.io/documentation/how-to-check-if-webp-image-is-displayed-on-your-site/.

I’ll also note that if you are running on an Nginx server, you will need to manually add the rewrite rules to your nginx.config file. You can view this page for more information on that: https://imagify.io/documentation/my-images-are-broken/.

If the “Use rewrite rules” option is not possible for you, you can also try installing and activating the following helper plugin, which will make sure the id, class, title, and loading attributes stay on the img elements after the <picture> tag replacement happens. This may allow the border styling to remain correctly applied to the img elements.
https://www.dropbox.com/h?preview=imagify-move-attributes-to-img-tags.zip

If the above options won’t work for you, you can make sure the “Use <picture> tags” option is enabled, send me a link to an example with an optimized image where the border is not displaying properly, and I would be happy to see if I can come up with some new CSS styles you can apply to get this displaying properly for you while serving WebP images.

I’ll look forward to your response so we can hopefully get this resolved for you!

Best regards,
Joseph

• This reply was modified 5 years, 6 months ago by WP Media.
• This reply was modified 5 years, 6 months ago by WP Media.

Hey @ddelicious,

Yes, hopefully the plugin will help. If it doesn’t, it is also possible to adjust your styles so they still work on images used within <picture> tags. You would just need to change or add selectors so they are able to still be applied when img tags are nested inside the <picture> tags.

In Apple’s recent Big Sur 11 update, they introduced support for WebP images in their newest version of Safari. Once this update is widely adopted by users and the older versions of Safari are no longer widely used, you’ll be able to safely link directly to your WebP images without the need for Imagify’s “Use <picture> tags” or “Use rewrite rules” options to provide fallback support. You can track browser support for WebP at https://caniuse.com/webp. So yes, relatively soon this should not be an issue for you at all anymore.

Best regards,
Joseph

• This reply was modified 5 years, 6 months ago by WP Media.
• This reply was modified 5 years, 6 months ago by WP Media.
• This reply was modified 5 years, 6 months ago by WP Media.