Image Widget will not validate a WebP image when loaded from Storage

  • 1
  • Problem
  • Updated 1 year ago
  • Acknowledged
  • (Edited)
I've been converting all of my sign's images to webp for performance reasons. Up until a few minutes ago I'd only converted HTML widgets.

I just tried to swap out a PNG for a WebP that was in an Image Widget and it will not let me save. It says that I must choose a valid image format.

However as it's Chromium based, the Rise Player fully supports the webp format. I can use the Custom URL option and use the "Remove validation" checkbox to bypass this and it works fine, but that's just a workaround.

See attached image for error message:



Associated GitHub issue: https://github.com/Rise-Vision/widget-image/issues/75
Photo of Chris - Fantastitech

Posted 2 years ago

  • 1
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Hi Chris,

I haven't heard .webp brought up before. Right now Rise Vision supports .jpg, .png, .gif, .bmp, and .svg. 

I'll forward this on to the team responsible for the image widget, they may have some further insight. 
WebP and WebM are sister open source Picture and Movie (respectively) formats maintained by Google. Chromium and Chrome both support them, so the Rise Player will display them just like any other JPG or PNG file.

The space savings can be enormous with image heavy web pages. See the file size comparison from my conversions:

  14K  Jun  6 14:11 70-years-shield.png
  7.2K Jun  6 14:12 70-years-shield.webp
89K Jun  6 14:10 banner.png
55K Jun  6 14:12 banner.webp
13K Jun  6 14:00 talk.png
5.4K Jun  6 14:06 talk.webp
It doesn't look like much in kilobytes, but between portraits, icons, graphics, and backgrounds it can be a big savings especially on something like a Compute Stick with very limited RAM.
(Edited)
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Chris,

Thanks for bringing this up and logging the issue. We spoke with the team responsible this morning and they will slate work to add webp as a supported image format.

Thanks!
I'm having this very same issue with .svg. Any advice?
Unfortunately the best bet is probably going to be just using an HTML placeholder. As good as the RiseVision player and backend is, their widget support and development is awful to the point I'm looking for a new signage platform. The RSS widget is a train wreck and there's zero reason to have an artificial validation on images. Either the browser renders it or doesn't. They should not be doing validation of common image formats the way they do.
Thanks for the response. I'm actually linking in the website directly as a URL item through the Schedules so there's no placeholders in the website that I'm using. Using the presentation with the placeholders was my first stop and I had the validation problems. At first I thought maybe there was some setting on the svg that made it incompatible so I exported it out a couple different ways. Still no dice. Then I found an article that said I could import the site directly through the schedule and tried that. Still no svgs even though RiseVision says they're supported. The svgs do show up perfectly in any browser including Chrome when I don't use RiseVision at all. Unfortunately, I need to incorporate it with a greater whole of a project so looks like I'm stuck with re-adjusting the image itself to a different format. Very disappointing. 
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Yes. I successfully used SVGs in Rise Vision as a part of webpage. I am not sure if RV Image Widget supports SVG format, but It is also remotely possible that your SVG file is somewhat incompatible with a browser due to the applied settings wen saving it. I've had few issues with that before.

I used SVG file for interactive directory where the file was gonna be opened on different devices and zooming-in was a must. But if you make something for static, non-interactive display, then simply resize you SVG file to 100% of what it needs to be and save it as JPGE (PNG if transparency is a factor) at 72dpi. In Photoshop Export>Save for Web>apply desired settings and save.
As stated above, I'm linking in the website directly as a URL item through the Schedules so there's no placeholders in the website that I'm using. Using the presentation with the placeholders was my first stop and I had the validation problems. As you pointed out, I did try changing  some settings on the svg thinking there might be an incompatibility but it still didn't work. Afterwards, I found an article that said I could import the site directly through the schedule (bypassing the presentation & placeholders) and tried that. Still no svgs even though RiseVision says they're supported. The svgs do show up perfectly in any browser including Chrome when I don't use RiseVision at all. Unfortunately, I need to incorporate it with a greater whole of a project so looks like I'm stuck with re-adjusting the image itself to a different format. Thanks for the response and I appreciate your insights.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
OK, now it is my professional curiosity... if it is not any of a secret, could you email me one of those SVGs you cannot get to show to prodo.us@gmail.com. I want to take a look at 'em