My image are blurry

Have all .png images in my app but they look quite blurry on the web

https://agro-100.ca/app_eng/

specially in pages called agro-liquid. How to correct that?

Have you tried to uncheck "Automatically optimize when exporting"? I never understood this "feature" since it massively degrades image quality...

From what I can tell, this issue only affects Safari. It looks triggered by the combination of using "zoom contents" scaling and having an element with a scrollbar. I've filed a WebKit bug here:

https://bugs.webkit.org/show_bug.cgi?id=287719

Unfortunately, I'm not sure if there are any good workarounds if you need text box scrolling, short of not using "zoom contents" and instead setting flexible layout settings on every child element.

(The likely workaround is to uncheck "Use WebKit graphics acceleration" does nothing in this case.)

Please see our documentation on image optimization. It does a lot to try to improve page load times and only deliver properly sized assets. Typically using flexible layout disables resizing of assets since Hype's algorithm wouldn't know what the end size would be.

In this case, it is not related to the problem I saw.

I was thinking the same thing. I don't like this “Feature” either, which is probably why “Don't resize new resources” is the first one on the list…

That's not been my experience…

It converted a PNG image into a LARGER JPEG image. :scream_cat:

I use ImageOptim to manage image sizes. I turned off the automatic optimization in Hype because it was getting in the way.

Did what Kwetes Kalle said and my problem is gone. All my images are sharp now. I was seeing it in Google chrome not safari. Thanks Kwetes Kalle

1 Like