Skip to content
Open
Show file tree
Hide file tree
Changes from 26 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
6ef21b9
initial infra
sarah11918 Jul 8, 2025
166aabd
media overview draft
sarah11918 Jul 8, 2025
876ee08
mux guide initial sections
sarah11918 Jul 8, 2025
9cad670
draft mux guide page
sarah11918 Jul 9, 2025
fd4337a
fix link
sarah11918 Jul 9, 2025
f0f1dbe
update Mux player for forthcoming Astro component; start environment…
sarah11918 Jul 18, 2025
1fd0e08
draft Node SDK section
sarah11918 Jul 18, 2025
fe7eeba
section on retrieving asset data
sarah11918 Jul 18, 2025
17e24ce
mux uploader draft
sarah11918 Jul 18, 2025
8f06ba4
delete blank lines
sarah11918 Jul 18, 2025
b8a9654
draft notes in recipe page
sarah11918 Jul 21, 2025
e4d25d9
dump social card info
sarah11918 Jul 21, 2025
09a9ccb
update overview page with more image content
sarah11918 Aug 13, 2025
cb8b8c3
replace starlight tabs with packagemanagertabs; streamline mux-video …
sarah11918 Aug 13, 2025
dd92070
mention video and update other assets on import reference page
sarah11918 Aug 15, 2025
862b5a3
update images guide page to link to image and video hosting
sarah11918 Aug 15, 2025
f81b5fe
intro paragraph links to sections below instead of externally
sarah11918 Aug 15, 2025
4dff59a
Mux guide polish (links, paragraph spacing)
sarah11918 Aug 15, 2025
7f634d3
remove recipe file to be done separately
sarah11918 Aug 15, 2025
85a257a
update grid title and Mux capitalization
sarah11918 Aug 26, 2025
a09839d
Fix absolute links and a typo
sarah11918 Aug 26, 2025
320f1d8
remove basic example of what the Mux Uploader component "looks like" …
sarah11918 Aug 26, 2025
2953a20
Apply suggestions from Dave/Mux code review
sarah11918 Sep 2, 2025
86ab144
Apply Yan punctuation suggestions
sarah11918 Sep 3, 2025
4fff075
Mux offering sign up credit
sarah11918 Sep 3, 2025
b920981
Merge branch 'main' into media-hosting-update
sarah11918 Sep 3, 2025
1191e99
more imports page code snippet improvements
sarah11918 Sep 4, 2025
776df50
Matt code syntax updates
sarah11918 Sep 4, 2025
93cfd0d
More code snippet syntax updates
sarah11918 Sep 4, 2025
5fa49e6
update MUX logo svg
sarah11918 Sep 4, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/logos/mux.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion src/content/docs/en/guides/images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@ import ReadMore from '~/components/ReadMore.astro';

Astro provides several ways for you to use images on your site, whether they are stored locally inside your project, linked to from an external URL, or managed in a CMS or CDN.

