What factors are causing the decline in logo quality specifically on iPhones, as opposed to other devices?

I'm currently working on a Next.js project and have encountered an issue with my logo. When I view the website on my iPhone, the logo appears to lose quality compared to other devices. Has anyone else experienced this problem? How did you go about solving it?

Here's a snippet of 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>

Check out the website here

Keep in mind that I opted to use the HTML <img> tag instead of the Next.js Image component to maintain the image quality. While the Next.js Image component offers properties like quality, it didn't quite meet my expectations for maintaining image quality.

For reference, here are images captured on both a Samsung phone and an iPhone: https://i.sstatic.net/h7lfl.jpg https://i.sstatic.net/QTsTK.jpg

cssnext.jstailwind-css

Answer №1

Your SVG file contains an embedded PNG image. It would be more advisable to include the logo as a standalone PNG file rather than embedding it within the SVG, as this can result in a loss of quality.

Below is the high-resolution image extracted from your SVG:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Double-up with Bootstrap's dual-column tabs

Looking to customize the layout of a nav-tabs ul to display its contents in 2 columns instead of horizontally, as per the default Bootstrap style for nav-tabs. Attempted to use the CSS property column-count: 2 but it didn't yield the desired result. ...

csstwitter-bootstrap

What is the proper way to reference a background image in CSS?

As I work on designing my webpage, I am looking to add a Blur filter to the body background-image. To achieve this, is it possible to reference the background-image property? ...

htmlcssbackground-image

Having trouble getting Netlify Forms to function properly on your Next.js website?

I am having trouble setting up Netlify forms with my Next.js website. I'm a bit lost and would appreciate any guidance you can provide. Below is the code snippet I have been working on: <form className='contacts-form' onSubmit={handleSub ...

formsnext.jsnetlifynetlify-form

What type of control is best suited for creating a custom auto complete box with ajax functionality?

I have been working on implementing auto complete functionality for a text box by making an Ajax call to a database with the textbox content and selected search field as parameters. Although I got it to work using the AjaxToolkit AutoCompleteExtender, it o ...

jqueryasp.nethtmlcssajax

Make sure to always utilize an alias when setting up automatic imports

Is there a method to ensure that autoimport always utilizes the alias for importing modules in a project with VSCode? I want to consistently use the alias, even when it's a sibling component, without any exceptions. Instead of import { Navbar } from ...

visual-studio-codenext.jsimport

Guidelines for implementing a conditional if-else statement in a props-based Next.js component

I have a Card component, and I would like to implement a condition where if the data is equal to 0, it should display the first image, otherwise it should display the second image. Here's more information: {data?.data?.map((dataVote: any, i: numbe ...

reactjsnext.js

Combining SWR with NextJS to effectively work with nested objects and arrays

I'm currently working on extracting API data from a server using SWR & NextJS. The API data consists of an array, which contains objects that in turn contain another array. While I can successfully display the data from the parent array, I'm faci ...

jsonnext.jsnext.js13swr

Redirecting with NextJS in a server-side action

I have a simple login page that uses server-side actions. Once the user logs in and a session is created, I want to redirect them to /app. However, this redirection process doesn't seem to be working as expected. When checking the network requests, I ...

next.jsnextjs14

When a width is specified, the text does not adjust accordingly

I am facing an issue with setting a width on a specific text within my layout. In this Fiddle, I have highlighted the text in red that needs to occupy half of the column width. However, whenever I try to set a specific width, it interferes with the respons ...

htmlcsszurb-foundation

What causes the discrepancy in scaling between em values on mobile and desktop displays?

I'm struggling to comprehend how em units function in CSS. I am attempting to make an element, specifically a div, scale proportionally to the font size. After narrowing down my issue, this is what I've come up with. <!DOCTYPE html> <ht ...

htmlcsswidthfont-size

Steps for Displaying Error Message when Search Result is Not Found in a JavaScript Table

After creating a table using HTML to display student data like name, degree, and profession, I added a search bar for users to find information on a specific student by typing the student's name. If the student is not in the table, a message "Result n ...

javascripthtmlcss

How to Create a Flipping Bootstrap 4 Card with Hover Effect

I am currently in the process of creating a Bootstrap 4 and HTML5 dashboard. My goal is to have each card on display flip to reveal additional information when the 'i' button is hovered over. Although I have managed to get the flipping animation ...

jqueryhtmlcssbootstrap-4

React hooks causing dynamic object to be erroneously converted into NaN values

My database retrieves data from a time series, indicating the milliseconds an object spends in various states within an hour. The format of the data is as follows: { id: mejfa24191@$kr, timestamp: 2023-07-25T12:51:24.000Z, // This field is dynamic ...

javascriptreactjstypescriptnext.jsreact-hooks

Issue encountered with Nextjs when attempting to import a basic addition function from a custom npm library, resulting in a module not

I've been grappling with this dilemma for a few days now. I am reaching out to the NextJS (14) compiler community in hopes that someone with expertise can assist me in figuring out what mistake I might be making. I have created a basic npm package th ...

javascriptnode.jsnext.jscompilation

Position the scrollbar on a webpage using CSS

I am trying to customize the scrollbar on my webpage by changing its position and specifying a set height, such as 400px. Currently, I can achieve this by adding padding/margin and adjusting the body's position. However, this solution disrupts the po ...

htmlcss

List of colors accepted in HTML and CSS

There are some color names that I am familiar with and use, such as 'white', 'blue', 'red'. Is there a comprehensive list of colors that can be used in HTML/CSS? ...

htmlcsscolorshtml-lists

Jquery alters the border of a textbox with a single modification

I attempted to implement a validation using regular jQuery and managed to accomplish half of it successfully. When I try to submit an empty field, the textbox border turns red, but if I fill in the value and click the button again, the border doesn't ...

javascriptjqueryhtmlcssasp.net

CSS - uniform sizing for border images

INQUIRY: I am looking for a way to maintain a consistent border image size when resizing a div. I have considered using pseudo elements, but I'm wondering if there is a simpler solution? HTML: <div id="resizable" class="ui-widget-content"> & ...

cssjquery-uijquery-ui-resizable

Tips for Adding a Search Feature in reactJS with the Help of MaterialUI

I have been working on creating a Pokedex using the pokeapi. The initial implementation is working well, as I am able to fetch and display Pokemon data in a container. Now, my next step is to add a search and filter functionality for the Pokemon. To achiev ...

htmlcssreactjssearchbar

Encountering a 404 error due to dynamic routing issues

I've been working on a Next.js application and struggling with dynamic routing. Despite my background in C# and C++, I recently started exploring React/Next, but I can't seem to figure out this routing issue. I've gone through the documentat ...

next.js