Why does the logo become fuzzy on mobile devices?

Question

Images

Good afternoon. Interested in this question. I'm laying out the site on the bootstrap grid, added a logo, made an adaptive header, I look through a smartphone, and the logo is blurry. Saved via ps for Web in png 24. Everything is perfect on desktops, but when viewed from mobile it spoils the impression. Are there any ways to avoid this?

Answer 1

Interpolation cannot be avoided when you have one image that needs to be moved back and forth. And this process is not easy and not obvious. For the sake of the logo, you can sweat: draw it for 4-5 resolutions and, using media queries, put different versions in different resolutions.

Answer 2

Your mobile device may have a retina display. For such screens, you need to substitute images x2 - x4 of the real size.