> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inploi.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Images
> Add an image to a page and give it useful alt text.
export function LessonFooterBack() {
return
Back to CMS fundamentals
;
}
export function LessonHeaderBack() {
useEffect(() => {
const header = document.querySelector("#header");
if (!header || header.querySelector(".lesson-header-back")) {
return undefined;
}
const link = document.createElement("a");
link.className = "lesson-header-back";
link.href = "/learn/overview";
link.setAttribute("aria-label", "Back to CMS fundamentals");
link.setAttribute("title", "Back to CMS fundamentals");
link.innerHTML = `
`;
header.append(link);
return () => link.remove();
}, []);
return null;
}
## What you will do
Replace an existing image, update a background image, and add a Media block with the right display settings.
## Replacing an image
### Select the image
Click the image directly to open its settings, including when it is inside a block such as a ticker or card. To change a **background image**, select the section or column that owns the background, then open its appearance settings.
### Choose the new image
Choose a file from **Uploads**. Use the breadcrumbs to move through folders if needed.
### Crop and position it
Select **Crop** to trim the image. Choose an aspect ratio when matching a repeated layout, such as a row of cards, then adjust the crop to keep the important subject. Set the **focal point** to control which part of the image is prioritised when it is displayed.
## Adding a new image
In a column, select **Add block** and choose **Media**, then select an image from Uploads.
Use the Media block controls to adjust how the image appears:
* **Alignment** — left, centre, or right within its column.
* **Maximum width** — choose a preset or enter a custom value such as `1000px`. This is a limit, not a fixed width: the image can still shrink to fit its column on smaller screens.
* **Border radius** — rounded corners on the image.
Use a source image large enough for the space it fills, or it may look blurry. An image's **description in Uploads is used as its alt text**, so write a concise description for people who cannot see the image.
This transcript has been lightly edited for current inploi product terminology and readability.
### 0:00
This lesson covers replacing images in Studio. Select an image directly to change it, even when it is inside another block. For a background image, select the section and use its background image setting.
### 0:30
Select the replacement from Uploads. The picker opens in the current file's folder; use the breadcrumbs to browse to another folder.
### 1:00
Select **Crop** to trim the image. You can choose an aspect ratio to keep repeated images, such as cards, consistent.
### 1:30
Adjust the crop to keep the important part of the image. Set a focal point to choose the area prioritised when the image is displayed.
### 2:00
The same replacement and crop controls apply wherever the image appears, including cards.
### 2:30
To add an image, add a **Media** block inside a column and choose a file from Uploads.
### 3:00
The Media block includes alignment controls, so you can place the image to the left, centre, or right of its column.
### 3:30
Set a maximum width with a preset or a custom value. It limits the image's width without preventing it from becoming smaller on narrow screens.
### 4:00
You can also apply a border radius to round the image corners.
### 4:30
Finally, check the image's description in Uploads. Studio uses it as alt text, so make it clear and useful for people using assistive technology.
## Related articles
* [Uploads](/studio/cms/uploads)
* [The page editor](/studio/cms/pages/page-editor)
* [Naming conventions](/studio/cms/naming-conventions)
Next up: [Revert, save, and publish](/learn/revert-save-publish).