webmproject/WebPShop

Unclear how to preserve transparency in webp 'save as' settings

msdrxn opened this issue · 3 comments

Pretty much what the title says. I choose a PSD file with transparency, and go to save as > webp (in PS with webpShop plugin) and everything looks good until I open the webp file afterwards in Chrome and see a white, opaque background. Is there a setting that applies transparency? Or, is there a special way to build transparency with PSD file before saving as webp? Thanks in advance!

jzern commented

Do you have an example image or can you check that there's no alpha with webpinfo, ImageMagick's identify or how it renders in photoshop? Chrome will blend the alpha with a white background if you just open the file with file:/// for example.

You know what, I did open the file in chrome by right-clicking on the image from my desktop so it is probably blending alpha with white as you said... Ironically, I cannot upload an example image because GitHub doesn't support the file type (lol). But I can confirm that it loads with transparency in Photoshop...I'm slowly learning about webP (with limited programming knowledge - HTML/CSS + JS (novice), jquery and SASS) and will figure out how to use webpinfo as well. Thanks for your help!

jzern commented

Thanks for checking with PhotoShop. If you were to load the image in an html page you could better see the transparency by setting the page background color. Chrome and other browsers ignore the background specified in the webp file and blend to the canvas.

For reference, the webp tools are documented here:
https://developers.google.com/speed/webp/docs/using