Streaming live at 10am (PST)

How to use HiDPI image with symbols without fuzzyness?

I have this issue with one fuzzy PNG:

Link: https://www.danielvianna.com/

Original Image:

It doesn’t happen with any SVG and only on symbols.
When I had a responsive image for Retina without any symbol, let’s say 1128x708, I would save as 2256pxx1416px then mark as HiDPI image, and Webflow would take care of responsive.

It seems that it doesn’t work the same way when using symbols I had to force some media queries to adjust the layout but I got screwed with image quality.

I went to chrome, kept removing all CSS classes,
THEN I noticed that by replacing in the code directly the actual source (instead of the sizes served automatically by Webflow) fixes the problem.


So Webflow is actually serving a fuzzy image source, probably due to my lack of knowledge in symbols

How do I do this properly? All I need is super sharp retina images that are 2x the size that is rendered for this case

Web preview:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)