Images and markdown

[frank surge]

The docs mention that i can move my images to the assets folder "or move them near your Markdown, MDX, or Markdoc files". Does this mean i can put the image also in the same folder as the markdown files in the content directory? Will the engine optimize those images too?

[vague trench]

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

---

Yes, you can store your images near your Markdown, MDX, or Markdoc files, and Astro will optimize those images as well. When you store images in the src/assets/ directory, they can be used by components (.astro, .mdx, and other UI frameworks) and in Markdown files source (https://docs.astro.build/en/guides/assets#move-your-images-to-srcassets).

Astro's built-in optimized asset support, which is an experimental feature, enables the optimization of images in Markdown, MDX, and Markdoc files source (https://docs.astro.build/en/guides/assets#assets).

However, if you're using the @astrojs/image integration, you can use the <Image /> component with images stored in the public/ directory, and it will treat them as remote images, optimizing them as well source (https://docs.astro.build/en/guides/integrations-guide/image#images-in-public).

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

@frank surge kapa.ai is still learning and improving, please let us how it did by reacting below

[frank surge]

How do i add images inside a markdown file, while using the experimental assets feature? @vague trench

[vague trench]

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

---

To add images inside a Markdown file while using the experimental assets feature, you can use the standard Markdown !**** () syntax or standard HTML <img> tags. The images will be automatically optimized and hashed by Astro's build process. You can move your images from the public/ directory to the new, reserved src/assets/ directory or move them near your Markdown files source (https://docs.astro.build/en/guides/assets#update-your-markdown-mdx-and-markdoc-files).

Here's an example of how to add images in a Markdown file:

# My Markdown Page

<!-- Local image stored at src/assets/stars.png -->
!**A starry night sky.** (../../assets/stars.png)
<img src="/_astro/stars.hash.png" alt="A starry night sky.">

<!-- Image stored at public/images/stars.png -->
!**A starry night sky.** (/images/stars.png)
<img src="/images/stars.png" alt="A starry night sky.">

<!-- Remote image on another server -->
!**Astro logo** (https://docs.astro.build/assets/logomark-light.png)
<img src="https://docs.astro.build/assets/logomark-light.png" width="25" alt="Astro logo">

Remember that the assets feature is experimental and its API is subject to change before it is marked as stable source (https://docs.astro.build/en/guides/assets#assets).

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

@frank surge kapa.ai is still learning and improving, please let us how it did by reacting below

[frank surge]

@vague trench if i have my image in this path ../../assets/images/starry.jpg how would i do the path on the <img> tag?

[vague trench]

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

---

To use an image with the path ../../assets/images/starry.jpg in a Markdown file, you can use the standard HTML <img> tag. When using the experimental assets feature, the image will be automatically optimized and hashed by Astro's build process. Here's an example of how to add the image in a Markdown file:

<!-- Local image stored at ../../assets/images/starry.jpg -->
<img src="/_astro/starry.hash.jpg" alt="A starry night sky.">

Please note that the actual hash in the src attribute will be replaced by the generated hash value during the build process. The assets feature is experimental, and its API is subject to change before it is marked as stable source (https://docs.astro.build/en/guides/assets#assets).

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

@frank surge kapa.ai is still learning and improving, please let us how it did by reacting below

[frank surge]

where do i find the folder _astro? @vague trench

[vague trench]

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

---

The _astro folder is generated during the build process and can be found in the dist/ directory of your Astro project after running astro build. Astro v2.0 moves and unifies the location of all build output assets to the _astro/ folder source (https://docs.astro.build/en/guides/upgrade-to/v2#changed-_astro-folder-for-build-assets).

Please note that the _astro folder is not present in your project's source code; it is created during the build process.

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

@frank surge kapa.ai is still learning and improving, please let us how it did by reacting below

[frank surge]

@vague trench does the assets (experimental) functionality has any file where i can tweak the options globally?

[vague trench]

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

---

Yes, you can configure the image service and its options globally in the astro.config.mjs file. To do this, you need to set the image.service and image.service.config options in the configuration file source (https://docs.astro.build/en/reference/configuration-reference#imageservice-experimental).

Here's an example of how to configure the image service and its options in astro.config.mjs:

import { defineConfig } from "astro/config";

export default defineConfig({
  experimental: {
    assets: true,
  },
  image: {
    service: {
      entrypoint: "your-entrypoint", // 'astro/assets/services/squoosh' | 'astro/assets/services/sharp' | string,
      config: {
        // ... service-specific config. Optional.
      },
    },
  },
});

In this example, replace your-entrypoint with the desired image service entrypoint, such as 'astro/assets/services/squoosh' or 'astro/assets/services/sharp'. You can also provide service-specific configuration options in the config object source (https://docs.astro.build/en/reference/image-service-reference#user-configuration).

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

@frank surge kapa.ai is still learning and improving, please let us how it did by reacting below