• Resolved jamesmorell

    (@jamesmorell)


    Hi there,

    For some reason that I simply cannot figure out, images that are post covers or background images on my site seem not to be picked up by the plugin as images to render as webp.

    There are webp versions of the images, and they are also generally the largest image on page so would definitely benefit from being rendered by the plugin. If you look at https://www.fromebikeproject.org/building/were-open/ you can see that the cover image is:

    <div class="nv-post-cover" style="background-image:url(https://www.fromebikeproject.org/wp-content/uploads/2023/11/IMG_3843-1-scaled.jpg);"><div class="nv-overlay"></div>

    And doesn’t use the <figure> element or pull through any of the .webp images that have been created. I have checked and they are there and are smaller – it’s an issue common across all post pages on the site, and the homepage too.

    I am now totally stumped as to why this issue is occurring so any suggestions would be more than welcome!

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Mateusz Gbiorczyk

    (@mateuszgbiorczyk)

    Hi @jamesmorell,

    Thank you for your message. I am sorry you have encountered a problem with our plugin.

    The reports we receive very often do not concern a problem with the plugin operation, but problems with understanding how the plugin works. Below I have attached the tutorial describing how to test the plugin:
    https://mattplugins.com/docs/how-to-test-converter-for-media-plugin

    I checked your website and most of the images are available in the WebP format. Not all, but this is due to the fact that some images converted to the WebP format did not weigh less than the original ones and that is why the original images are used. This happens when images have been previously optimized.

    Therefore, I recommend you to try the AVIF format on your website. I did an analysis to learn more about the potential benefits of using the AVIF format for you. Images converted to the AVIF format on your website will weigh 49% less than images converted to WebP only (instead of 8 MB in the WebP format, images will weigh approximately 4 MB), maintaining even better image quality. This will further improve the performance of your website.

    If you have any other questions, please, feel free to reach out to me. We will try to help you.

    Best,
    Mateusz

    Thread Starter jamesmorell

    (@jamesmorell)

    Hi Mateusz,

    Thanks for coming back to me. I can see that images contained within the body of a post work as expected – and I’d already tested as per your post (which is very helpful). It seems that perhaps the issue then is that the theme on the site isn’t allowing multiple sizes of images to be used as the cover image on posts therefore the <figure> element isn’t being used. Obviously I can use the pro version and save file weight, but I’d like to work out how to ensure the theme allows for multiple size options to be used as the cover image.

    Thanks,

    James

    Plugin Author Mateusz Gbiorczyk

    (@mateuszgbiorczyk)

    It seems that perhaps the issue then is that the theme on the site isn’t allowing multiple sizes of images to be used as the cover image on posts therefore the <figure> element isn’t being used.

    It does not matter. Our plugin does not change URLs to images, so when looking at the source of the website, you will see the URLs for the default images all the time. Our plugin creates redirections to output files in WebP and AVIF format, but without changing the URL. It does not matter how the image is placed on the website, whether it is a figure tag, an img tag or background-image in CSS. Our plugin supports all images.

    Obviously I can use the pro version and save file weight, but I’d like to work out how to ensure the theme allows for multiple size options to be used as the cover image.

    You noticed the image: IMG_3843-1-scaled.jpg. This file is actually not available in the WebP format. I analyzed it to explain to you what it is about:

    • the original file in JPEG format weighs 356 kB
    • the file converted to the WebP format would be 434 kB, so it weighs more than the original one and that is why the original file is used (this is a limitation of the WebP format and it happens when the original images have already been optimized before)
    • however, if you converted this file to the AVIF format, it would weigh 213 kB, so it would weigh less than the original one and instead of the original file, a file in the new generation format would be loaded
    Thread Starter jamesmorell

    (@jamesmorell)

    Thanks Mateusz,

    I think my issue is more with the background image on posts not being responsive, so I’m tackling that on the theme end of things, and I know that in some of the image sizes for the example image above there are webp versions, so I’ll get it resolved and know it’s working when I see webp in the network tab.

    Thank you for your replies!

    Plugin Author Mateusz Gbiorczyk

    (@mateuszgbiorczyk)

    @jamesmorell I have the impression that you don’t understand what I wrote to you. Do I think right? Please tell me how you understand this?

    Thread Starter jamesmorell

    (@jamesmorell)

    No, I get it – the image in my example that I sent is not smaller as a webp, so therefore the plugin doesn’t create the webp or redirect to it on load. However looking on my server I can see that at the various other sizes of image that I’ve created on upload to deal with responsiveness some of those are smaller when rendered as webp.

    So my issue is not that the plugin isn’t great (it is!) it’s that my theme isn’t making use of the other image sizes available to it for the featured image.

    So if I resolve my issue with the featured image, some of the images in the example above will show as webp, some won’t, depending on if the webp version is smaller than the jpeg. And of course the pro version would help me do the same, but with AVIF files.

    Plugin Author Mateusz Gbiorczyk

    (@mateuszgbiorczyk)

    @jamesmorell Using the AVIF format, all your images would be converted to the AVIF format and displayed in the AVIF format. There would be no problems like with the WebP format because AVIF is a better format. And if you use the AVIF format, you do not need the WebP format.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Cover images not being converted into elements’ is closed to new replies.