Squoosh.app: WebP images introducing bright/dark diagonal blotches
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.
All Replies (3)
Do you have the same settings for the website on Firefox and Chrome? Try setting the Firefox ones to match those of Chrome's.
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. ??
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'); // 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...).