Astro provides [image](#image-) and [picture](#picture-) components, [Markdown image syntax](#images-in-markdown-files) processing, [SVG components](#svg-components), and [an image generating function](#generating-images-with-getimage) to optimize and/or transform your images. Additionally, you can configure [automatically resizing responsive images](#responsive-image-behavior) by default, or set responsive properties on individual image and picture components.
Astro provides built-in [`<Image />`](#image-) and [`<Picture />`](#picture-) Astro components, [Markdown image syntax](#images-in-markdown-files) (`![]()`) processing, [SVG components](#svg-components), and [an image generating function](#generating-images-with-getimage) to optimize and/or transform your images. Additionally, you can configure [automatically resizing responsive images](#responsive-image-behavior) by default, or set responsive properties on individual image and picture components.

You can always choose to use images and SVG files using native HTML elements in `.astro` or Markdown files, or the standard way for your file type (e.g. `<img />` in MDX and JSX). However, Astro does not perform any processing or optimization of these images.

There is also no native video support in Astro, and we recommend choosing a [hosted video service](/en/guides/media/) to handle the demands of optimizing and streaming video content.

<ReadMore>See the full API reference for the [`<Image />`](/en/reference/modules/astro-assets/#image-) and [`<Picture />`](/en/reference/modules/astro-assets/#picture-) components.</ReadMore>

## Where to store images
Expand Down
12 changes: 9 additions & 3 deletions src/content/docs/en/guides/imports.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -134,17 +134,23 @@ CSS Modules help you enforce component scoping & isolation on the frontend with
### Other Assets

```jsx
// Returns an object with `src` and other properties
import imgReference from './image.png'; // imgReference === '/src/image.png'
import svgReference from './image.svg'; // svgReference === '/src/image.svg'
import txtReference from './words.txt'; // txtReference === '/src/words.txt'

// This example uses JSX, but you can use import references with any framework.
// HTML or UI Framework components use this to render the image
<img src={imgReference.src} alt="image description" />;

// The Astro `<Image />` and `<Picture />` components access `src` by default
<Image src={imgReference} alt="image description">
```

All other assets not explicitly mentioned above can be imported via ESM `import` and will return a URL reference to the final built asset. This can be useful for referencing non-JS assets by URL, like creating an image element with a `src` attribute pointing to that image.
All other assets not explicitly mentioned above can be imported via ESM `import` and will return a URL reference to the final built asset (e.g. `/_astro/my-video.C7vXpQtF.mp4`) instead of an object.

This can be useful for referencing non-JS assets by URL, like creating a video element with a `src` attribute pointing to that image.

It can also be useful to place images in the `public/` folder as explained on the [project-structure page](/en/basics/project-structure/#public).
It can also be useful to place images and other assets in the `public/` folder as explained on the [project-structure page](/en/basics/project-structure/#public).

<ReadMore>Read more about appending Vite import parameters (e.g. `?url`, `?raw`) in [Vite's static asset handling guide](https://vite.dev/guide/assets.html).</ReadMore>

Expand Down
31 changes: 13 additions & 18 deletions src/content/docs/en/guides/media/index.mdx
Original file line number Diff line number Diff line change
@@ -1,41 +1,36 @@
---
title: Use a DAM with Astro
description: How to use a Digital Asset Manager (DAM) to add images and videos to Astro
title: Image and video hosting with Astro
description: How to use a hosted media service to add images and videos to Astro
sidebar:
label: Digital Asset Management overview
label: Media hosting overview
i18nReady: true
---
import MediaGuidesNav from '~/components/MediaGuidesNav.astro';
import ReadMore from '~/components/ReadMore.astro';
import Badge from "~/components/Badge.astro"

**Ready to connect a headless Digital Asset Manager (DAM) to your Astro project?** Follow one of our guides to integrate a hosted media system.

:::tip
Find [community-maintained integrations](https://astro.build/integrations/) for connecting a DAM or hosted media system to your project in our integrations directory.
:::
Follow one of our guides to integrate images and videos from a hosted media service.

## Hosted Media Guides

Note that many of these pages are **stubs**: they're collections of resources waiting for your contribution!

<MediaGuidesNav />

## Why use a DAM or hosted media?
## Why use hosted media?

Using a DAM, or Digital Asset Manager, helps individuals, teams, and organizations manage their image and video assets from a central location much like a [CMS](/en/guides/cms/).
Hosted media helps individuals, teams, and organizations store, manage, optimize, and deliver their image and video assets with dedicated APIs from a central location.

The difference is the type of content being managed: a DAM would primarily manage images, videos, other media assets like 3D models, and any metadata associated with those assets.
This centralization can be useful, particularly when using a single source of truth for your assets between multiple web or mobile properties. This is important if you're part of an organization that requires multiple teams to use the same assets, or are integrating into other content systems like a PIM (Product Information Manager) to connect your assets to products.

This can be useful particularly when using a single source of truth for your assets between multiple web or mobile properties. This is important if you're part of an organization that requires multiple teams to use the same assets, or are integrating into other content systems like a PIM (Product Information Manager) to connect your assets to products.
Image hosting services can transform and optimize your images, automatically delivering optimized versions for your visitors. These [remote images](/en/guides/images/#remote-images) can be used in Astro's built-in `<Image />` and `<Picture />` components, and are available to all file types in your project, including Markdown, MDX, and UI Framework components.

## Which hosted media systems or DAMs work well with Astro?
Video hosting services like [Mux](/en/guides/media/mux/) can provide performant on-demand and live-streaming video delivery along with customizable video players, giving significant reliability and scaling benefits over handling local content. They will handle video transcoding, compression, and transformation to provide a smooth user experience. A platform like Mux may also include data analysis to help you understand your user engagement.

Much like when using a CMS, as Astro handles the _presentation_ of your content, you'll want to use a headless DAM that allows you to fetch and interact with your assets via an API or SDK.
## Which hosted media systems work well with Astro?

Some headless DAMs, like Cloudinary, provide an Astro [integration](/en/guides/integrations-guide/) that allows you to easily fetch your assets as well as display them on your website or app.
Much like when using a CMS, you'll want to use hosted services that allow you to fetch and interact with your assets via an API or SDK. Some services may additionally include Astro-native components for displaying your images or videos.

## Can I use Astro without a hosted media system or DAM?
## Can I use Astro without a hosted media system?

Yes! Astro provides built-in ways to [store images](/en/guides/images/#where-to-store-images), including support for referencing remote images.

However, there is no native video support in Astro, and we recommend choosing a service like [Mux](/en/guides/media/mux/) to handle the demands of optimizing and streaming video content.
Loading