Efficient media management is crucial for maintaining a well-organised and performant website. Understanding where and how media is stored in Umbraco can help developers and content editors optimise their workflows, reduce load times, and ensure that media assets are easily accessible and properly backed up.
Understanding Media in Umbraco
In Umbraco, media refers to any digital assets that can be uploaded and managed within the CMS. This includes images, videos, documents, audio files, and other types of media. These assets are essential for enriching the content on your website and providing a better user experience.
Umbraco uses Media Types to represent various media content. Here are the default media types available in Umbraco:
| Media Type | Description |
|---|---|
| File | Used for general files (e.g., PDFs, Word documents). Includes properties like file extension and file size. |
| Folder | Used to organise media files into folders. |
| Image | Used for image files (e.g., JPEG, PNG). Includes properties like width, height, and file size. |
| umbracoMediaVideo | Used for video files. |
| umbracoMediaAudio | Used for audio files. |
| umbracoMediaArticle | Used for article files. |
| umbracoMediaVectorGraphics | Used for vector graphic files. |
It is possible for developers to extend or define new media types to enable bespoke functionality and workflows. This flexibility allows for custom media management solutions tailored to specific project needs.
Media files in Umbraco are organised by assigning a text-based path, such as /media/indcweeg/filename.png. This structure helps in managing and retrieving media files efficiently by creating a unique path for each media item.
Proper organisation of media files is crucial for both content editors and developers. For content editors, a well-organised media library makes it easier to find and use the required assets, saving time and improving efficiency. For developers, organised media ensures that the website remains performant and that media files are easily accessible for updates and maintenance.
Default Media Storage Location
Umbraco stores media files on the local file system. This means that when you upload an image, video, or document, it is saved directly on the server where Umbraco is hosted.
By default, media files are stored in the wwwroot/media directory of the Umbraco installation.
Benefits
- Simplicity - Using the local file system is straightforward and requires no additional setup.
- Performance - Accessing files from the local file system can be faster since there is no network latency involved.
- Cost - There are usually no additional costs associated with using the local file system for media storage. (Be careful for bandwidth limits!)
Limitations
- Scalability - As the number of media files grows, managing and backing up the local file system can become challenging.
- Collaboration - Sharing media files across multiple development environments or servers requires manual synchronization or the use of source control, which can be cumbersome.
- Load Balancing - In a load-balanced environment, you need to replicate the file system across all servers, which can be complex and error-prone.
- Redundancy - Local file storage does not provide redundancy or failover capabilities, making it less reliable for high-availability scenarios.
In my experience, dealing with media across different development machines can be quite challenging. Images and other media need to be shared manually or included in source control (which can be cumbersome and inefficient).
Remote File System Providers for Umbraco
Remote file system providers offer scalable and reliable solutions for storing media files outside of the local file system. These providers help overcome limitations such as scalability, redundancy, and collaboration challenges associated with local storage.
Popular Remote File System Providers:
Azure Blob Storage
- Description - Azure Blob Storage is a cloud-based storage solution by Microsoft Azure. It provides scalable and secure storage for large amounts of unstructured data, such as media files.
- Package - Umbraco.StorageProviders.AzureBlob
Amazon S3
- Description - Amazon S3 (Simple Storage Service) is a cloud storage service by Amazon Web Services. It offers durable and scalable storage for media files and other data.
- Package - Our.Umbraco.StorageProviders.AWSS3
When selecting a remote file system provider, consider factors such as scalability, performance, cost, and integration with your existing infrastructure. Each provider offers unique benefits, so choose the one that best fits your project’s needs.
B2 Media File System Provider
Connect your Umbraco Media section to a BackBlaze B2 Storage account
Best Practices for Media Management in Umbraco
Tips for organising media files (naming conventions, folder structures, etc.):
- Naming Conventions - Use clear and consistent naming conventions for your media files. Include relevant keywords and avoid spaces or special characters. For example, use product-image-01.jpg instead of IMG_1234.jpg.
- Folder Structures - Organise media files into logical folder structures based on categories or content types. For example, create separate folders for images, videos, documents, and audio files. Within these folders, you can further organise by project, date, or other relevant criteria.
Importance of optimising media files for performance:
- Image Optimisation - Compress images to reduce file size without compromising quality. Use tools like TinyPNG or ImageOptim to optimise images before uploading them to Umbraco.
- Responsive Images - Use responsive image techniques to serve appropriately sized images based on the user’s device and screen resolution. This can improve load times and user experience.
- Video Optimisation - Compress video files and use streaming services like YouTube or Vimeo for hosting large video files. This reduces the load on your server and ensures smooth playback.
Tools and plugins that can help with media management in Umbraco:
- Image Cropper - Use Umbraco’s built-in Image Cropper to create multiple versions of an image with different dimensions. This is useful for responsive design and ensuring images look good on all devices.
- Media Protect - Consider using plugins like Media Protect to secure sensitive media files and control access based on user roles.
- Media Cache - Implement caching strategies to improve the performance of media delivery. Use CDN services such as Cloudflare to cache and deliver media files quickly to users around the world. Check out my Cloudflare Media Cache Umbraco package.
Personal tips and tricks for efficient media management:
- Regular Clean-up - Periodically review and clean up unused or outdated media files to keep your media library organised and efficient.
- Metadata - Add metadata to your media types to improve searchability and organisation. Include information like descriptions, tags, and categories.
- Media Folder - It is possible to configure Umbraco to store media in a different folder. This can help with side-by-side deployments.
Conclusion
We explored the default media storage location on the local file system, its benefits, and limitations. We also covered various remote file system providers like Azure Blob Storage, Amazon S3, and Backblaze B2, highlighting their advantages. Finally, we shared best practices for media management, including tips for organising, optimising, and securing media files.
Media storage is a critical aspect of managing content in Umbraco CMS. Depending on your project’s requirements, you may choose to stick with default local storage or integrate a remote file system provider. Both option has its own set of benefits and trade-offs, so it’s essential to evaluate them based on your specific needs.