Hello everyone,
I use a 140 x 60 pixel logo in the navigation bar using the img HTML tag.
It looks good so far, but when you zoom into the page, the logo quickly looks pixelated compared to photos.
I guess it has to do with the ‘density’ or something?
Does using the picture HTML tag help here?
Thank you!
The brand logo is not meant to be “zoomed in on.” If you’re using bitmap images (png, jpg or webp) the typical resolution is 72 dpi.
If you are expecting your website to be viewed on retina displays, you can double the resolution to 150 dpi, and shrink the image by 50% on the website. This would allow you to zoom in 200% on a normal display and it be unpixelated.
Alternately, you can make your logo an svg (vector) image, and then it will be resolution-independent, and look sharp and clear no matter how much you zoom in. I try to use svg images whenever possible.
The brand logo I’ve used on this website is an svg image. You can zoom the browser to 500% and you will see there will be absolutely no pixelation.
Yes, I know nobody will zoom into the logo, but theoretically many of us make the page larger overall, where all elements are enlarged without any great loss and only the logo becomes increasingly blurred.
SVG: Also a good idea! 
Unfortunately, the customer’s logo is very complex/rich in detail and, despite extreme optimisation, is now 15 KB in size (previously 4.5 KB as a PNG). I will keep the SVG anyway, thanks again!
The difference in loading time between a 15 kb image and a 4.5 kb image is so small that for all intents and purposes, it’s meaningless.
Assuming your website visitor is on an average 4G connection (about 10 mbps). A 4.5 kb image will download in .0036 seconds. A 15 kb image will download in .012 seconds. The shortest time interval human beings are able to perceive is about .013 seconds.
For all practical purposes, to the website visitor, both logos would appear instantaneously. You have nothing to worry about.