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.

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.

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.

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 the URL of a specific variant, if you need a certain size or crop.

• Or copy the URL of the whole asset.