A question about image quality

I have a question about image quality:

I uploaded the same logo image (same size, same file) to two places:

In the Header – the logo looks sharp and clear.

In the Footer – I used an HTML Block inside Elementor, and inserted the image via HTML tag. But in this case, the image looks blurry.

Why does this happen? Is there a recommended way to insert a logo into the Footer (via HTML Block) to keep it sharp?

Thank you so much for your help!