#wrong image format

1 messages · Page 1 of 1 (latest)

wary fractal
#

The original image is a png and i expected the image component to produce a webp by default but it's still a png

<Image
src={heroAstride}
alt="Illustration d'une personnage"
class="animate-hero-figure h-auto w-full select-none"
loading="eager"
width={720}
/>

ancient chasmBOT
#

Hi @wary fractal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro’s <Image /> component does produce .webp by default when it is actually optimizing the image. [Image ref]

However, there are cases where the output will stay as the original format (e.g. .png) instead of being optimized:

  • If the image is not a local file in src/ imported as ESM, but instead:
    • from public/ (e.g. src="/images/foo.png")
    • or a remote URL
      then Astro will not optimize it and the result is effectively the same as a normal <img>. [Images in .astro; Image guide]

To get a .webp output:

  1. Make sure heroAstride is imported from inside src/:

    ---
import { Image } from 'astro:assets';
import heroAstride from '../assets/hero-astride.png';
---

<Image
  src={heroAstride}
  alt="Illustration d'une personnage"
  class="animate-hero-figure h-auto w-full select-none"
  loading="eager"
  width={720}
/>

  2. If you want to be explicit, you can set the format:

    <Image
  src={heroAstride}
  alt="Illustration d'une personnage"
  width={720}
  format="webp"
/>

If heroAstride is already imported from src/ as above and you still see .png, the knowledge sources don’t provide more specific troubleshooting steps, so I can’t say why with certainty.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wary fractal Kapa.ai is still learning and improving, please let me know how I did by reacting below.

wary fractal
#

@ancient chasm the image is imported like this, is it a problem?

import heroAstride from "$styles/assets/hero/astride.png"

my tsconfig:

{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/"],
"exclude": ["node_modules", "dist"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"$components/": ["src/components/"],
"$layouts/": ["src/layouts/"],
"$content/": ["content/"],
"$styles/": ["src/styles/"],
"$lib/": ["src/lib/"],
"$icons/": ["src/styles/assets/icons/*"]
}
}
}

ancient chasmBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

That import pattern is fine; using a TypeScript path alias like $styles/* does not prevent Astro from optimizing the image, as long as the resolved file is inside src/. [Aliases; Image src rules]

From the docs:

  • Local images in src/ must be imported (relative path or alias) and then passed directly as src to <Image />. [Images in .astro; Image src rules]
  • By default, <Image /> outputs .webp unless you override format. [format]

So this is valid:

---
import { Image } from 'astro:assets';
import heroAstride from '$styles/assets/hero/astride.png';
---

<Image
  src={heroAstride}
  alt="Illustration d'une personnage"
  class="animate-hero-figure h-auto w-full select-none"
  loading="eager"
  width={720}
/>

If you’re still getting .png:

  • The knowledge sources don’t describe alias-related bugs or other reasons why a local png would stay png when used with <Image />, so I can’t say why with certainty.
  • You can force the format explicitly:
<Image
  src={heroAstride}
  alt="Illustration d'une personnage"
  width={720}
  format="webp"
/>

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: