poor image quality on firefox | Astro Lounge | Page 1

deft estuary Jul 11, 2024, 12:19 PM

#

I am facing a weird issue with SVGs. They are super low quality in Firefox, but in other browsers like Edge, Chrome, or Brave, they are just fine. I am not sure why Firefox is reducing the image quality. What should I do here?

sly thicket Jul 11, 2024, 1:22 PM

#

Are the files actual svg files? You can open them and see the svg element etc?

deft estuary Jul 11, 2024, 1:23 PM

#

sly thicket Are the files actual svg files? You can open them and see the svg element etc?

ofc they are

#

yeh yeh

sly thicket Jul 11, 2024, 1:26 PM

#

Are you loading them with the Image component?

deft estuary Jul 11, 2024, 1:27 PM

#

sly thicket Are you loading them with the `Image` component?

no

#

it's inside tsx file not astro

sly thicket Jul 11, 2024, 1:29 PM

#

Are you using any kind of component or image optimization? or just a standard img tag?

deft estuary Jul 11, 2024, 1:30 PM

#

sly thicket Are you using any kind of component or image optimization? or just a standard `i...

just img

#

I can share the link if you want to inspect it, but not here. I can DM it only

sly thicket Jul 11, 2024, 1:33 PM

#

If you can share some code or a minimal reproduction here that would be helpful for finding a resolution

It's generally discouraged to provide support via DMs because less eyes get working on the problem and it's no longer catalogued here for future users with similar issues

deft estuary Jul 11, 2024, 1:35 PM

#

actually, it's a project website and has not been released yet. I can't share it without the consent of the company. Let me try to provide something that can help

sly thicket Jul 11, 2024, 1:35 PM

#

Minimal reproduction would probably be your best bet then

deft estuary Jul 11, 2024, 2:30 PM

#

sly thicket Minimal reproduction would probably be your best bet then

I just reproduced the same thing I am using in my main project. Here it is: https://testastroimage.vercel.app

sly thicket Jul 11, 2024, 2:31 PM

#

Great 😄

The code would be helpful though 🙂

deft estuary Jul 11, 2024, 2:33 PM

#

here it is:

index.astro

import Test from "../components/test.tsx"

---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <Test />
    </body>
</html>

#

/components/test.tsx

import sectigo from "../_images/sectigo.svg";
import geotrust from "../_images/geotrust.svg";
import thawte from "../_images/thawte.svg";
import rapidssl from "../_images/rapidssl.svg";
import gogetssl from "../_images/gogetssl.svg";

export default function Test() {
  return (
    <div className="flex w-full flex-col items-center bg-card">
      <div className="flex max-w-screen-lg flex-col justify-center gap-2 py-5 lg:flex-row">
        <img
          src={gogetssl.src}
          alt="rapidssl"
          width={150}
          className="w-full max-w-screen-sm lg:w-[150px]"
        />
        <img
          src={digicert.src}
          alt="digicert"
          width={150}
          className="w-full max-w-screen-sm lg:w-[150px]"
        />
        <img
          src={sectigo.src}
          alt="sectigo"
          width={150}
          className="w-full max-w-screen-sm lg:w-[150px]"
        />
        <img
          src={geotrust.src}
          alt="geotrust"
          width={150}
          className="w-full max-w-screen-sm lg:w-[150px]"
        />
        <img
          src={thawte.src}
          alt="thawte"
          width={150}
          className="w-full max-w-screen-sm lg:w-[150px]"
        />
        <img
          src={rapidssl.src}
          alt="rapidssl"
          width={150}
          className="w-full max-w-screen-sm lg:w-[150px]"
        />
      </div>
    </div>
  );
}

sly thicket Jul 11, 2024, 2:37 PM

#

Where are you storing you're images?

It seems like they are in the src directory which is causing them to be bundled and processed by astro.

Might be able to alleviate those issues by storing them in public since you are using the default img element anyway

Then reference them like src="/gogetssl.svg" without directly importing them into the file

thorn root Jul 11, 2024, 2:45 PM

#

Also try

import gogetssl from "../_images/gogetssl.svg?url";

deft estuary Jul 11, 2024, 2:48 PM

#

sly thicket Where are you storing you're images? It seems like they are in the `src` direct...

yeh they are under

src/_images

sly thicket Jul 11, 2024, 2:49 PM

#

try putting them in public or public/images and then reference them like i described above in the src (with the correct path of course)

deft estuary Jul 11, 2024, 3:59 PM

#

sly thicket try putting them in `public` or `public/images` and then reference them like i d...

I tried the public folder method and also changed the code you provided, but it doesn't seem to be working

#

btw, i am only facing this issue with the firefox browser

#

its alright in edge, chrome and brave

sly thicket Jul 11, 2024, 4:04 PM

#

Yeah I saw it in chrome and it was fine

I did a small amount of research and you are apparently not the first to run into issues like that in firefox, it may be something to do with the size of the SVGs

I didn't follow that path to deeply but might be worth looking into

#

cc <@&1129102257422610512>

I think I've reached the extent of my knowledge on this, looking for some backup ❤️

cinder terrace Jul 11, 2024, 4:10 PM

#

theres one more fix

#

https://discord.com/channels/830184174198718474/1179028184730194032

#

and from a more recent one

#

request an image size larger than what you need, resize it via style after

#

the cost is SLIGHTLY larger images but 10x the quality

rigid bronze Jul 11, 2024, 4:16 PM

#

I recommend using astro-icon instead of <img>. It will optimize and inline your SVGs. It also avoids duplicate bloat.
https://www.astroicon.dev/
not sure it'll address your issue, but you will get better performance.

Astro Icon

Astro Icon simplifies working with icons in Astro

sly thicket Jul 11, 2024, 4:17 PM

#

I agree with the recommendation! Didn't mention it myself because I was also unsure if it would resolve anything, but hey performance gains are performance gains

cinder terrace Jul 11, 2024, 4:34 PM

#

so to be clear the link I put is for when using astro:image

#

i recommend using that

lunar gulch Jul 11, 2024, 4:36 PM

#

Astro image component doesn’t actually do anything to SVGs I’m guessing this issue isn’t actually related to Astro since they’re just image tags with an svg src but it is possible that it’s something weird Astro / the react renderer is doing

#

Using actual SVGs will definitely get the best quality

#

But this is a bizarre issue it could be interesting to drill into

I could to test we should try it without react involved

#

it could also be worth searching if anyone else has had issues with svgs in img tags on Firefox

rigid bronze Jul 11, 2024, 4:38 PM

#

The OP is using <img> not the <Image /> component, that was Lloyd's suggestion

lunar gulch Jul 11, 2024, 4:39 PM

#

Yeah the <Image /> component will just make <img> tags it doesn’t actually optimize the svgs

rigid bronze Jul 11, 2024, 4:41 PM

#

Exactly. That's why I use astro-icon instead.

cinder terrace Jul 11, 2024, 5:07 PM

#

these arent icons though, they are logos

sly thicket Jul 11, 2024, 5:12 PM

#

It's just a package name, there's nothing about it preventing it from being used with other svgs to my knowledge

#poor image quality on firefox