It’s almost certain you had to get yourself familiar with workflows and renditions if you’ve been doing AEM long enough. It doesn’t take long to realise it can become a huge can of worms - bulky workflows that can get stuck at random stage of processing, ton of renditions to support or components with hardcoded original asset references. And if you finally wrapped your head around it, a new set of requirements appears in the backlog: - modern image format support (WebP) - “some of the images we uploaded may have EXIF data and we’d like to remove it. Sounds doable?” - “90% quality level is slightly too high. Can we reduce it to 82% for all the images we uploaded so far please?” - “is it possible to render a small overlay on top of every image from this DAM directory?” - and the list goes on… Adobe offers you some solutions to cover workflows and renditions (offloading, Dynamic Media aka Scene7), but is this the only way? What if you can meet most (if not all) of those requirements without a single change in your AEM codebase? During this talk I’d like to walk you through Image Optimizer journey and present the outcome of its rollout in one of my recent projects.

1. EUROPE'S LEADING AEM DEVELOPER CONFERENCE
27th – 29th SEPTEMBER 2021
Image optimization at the edge
Jakub Wądołowski, diva-e (@jwadolowski)

2. Images are everywhere…
https://flic.kr/p/CboXLQ

3. Standard image manipulation strategies
https://flic.kr/p/NyMYv
•Rendition workflows
•Custom workflows (i.e. metadata removal, imagemagick, etc)
•Offloading (to separate AEM instance)
•Dynamic Media (formerly known as Scene7)

4. <picture> tag

5. Reality check
https://flic.kr/p/2evhaRd
•New image formats (WebP, HEIC, AVIF)
•EXIF metadata removal
•“It takes ages to generate renditions out of 300 MB TIF file!”
•“Can you reduce image quality from 85% to 78% for all our assets?”
•“Is it possible to blur out-of-stock products?”
•“Can you render a small ’20% off’ overlay for all on sale dresses?”
•“Would it be possible to dynamically reduce image quality for low-
speed clients?”
•…

6. The use case
•E-commerce site
•2 image sources
•AEM (marketing assets)
•External system (products)
•Image-heavy website (product listings)
https://flic.kr/p/9XSFfy

7. Image Optimizer by Fastly
•Image transformations (trim, crop, width, overlay, blur, etc)
•On-the-fly format changes (i.e. auto WebP)
•Quality level adjustments
•EXIF/XMP/ICC metadata removal
https://flic.kr/p/EQbNYd

8. Prerequisites
•IO (Fastly service add-on)
•Shielding is mandatory
•VCL changes
https://flic.kr/p/7F4bHa

9. Shielding

10. How it works?

11. VCL snippet

12. VCL snippet (cont’d)

13. What we use IO for?
•Rendition generation
•Auto WebP
•Metadata removal
•Quality adjustments
https://flic.kr/p/qKCXMK

14. Demo time!
https://flic.kr/p/gq5UAU

15. Standard image request

16. WebP request

17. It’s a trap!
https://flic.kr/p/j45cS3

18. AEM assets go-live

19. What went wrong?
https://flic.kr/p/e5gMRC
•2-stage deployment
•VCL changes (headers/QS/URL rewrites)
•IO add-on deployment
•Order matters :)

20. AEM assets go-live (cont’d)

21. Non-AEM assets go-live

22. Why not Dynamic Media?
•Implementation cost
•Fastly was already part of the application stack
•Fully functional PoC took 1 day
•Zero changes in AEM codebase
•Unified approach for all the origins
•On-going cost
https://flic.kr/p/wUJ1UF

23. Thank you!