#Sharp

15 messages · Page 1 of 1 (latest)

pastel cedar
#

Is sharp automatically installed or do I not to install it.
When I ran npm run build, only jpg images were in my dist/astro folder

safe quarryBOT
#

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

#

Sharp is not always installed automatically.

From the docs:

  • Sharp is the default image service used for astro:assets.
  • With a strict package manager like pnpm, you must install sharp manually to use image processing. [Missing Sharp; Upgrade to v3]

Example install (if needed):

pnpm add sharp
# or
npm install sharp

If you don’t want to use Sharp at all, you can switch to a passthrough image service that does no processing:

import { defineConfig, passthroughImageService } from "astro/config";

export default defineConfig({
  image: {
    service: passthroughImageService(),
  },
});

[Missing Sharp]

Regarding only JPGs in dist/astro: the provided docs don’t explain your exact output layout, so I can’t say for sure why only JPGs appear there. They only state that Sharp is the default processor and must be installed for image processing; they don’t detail which formats end up in which folders.

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

#

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

pastel cedar
#

@safe quarry Is there a way to find out if im missing sharp?

safe quarryBOT
#

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

#

Yes. Astro has a specific error for this:

If Sharp is missing when Astro tries to use astro:assets, you’ll get an error like:

MissingSharp: Could not find Sharp. Please install Sharp (sharp) manually into your project or migrate to another image service. [Missing Sharp]

So:

  • Run a command that uses astro:assets (e.g. astro build with <Image /> or imported images).
  • If Sharp is not installed, the build should fail with the MissingSharp error above.

The docs do not describe any other built‑in way to “check” for Sharp beyond this error message.

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

#

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

pastel cedar
#

@safe quarry My build didnt fail, so I must have sharp installed.
Why did I only get jpg images inside my dist/astro folder then?

  src: desktopURL,
  priority: priority,
  format: "avif",
});
const desktopWebp = await getImage({
  src: desktopURL,
  priority: priority,
  format: "webp",
});
const desktopJpg = await getImage({
  src: desktopURL,
  priority: priority,
  format: "jpg",
});```

```<picture class:list={[className]} {...rest}>
  <!-- Desktop -->
  <source media="(min-width: 62.5rem)" srcset={desktopAvif.src} type="image/avif" />
  <source media="(min-width: 62.5rem)" srcset={desktopWebp.src} type="image/webp" />
  <source media="(min-width: 62.5rem)" srcset={desktopJpg.src} type="image/jpg" />```

Example of a part of my CustomPicture code (I didnt include the whole thing)
safe quarryBOT
#

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

#

The knowledge sources you provided only document Astro’s built‑in <Picture /> component and its props (formats, fallbackFormat, pictureAttributes) and show that it will generate multiple formats (e.g. AVIF, WebP, plus a PNG/JPG fallback) when you use it. [Picture guide]

They do not describe:

  • How getImage() writes files to dist/,
  • How many physical files are emitted per getImage() call, or
  • Why only certain formats (like JPG) might appear in dist/astro.

Because of that, I can’t reliably explain why you only see JPG files in dist/astro from the docs you’ve given.

What the docs do confirm:

  • Using <Picture /> with formats={['avif', 'webp']} produces <source> tags for those formats and an <img> fallback (PNG/JPG) that is actually written as a file. [Picture guide]
  • fallbackFormat controls the format of that <img> fallback (defaulting to PNG/JPG/GIF/SVG depending on the source). [Picture guide]

However, there is no explicit information in these sources about:

  • Whether AVIF/WebP variants are always emitted as separate files in dist/astro,
  • Or whether some formats might be inlined, cached elsewhere, or optimized away.

So, based solely on the provided docs, I can’t say why your getImage({ format: 'avif' | 'webp' | 'jpg' }) calls result in only JPG files in dist/astro. The behavior of getImage() and the exact output layout are not covered in the snippets you shared.

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

#

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

pastel cedar
# 
    src: mobileImgUrl,
    format: "webp",
    width: 200,
    height: 200,
});```

This is literally the example used in the docs, so as you can see, you can use the format property on getImage.
Why aren't I getting webp and avif images in my dist/astro folder? @safe quarry 
Am I even supposed to get these images, or only jpg if that was the original file type
safe quarryBOT
#

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

#

The knowledge sources you provided only document that:

  • The <Image /> component (from astro:assets) has a format property, and
  • By default, it outputs .webp files unless you specify another format. [Images format]

They do not include any details about:

  • How getImage() behaves with format,
  • What files getImage() writes into dist/astro, or
  • Whether Astro will emit multiple formats (e.g. AVIF, WebP, JPG) or only one, or whether it preserves the original format.

Because of this, I cannot say from the docs:

  • Why you only see JPG files in dist/astro,
  • Whether WebP/AVIF files should also appear there, or
  • Whether Astro is expected to keep the original JPG format only.

All I can state confidently from the available docs is:

  • You can specify an output image file type via a format property (documented for <Image />), and the default output is .webp when that property is not set. [Images format]

The behavior of getImage() and the exact contents of dist/astro are not described in the knowledge sources, so I’m unable to give a definitive answer about why your WebP/AVIF variants are not appearing.

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