Image optimization at the edge
- 1. EUROPE'S LEADING AEM DEVELOPER CONFERENCE 27th – 29th SEPTEMBER 2021 Image optimization at the edge Jakub Wądołowski, diva-e (@jwadolowski)
- 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)
- 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
- 13. What we use IO for? •Rendition generation •Auto WebP •Metadata removal •Quality adjustments https://flic.kr/p/qKCXMK
- 16. WebP request
- 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)
- 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!