---
title: Exercise -- Upload and adjust an image
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

## Exercise: Upload and adjust an image

Let's put the practices mentioned in the first section to the test by working with an image in the _Content hub_.

Imagine you're a content editor, working on an ad push for Kbank's sponsorship of a celebrated English football club.
The club's marketing team wants to commemorate the occasion by holding a flash sale of the club's jersey dresses, and they have provided you with a batch of images to work on.

After selecting an image for the promo banners, you have to ensure that it will display correctly on all users' devices and channels.

> **Info:** To follow along, download zipped sample images from the [exercise resources](https://download.kentico.com/Training/sample_files_image_variants.zip).
>
> The exercise we're showing uses our _Kbank_ demo website that lets you try out what it’s like working with [Xperience by Kentico](https://www.kentico.com/platform) in a safe, sandbox environment.
>
> If you don’t have your demo site yet, request it through the [form at Kentico website](https://www.kentico.com/customers/educationcenter/training-website-requests) and request the _Xperience by Kentico – Business Tutorial Kbank_ demo site. Once you approve the request, we will automatically send you a link to the demo site.

### 1. Upload images to Content hub

1. Open **Content hub**.
2. **Upload** the sample image assets. Xperience automatically optimizes the files when uploading, and variants are generated based on your project's predefined sizes.
3. Select the image you want to update, in our case, it's _player-in-red-jersey.jpeg_.

### 2. Check image optimization

The **Primary image** is already resized and compressed by the system. This keeps your pages fast to load without making images look blurry.

1. Click the **Adjust image** icon to update the image variant.
2. Now you can manually adjust:
   1. **Format** (for example, to WEBP or AVIF) – check the project documentation or check with your administrator to see which formats your project supports. In our case, we'll change the _.jpeg_ format to _.jpg_.
   2. **Quality** – to balance sharpness and file size, let's change quality to _Medium 70%_. (Note that an option to adjust quality isn't available for lossless formats like PNG.)
   3. **Save** your changes.

> **Info:** For more details on how to manunally adjust an image, see how to [optimize image assets](https://docs.kentico.com/documentation/business-users/content-hub/content-item-assets.md#optimize-image-assets).

### 3. Preview variants

1. Open the uploaded image asset in _Content hub_.
2. Switch between its **variants** (e.g., wide, vertical, narrow).
3. Notice how the system has cropped the image. Is the player wearing the red jersey always fully visible in all variants?
   - If not, it's time to adjust the focal point.

### 4. Adjust the focal point

1. Open the **Primary image** in the asset.
2. Move the purple dot (the **focal point**) to the most important part of the image – in our case, the middle of the player's back. We want to keep the red jersey the star of your ad.
3. Preview how each image variant looks with the new focal point.
4. **Save** changes.
   - All variants update automatically, except for those that you cropped manually.

### 5. Manually crop a variant

1. Open the image asset.
2. Select the variant you want to adjust.
3. Drag the corners of the crop box to reposition it – make sure that the important part of the image is not cropped out.
4. **Save** your changes. The variant is now fixed in place and won't change if you adjust the focal point later.
5. **Publish** the adjusted content item.

> **Info:** You cannot share the image variant via URL without publishing it, so **always publish it when you've finished working** on the asset and are ready to share it with the world.

### 6. Share an image variant via URL

You updated the focal point and manually adjusted the image variants to your liking. Satisfied with your work, you want to share the asset outside _Xperience_, for example, on social media.

You can:

- Copy the **URL of the primary image**, which is already optimized for online use.

![Copy primary image URL](https://docs.kentico.com/docsassets/modules/exercise-upload-and-adjust-image/copy-primary-image-URL.png "Copy primary image URL")

- Copy the **URL of a specific variant**, if you need a certain size or crop.

![Copy image variant URL](https://docs.kentico.com/docsassets/modules/exercise-upload-and-adjust-image/copy-image-variant-URL.png "Copy image variant URL")

- Or copy the **URL of the whole asset**.

![Copy asset URL](https://docs.kentico.com/docsassets/modules/exercise-upload-and-adjust-image/copy-asset-URL.png "Copy asset URL")

> **Info:** Downloading the original uploaded image asset isn't available yet, but watch our [roadmap](https://roadmap.kentico.com/tabs/6-next-refreshes) to stay updated on the latest refreshes.