This guide explains how to add visual flair to your pages using the latest tools in Umbraco 17+. In this version, images aren't just "pasted" onto a page; they are high-performance assets stored in a central library and managed through a polished, responsive Backoffice architecture. You’ll learn how to upload your files and use the Media Picker to place them perfectly within your content using the uSkinned Visual Editor.
The Media Library
Before an image can appear on your site, it needs a home in the Media section. Think of this as your website’s internal hard drive. By storing images here, you can reuse the same assets across multiple pages, keeping your site's file size small and your workflow fast.
Umbraco 17+ Enhancement: For the first time, the entire Backoffice is load-balanced, meaning large editorial teams can upload and manage high-resolution media simultaneously across multiple servers without encountering the performance bottlenecks found in older versions.
Choosing the Right Format
Umbraco 17+ is built on .NET 10 LTS, which offers industry-leading speed and security. To leverage this performance:
- Photography: Use .webp (fully supported and recommended in Umbraco 17+) or .jpg for the best balance of quality and speed.
- Graphics/Logos: Use .png for transparency or .svg for infinite sharpness.
- Pro-tip: The system utilizes Management API parity to ensure that images "respond" and scale perfectly to different screen sizes while maintaining peak performance scores.
Watch: Managing Media and Inserting Images in Umbraco 17+
This video provides a tour of the workspace, showing how to switch between tabs and use the new management features in version 17.
Other Related Tutorials
- [Tutorial] How to edit the crop and focus point of an image
- [Tutorial] How to change the quality of an image
- [Tutorial] How to create content with the Visual Editor
- [Tutorial] Image Alt Text and SEO Best Practices
Action Steps to Insert an Image
- Locate the Media Property: In the Visual Editor, look for an image field or a (+) icon within a component.
- Open the Media Picker: Click the (+) button. A sidebar will open—powered by the responsive frontend architecture—showing your Media Library.
- Upload or Select:
- Select: Click an existing image and hit Select.
- Upload: Drag a file from your computer directly into the sidebar to upload it instantly.
- Set the Focal Point: Double-click the image to open its settings. Move the blue circle to the most
important part of the image. This ensures that part is never cropped out, regardless of whether the visitor is on mobile, tablet, or desktop. - Save and Publish: Click Save and Publish. Because of the high-performance .NET 10 engine, your updates are processed and synchronized across all servers instantly.
Pro-Tip: Always fill in the "Alt Text" field! Umbraco 17+ has a continuous focus on WCAG accessibility standards. Adding descriptive alt-text isn't just great for SEO; it ensures your site is usable for people with assistive technologies, helping you meet modern accessibility expectations for your internal and external tools.
Where Next?
Now that your images are looking perfect, why not ensure they adapt beautifully to every screen size? Your next step is to explore "Scaling Image"—the best way to master focal points and responsive resizing.