Why are images zoomed in browsers, and how to circumvent this issue?

Why aren't these images crispy on site (online)? Why are they zoomed in?

Online:

These also should look crispy, but they are zoomed in:

Here's the comparison:

On the right side of this screenshot, we can somehow see what they should look like:

Download them or open them in a new browser window, and you'll see:

My screen resolution data:

If it matters, the browser I'm using is Edge, but the same happens in all bowsers I have (including Chrome, Firefox, Opera etc.)

Would I need to convert the pngs into svgs?

Here's my snippet:

#szabvanyossag img {
  border: none;
  width: 80px;
  height: 15px;
  vertical-align: middle;
}

<span id="szabvanyossag">
<a href="https://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img src="https://i.sstatic.net/JpLU85h2.png" alt="érvényes CSS3!"></a>&nbsp;<a href="https://validator.w3.org/check?uri=referer" target="_blank"><img src="https://i.sstatic.net/JfXymTp2.png" alt="érvényes HTML5!"></a>
</span>

Solution

If you mean blurred when zoomed, CSS image-rendering

From MDN:

auto

The scaling algorithm is UA dependent. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).

...

crisp-edges

The image is scaled with an algorithm such as "nearest neighbor" that preserves contrast and edges in the image. Generally intended for images such as pixel art or line drawings, no blurring or color smoothing occurs.

...

The default is auto.

In general, it's up to the web author to specify better CSS.

Using the PNGs from the question:

img {
  width: 25%;
}

.crisp img {
  image-rendering: crisp-edges;
}

span {
  display: inline-block;
  width: 10%;
}

<!DOCTYPE html><html lang="en">
<head>
  <title>79294198</title>
</head><body>
  <div>
    <span>Auto:</span>
    <img src="https://i.sstatic.net/JpLU85h2.png">
    <img src="https://i.sstatic.net/JfXymTp2.png">
  </div><div class="crisp">
    <span>Crisp:</span>
    <img src="https://i.sstatic.net/JpLU85h2.png">
    <img src="https://i.sstatic.net/JfXymTp2.png">
  </div>
</body></html>

In Firefox, it's possible to define a different browser default using userContent.css, which is userChrome's lesser-known brother. I don't believe that Chromium browsers have a similar capability.