Image optimization at the edge

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.

Transcript

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!