> For the complete documentation index, see [llms.txt](https://design.mirakl.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/images/media.md).
# Media
Media component is used to display images.
## Overview
Media component is used to provide a graphic representation of something (e.g. photo or illustration).
This component only exists in square format:
* Landscape format pictures will only fit height px
* Portrait format picture will only fit weight px
* Square picture will fill the whole space
Media has **5 sizes available,** from XS to XL.
Media component comes with an empty state when to file, or URL has been provided.
## Guidelines
### How to use
`Media` component is a great way to bring added value to written content. Research has found users with some access needs (such as dyslexia) navigate web pages through images. Images help them orient themselves, and they separate the content.
Thus, the Media component should be used **as a complementary source of information**. It should not be used alone (without text) for accessibility reasons and should also not be used for decorative purposes only.
### When to use
`Media` should flow with the text content and not appear too prominent or isolated.
### When to not use
If `Media` does not bring any added value to the content, then it would be considered decorative and useless.
## Accessibility
Do not use any media that contains words in them: screen readers will not be able to read the words, and some users might miss the information.
`Media` must always have text alternatives to describe it. This makes sure that people with disabilities can understand them. Specify a text alternative with the alt attribute.
💡 Alt-text is not usually visible but is read out by screen readers or displayed if an image does not load or if images have been switched off.
Adding a caption to `Media` is a good practice as users may not always understand what is represented without having screen reader technologies.
## Key takeaways
{% hint style="success" %}
* Consider context: `Media` must bring value to the content it is related to
* Use the right component size considering the whole page design
* Provide descriptive Alt-text for screen readers and captions for all other users
{% endhint %}
{% hint style="danger" %}
* Use `Media` only for decorative purposes
* Repeat information in your alt text that is already on the page.
{% endhint %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/images/media.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
