WebP Image files not displaying correctly

Hello - I recently discovered the brilliant file savings from using .WebP files. Throughly recommended that if you haven’t already investigated this, that you do so soon. However after I uploaded all these WebP files I noticed that my gallery page that I was publishing to, didn’t display them correctly. In some case not at all with the message ‘Error : Image Could Not Be Generated’ . Has anyone else experienced this ? l’m using Foundry with the Shutter stack ( see attached screenshot). Thanks in advance for your thoughts on this. Justin

Shutter does not support WebP. The code that runs on the backend to size thumbnails and compress them does not work with WebP. Shutter supports JPG images.

Hi @elixirgraphics - what a shame. The file size saving that comes with this file format is absolutely awesome. Can you tell me what, if any stack from Elixir Graphics, does support WebP - or is this unique to Shutter ? Thanks in advance . Justin

RapidWeaver, Stacks and macOS don’t natively support WebP. You can get stories this by using Remote Image features of Foundry where they’re available by manually hosting your own image on your server.

Hi @elixirgraphics - in using the remote features that you mentioned will I loose a lot of the functionality that come bundled with a lot of your stacks ? Resulting in me having little or no opportunity with which refine the way in which I can design and display the images that use the likes of Shutter and other similar gallery stacks ? I’m willing to ‘have a go’ please save me before I go too deep into this topic. Justin :wink:

I’m not sure I understand.

Remote Images simply link to the file that is on your server instead of the file that is in RapidWeaver / Stacks.

As always, it never hurts to simply give something a try. Give it a test by putting one file on your server and try the Remote Image feature out along with whatever setting you’re worried about. :+1:

1 Like

Just keep in mind that many older browsers do not support webp and you will always need a fallback option.

3 Likes

Can you give an example how a remote link looks like? And more info how to link.

A remote image is one that you have already stored on your hosting server. Or, that you got from another location that is also on a server. This all means that it is an image that has a formal web address. E.g. https://mywebsite.com/picture-of-ocean-waves.jpg (Note: this is a made up link, not a real one.)

When you use the remote image option within Foundry you are given a little box where you can input that image address. For example you could try this image from Wikipedia:

https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Color_icon_purple_v2.svg/440px-Color_icon_purple_v2.svg.png

Adding a remote image to your site is easy, but for most folks the key step is learning how to upload the images to a specific folder on their hosting area. Typically you’d need to use an app like Transmit, Cyberduck, etc. to do this. With many hosting companies you could also use their provided cPanel to do the same … although this approach is a bit more clunky and slower … but it definitely works.

I have Transmit. So just upload a folder with webp photos and then link to them. I normally use jpg in RW. Can people steal webp photos by right clicking or dragging them?

Sure. Remember, even if someone couldn’t right-click they can always take a screenshot. There are multiple easy ways to get a photo: jpg, png, webp.