WebP and the Safari question

Yeah but that is if you upload to their servers.
an OG Image tag is not uploaded to their server, you store it on your server and they grab it from there.

Or am I wrong with this?
In any case - as of now, their “shared” posts will break if your OG Image is not of the supported format.

I think FB is doing some kind of cache with OG contents, not least because when you test a url it will often fail the first time saying it has never been scraped before, then it passes at the second attempt. I’ve also found previously that I had to physically change the file name if the image needed to be updated or they would continue to show the old one.

Although they take it from your server, I think they are likely referencing copies on their own servers. To get around this you can add a ? at the end of the file name, so FB checks the original source. I haven’t tried this with Blocs though and the asset manager may not like it if you use the social cards, rather than hand coding.

1 Like

This morning I installed Safari 15 and hoped to find support for AVIF, but it is still not present. Then I stumbled on this article below and it seems that for Safari alone this is handled at an OS level, rather than delegating it to the browser.

This seems to explain why Safari is always so far behind on image formats, though I am sure Apple could fix this if they wanted. It did make me wonder if this might even be a feature that comes with Monterey but only for silicon computers as Apple moves away from Intel.

Do you know the developer tools of facebook?

Yes of course. I use it to test Facebook OpenGragh and resolve any issues that might be present.

1 Like

I’m trying to get Modernizr to work, and I’m not that familiar with JS. I’ve downloaded the webp build from modernizr.com and put that code within <script> in Project Header. I’ve saved alternate webp images of the jpgs I’ve specified in Blocs, put them all in a img folder that I’ve attached to the project. But no webp images loads when I’m viewing the pages in Firefox, it only loads jpg.

Any ideas on how to go about?

Curious, why this script would would not work. The idea is if one does not work on the used browser the code shifts to one the would work. It’s beyond my knowledge, I put it together without knowing code.

<picture>
    <source srcset="image.heic" type="image/heic">
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.jxl" type="image/jxl">
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.png" type="image/png">
    <source srcset="image.jpeg" type="image/jpeg">
    <img src="image.jpg">
</picture>

Also here a newbie question. If it did work… How would you apply it to each image, say if there dozens on the page?