Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Squoosh.app: WebP images introducing bright/dark diagonal blotches

more options

Hello.

When I try to convert an image to WebP via Squoosh.app using Firefox vs. Chrome then Firefix shows large blotches of bright/dark streaks going diagonally from upper left to lower right. Other output image formats don't seem to be affected.

This not only happens in the display of the Squoosh.app website, but also with destination images saved to disk.

Hello. When I try to convert an image to WebP via Squoosh.app using Firefox vs. Chrome then Firefix shows large blotches of bright/dark streaks going diagonally from upper left to lower right. Other output image formats don't seem to be affected. This not only happens in the display of the Squoosh.app website, but also with destination images saved to disk.
Pridėtos ekrano nuotraukos

All Replies (3)

more options

Do you have the same settings for the website on Firefox and Chrome? Try setting the Firefox ones to match those of Chrome's.

more options

I made up a JPEG in Paint (attached) and the squooshed version has some issues on the lower right side that seem similar to what you're describing.

(I couldn't upload the .webp file here for comparison but I screenshotted it and uploaded it as a PNG.)

I'm not sure how Squoosh does its conversion. ??

more options

Firefox 96 now has a native WebP exporter built into the HTML canvas. To compare, you can open an image stand-alone in a tab, open the Web Console (Ctrl+Shift+k), then paste the following script and either click Run if it's the two-column console, or press Enter if it's the one-column console. Firefox will show the popup permission bar where you can launch the converted image in a new tab.

// Get a reference to the image in stand-alone viewer
var w = document.getElementsByTagName('img')[0];
// Create canvas
var canv = document.createElement('canvas');
canv.width = w.naturalWidth;
canv.height = w.naturalHeight;
var ctx = canv.getContext('2d');
// Add the image
ctx.drawImage(w, 0, 0);
// Generate the webp as a Data URI
var url = canv.toDataURL('image/webp');
console.log(url);
// Open it in a new tab
window.open(url, '_blank');


No quality parameters, so it's not the same as what Squoosh is doing (but I really have no idea what it's doing...).