Streaming live at 10am (PST)

Upload JPEG2000 or other WebP formats to Webflow?

Hey so I have pretty awesome pagespeeds with Webflow, but Google recommends I use WebP format to increase loading speed. Is this possible with Webflow? I tried uploading a .jpf file to webflow and it didnt appear.

WebP is not supported by Webflow at the moment. :grinning:

Don’t listen to Google, they’re drunk. WepP isn’t even supported by what 17% of the global audience use to navigate. (10%+ is everyone on a Mac with Safari or on an iPhone with the stock browser.)

image

If WebP seems to be on the corner, Jpeg200 doesn’t seem to be there yet.

image

2 Likes

According to the same site actually is 80.87% of the global audience that can use Webp images, practically only safari won’t implement webp due to the fact that they want to force all the other browser to use jpeg2000 that is not a “free standard”. It’s a big cross browser mess that could be avoided with the usage of picture tags (picture tags allows different source like videos, allowing each browser to show the image they can read) instead of img tags, and with javascript webp feature detection for background images

2 Likes

Yes, this is around the corner Apple just announced Safari will be implementing WebP, so this completes the popular browser support. We should all be able to use WebP as modern format now on Webflow.

1 Like

yeah safari just announced webp and all the major browsers (chrome, firefox and all the chromium based) are already in beta with avif image and video support. So the story loops again, google pagespeed will soon scream for no avif usage :upside_down_face:

1 Like

How can i generate good webp files from photoshop or figma? Anybody that can help me out?

@icexuick- Google mentions a plugin for PS @ https://developers.google.com/speed/webp/docs/webpshop

2 Likes

You can use a service like https://sirv.com/, https://piio.co/, or https://www.imgix.com/. They will serve webp if the browser supports it. The tricky thing is that you have to drop everything in an embed block in webflow which is annoying.

2 Likes

Yeah, it should be as hassle free (as possible) to fit into my workflow and webflow.
Would be nice if Figma also had a good webp exporter.

1 Like

Thanks for this - i will try this soon!

Hey Webflow, any update on when you’ll add support for WebP? Latest status is 92+% global usage

6 Likes

I would hope that there’s some support coming this year for one of the new formats (WebP makes the most sense currently) but ideally I’d like to see an implementation like Shopify uses where images are served in the next-gen format—without needing to upload different files—and will fall back to standard JPEG when necessary:

That said, AVIF is the format I’m most excited for as it’s supposed to supersede WebP with even smaller file sizes. Sadly this is a bit behind WebP, but from what I understand there is a way to use it in your HMTL using a <picture> element before the standard <img> element and fall back if needed:

https://caniuse.com/avif

2 Likes

Is webflow working on CDN solution to serve webp images?

Perhaps a default setting OR element setting for CDN setting?:

For example, I simply want to serve:

  • if browser is chrome, serve image.webp
  • if browser is sifari, serve image.png

etc.

1 Like

Webflow doesn’t go into too much detail with their roadmap other than mentions here and there, but I’d hope that there is some work going into that area for sure. Given Webflow is already processing and generating responsive variations for img elements, the groundwork for this seems to be there but I haven’t heard any word on this sort of feature coming anytime soon. That said, unless this is tied to a slew of other updates I’d consider this to be a fairly small update that probably would appear without too much foreshadowing or fanfare.

That would actually be great to ask at the upcoming Community Update to get some insight from the team themselves—you should still be able to submit questions for Webflow after you register for the event.

One more voice to support WebP implementation. My reasoning is that Google is introducing an algorithm change in May 2021 where the focus will be even moreso on mobile site performance. Having WebP images is going to be crucial for me to achieve that performance. Given that Webflow now has the excellent srcset images feature, I’m hoping they can extend this and provide WebP images automatically rather than making customers use third-party embeds or post-export processing to achieve this.

Webflow is so good at providing everything else I need, it would be a real shame if this feature continues to be absent from the product.

By the way, I don’t really need WebP support in the Webflow Designer itself, just on code export. If you can generate the WebP images, add these to the existing PNGs and JPEGs, and add fallback capability to the exported HTML, that will be perfect for me.

webp has been supported by Safari for 6 months now.

Only 6.6% of users globally don’t have webp support.

Think it’s time yet? :thinking:

Here’s just the US, filtered:

See Can I use... Support tables for HTML5, CSS3, etc

2 Likes

Looks like IE is the only punk in the group not supporting WebP. I have a strong feeling that Webflow will announce this support Nov. 17 at the “No Code” conference. :pray:t3: If not: :persevere:.

@webdev ~ Hey Jeff. You had mentioned hosting your webp files on a seperate CDN. I see here it mentions that you would use an embed to implement those external files.

Would you be able to provide an example of implementing a webp file? What code I would use in the embed file? I’m hosting my webp files on AWS.

Thanks in advance.

@mikeyevin ~ I’m interested to see how quickly avif takes off.

I use Cloudinary mostly. They have a JavaScript Api that I use most of the time. They have a good documentation site you can check out.

1 Like