A Picture Is Worth A Thousand Words: Advanced Media Management And Optimization

Sulu’s central asset management is an extension of Sulu’s core philosophy of separating content from presentation, and it ensures that all media is in one place. This CAM holds many advantages for content managers and editors, vastly simplifying the tagging, categorizing, and organizing tasks inherent in handling large media libraries.

Upload once, reference the rest

Upload an image to CAM once, and it can be referenced on multiple websites or different pages of the same website, automatically updating once the original image does. This helps organizations with multiple brands or locales avoid duplicating time and effort.

A powerful asset control center

This centralized dashboard is where you tag and categorize your media library. You can give each asset a description, title, license, author, and more. Plus, your metadata options are multilingual, a big benefit for organizations with an international presence.

Bring order to chaos

One problem with large asset libraries is how quickly they can become disorderly. Sulu has “collections” (aka folders) to organize your media neatly. You can use the parent-child view to create clear hierarchical relationships or structures and zoom out to see your entire asset collection at a glance.

Sulu CMS helps you shape images to your exact specifications and requirements, including image compression, conversion, resizing, and cropping, all without leaving the interface.

Resize and crop within Sulu

Content managers frequently need to adapt an image to the channel or device in use: an image sized for social media won’t work as a hero image on your website. They often have to use a separate tool or platform, like Photoshop, to define these different image sizes, and it is time-consuming to exit their CMS, update the image, and then re-upload the file. Sulu, however, has a resizing functionality right within the editor interface, giving content managers the flexibility to adjust images for galleries, headers, thumbnails, and teasers without exiting their CMS.

Similarly, you can crop an image within Sulu’s interface. You can even save your specific crop for a particular image format. The cropping functionality allows you to set a “focus point” in nine different areas, so you can define the most important parts of an image that need to be included. Both resizing and cropping also work with GIFs.

Compress, customize, and save

Images use many resources, and compressing them without losing quality is critical for your site’s loading time, bandwidth usage, and even SEO rankings. Sulu provides compression for different image formats within the Sulu interface. Depending on your needs, Sulu can convert an image to:

• JPEG: good for photos
• PNG: best for graphics
• GIF: most fitting for animations
• AVIF or WebP: works for both photos and graphics

Additionally, you can configure your compression options on an installation level. How you do this depends on your site’s specific goals and requirements regarding performance, bandwidth, and image loading time. For example, you could set all your JPEGs to 80% compression. Or, you could set your headers to 60% compression, and the remaining images stay at 80%.

Transform away and stay within Sulu CMS

Sulu CMS can also transform your images in multiple ways without leaving the Sulu interface. You can strategically blur or sharpen an image, convert it to grayscale, or give it a gamma effect. The paste functionality allows you to embed a copyright, brand, or watermark symbol to protect your brand’s visual identity, no matter what.

Responsive design is essential for a performant website and good user experiences. This is especially true for large, international brands that may have many visitors, especially mobile ones, across a multitude of sites. Additionally, since Google takes into account websites that support multiple devices, a responsive website improves your SERP ranking. Sulu CMS has multiple features and functionalities that enable responsive design and a high-performing website.

Fine-grain control over image optimization

Tweaking your CSS and HTML ensures that a website looks good on the front end, regardless of screen size, platform, or orientation. Sulu CMS provides developers with 100% control over these HTML and CSS decisions and also offers many options for responsive image creation.

• The Sulu media library allows you to create images in various formats and sizes
   
• The Web Twig extension helps render responsive image formats and proper image tags. It uses an image as a reference and tells you which format you want to have on the responsive image tag, and the proper image tag gets generated
   
• The HTML picture tag helps you output images optimized for different devices

Separating content and presentation

Sulu’s advantageous philosophy of separating content from presentation carries over to responsive design. For example, the Sulu Text Editor is only for text, while images are output via media selection types. This gives developers ultimate control over how and where images are output. Separating content from presentation also makes it easier to output content optimized for different devices and to do whole-site redesigns, if necessary.

At Sulu, we think responsive design should always result from developers and designers working together. A developer can define the correct image formats and responsive output using Sulu’s media selection types. Content managers can focus on what they do best — creating content! — and don’t need to tackle how that content is output to different devices.

Consistency provides a firm foundation for experimentation

From day one, Sulu CMS has given developers 100% freedom with the front end. This means that even for older versions of Sulu, you can use the latest frontend framework or exciting new CSS features. Sulu’s integrated image formats also allow you to optimize image output, no matter your Sulu CMS version. For newer versions of Sulu, you can output your images in WebP or AVIF formats, which are web-optimized and take up less space than JPEGs or PNGs.

To get started with responsive design in Sulu CMS, look at the Getting Started docs or the Sulu demo as inspiration.

CDNs can aid you in your quest for improved load times and reduced server load by helping you cache all types of assets. We use Symfony’s powerful package to handle CDN support for Sulu CMS and suggest Webpack Encore to integrate CDN delivery and aid in asset management. Webpack Encore simplifies asset management, particularly front-end assets, by providing a convenient API for defining entry points, compiling assets with Webpack, and optimizing them for production. Developers can configure Webpack Encore to generate asset URLs pointing to CDN locations, ensuring that static assets are served efficiently from edge locations. Employing CDNs to manage your assets can significantly reduce latency and improve overall application performance.

Sulu CMS’s media management and optimization capabilities are designed with the needs of multi-brand, multi-locale organizations in mind, and it shows. With Sulu's CAM library, you can keep even a huge collection of digital assets well-structured, cleanly organized, clearly labeled, and free of duplicates. Sulu’s helpful features make editors and content managers’ lives easier when it comes to image compression, optimization, and transformation in their daily workflows. Plus, your site’s enhanced responsiveness, lower resource consumption, and improved SEO ranking will make your developers and C-level executives happy.

Ensure you’re using Sulu to its fullest extent! Connect with us.