Why logo is losing its quality in iPhone but not on other devices?

Question

I am working on a Next.js project that faced this problem. I have a logo that loses its quality when I open the website on my iPhone but not on other devices. Did anyone face this problem? How can I solve it?

My code:

<div className="flex items-center">
   <Link href="/" className="flex items-center">
     <img
        src="/assets/img/navbar_logo.svg"
        alt="logo"
        className="md:w-[115px] md:h-[65px] w-[90px] h-[44px]"
     />
   </Link>
 </div>

The website

Note: I used the HTML <img> tag instead of the Next.js Image component to show the real quality of the image. I know the Next.js Image component has some properties like quality for this, but it was not showing the real quality.

These are images that were taken on a Samsung phone and a iPhone.

I confirm that the img has lost quality on my real iPhoneSE, but not on Windows10 Edge inspect facility emulating iPhone. — A Haworth, Aug 27 '23 at 07:37
Don't have an iPhone to test on, but [here's one possible solution](https://stackoverflow.com/questions/44795431/svg-not-sharp-but-blurry#53794471) or CSS `image-rendering` property is another. — cjl750, Aug 27 '23 at 07:43

score 2 · Accepted Answer · edited Aug 27 '23 at 16:32

2

Your svg file has a png file embedded in it. You would be much better off adding the logo as a png as it appears by embedding the file inside a svg it is losing quality.

This is the image extracted from the svg and it is high resolution: Extracted Image

edited Aug 27 '23 at 16:32

Mayank Kumar Chaudhari

16,027
10
55
122

answered Aug 27 '23 at 14:57

stickyuser

2,552
15
15

Why logo is losing its quality in iPhone but not on other devices?

1 Answers1