Low resolution of images in Webkit browsers

[FAlexei]

Almost all images are displayed at low resolution on Webkit browsers.

Firefox and Chromium browsers:

Safari and Gnome Web:

But the screenshot of Kinetic looks fine on all browsers.

Safari and Gnome Web:

[kbdharun]

I think I might know what the culprit is; Kinetic images are in PNG. We use WebP in docs and the handbook for lossless compression. So we started using the same here since the website's rewrite to Vue, while it works fine in a majority of Browsers it doesn't work with older versions of Safari in macOS and in some versions of WebKit (It renders fine for me on Flatpak version of GNOME Web🤔). If this issue is present for a sizable demographic, the best solution would be to convert images back to PNG.

[FAlexei]

I found this issue on Safari on iOS 17.1.1, Safari on macOS 12.7.1 and macOS 14.1.1 (newest) and on Snap version of Gnome Web.