Colour Management in AEM
Transform Your Website with AEM Dynamic Media
By Richard Millington
When to use Dynamic Media to enhance images.
You have a beautifully designed website, featuring perfect typography and a clean, professional layout, complemented by excellent development. However, when you incorporate any image from legacy sources, direct from raw camera photography, or unprocessed imagery, the result can be disappointing. Not every image originates from a professional studio!
So, what can you do? Do we accept subpar photos and publish them on your global site, or do we leverage ‘Dynamic Media’?
AEM customers, whether you have licenced Dynamic media yet or not, this blog will demonstrate some options to utilise colour management to standardise site images and significantly enhance the look and feel of a website. This transformation takes it from a well-designed site let down by poor imagery to a well-designed site enhanced by rich, balanced, and vivid images.
This is a dummy site, but it addresses real-world issues and provides a solution!
These images are dull, blown out, and oversaturated. They are the site's focal point, so their quality is my primary concern. When you visit an image-rich site, image quality is paramount!
Let’s see what Dynamic Media can do with the images that have been uploaded to AEM Assets and used in this examples (I added extra modifiers to the URLs to show what is happening):
Original images (right side)
Image URL with modifiers
View the Dynamic Media rendition
View the Dynamic Media rendition
View the Dynamic Media rendition
The image presets I have used, after analysing the images and site design, were created to establish a colour standard that I believe will improve the overall appearance of the site and, in doing so, enhance its performance.
Image preset options
- Image colour space : I have chosen sRGB which I fell is a good all-rounder for web images.
- Image resolution : Identify where the image will be served; for this example, it is web-optimised at stand 72dpi (I added 105dpi just for testing, Photoshop, purposes).
- Image sharpening : Decide if an unsharp mask is required. Depending on where the images are being served, for screen (web), I recommend adding sharpening.
- Image format : Choose between PNG, JPEG, WEBP, or AVIF (note, not all are available in the preset menus but can be specified as a modifier, e.g. [fmt=webp-alpha]). With Smart imaging active Dynamic Media will serve optimised image format for the device..
- Render intent : I have chosen ‘Relative Colorimetric’ for this example. Not knowing the colour intent coming in, this should give the best overall conversions.
- Dithering : Yes (help with colour banding)
This is what the site looks like now.
This is a huge improvement with minimal effort and cost! Utilising a product that most AEM customers will have, if not, please get in touch with us, as it offers much more than just optimising image delivery (which it also does very well).
In conclusion, leveraging AEM Dynamic Media for colour correction and image optimisation is a powerful way to enhance the visual appeal of your website. By using image presets and URL modifiers, you can standardise the look and feel of your site’s imagery, ensuring consistency and high quality across all visual elements. This not only improves the aesthetic appeal but also contributes to a better user experience and potentially boosts site performance. If you haven't yet explored the capabilities of Dynamic Media, now is the time to do so. It offers far more than just optimised image delivery, providing robust tools to transform your site into a visually stunning and professionally polished platform.
If your business is interested in exploring the full potential of AEM Dynamic Media, get in touch with us today. We can provide more information and help you start your journey towards maximising the value of this powerful tool.
What are you waiting for?
If you’re looking to take your business to the next level, Comwrap Reply can help you achieve this. Get in touch with us today to discover how.