stackconf 2023 | Dynamic Image Optimization with imgproxy at Schwarz IT by Andreas Lehr.pdf
Denunciar
Compartilhar
•0 gostou•22 visualizações
stackconf 2023 | Dynamic Image Optimization with imgproxy at Schwarz IT by Andreas Lehr.pdf
•0 gostou•22 visualizações
Denunciar
Compartilhar
Baixar para ler offline
Images account for 42% of the LCP Element of all websites. But in 2023, still, we are seeing too large images delivered on websites – even on the Stackconf speakers page, I currently see 15 MB size and one 5 MB Image. Even if the techniques to resize and optimize images are available for quite some time – they’re still not used everywhere. In this talk I’ll give you an overview of the capabilities of the open source image optimizer imgproxy. At Schwarz we’re using it a dynamic image optimization engine for our Digital Leaflets delivered in all Lidl & Kaufland countries. Imgproxy is not only resizing images, but also delivering modern image formats like WEBP and AVIF. Ironically, the app itself is scaling up and down as well in STACKIT Appcloud.
Recomendados
Mais conteúdo relacionado
Similar a stackconf 2023 | Dynamic Image Optimization with imgproxy at Schwarz IT by Andreas Lehr.pdf
![[drupalday2017] - Speed-up your Drupal instance!](https://cdn.slidesharecdn.com/ss_thumbnails/daniele-piaggesispeedupyourdrupalinstance-170315152019-thumbnail.jpg?width=384&fit=bounds)
Similar a stackconf 2023 | Dynamic Image Optimization with imgproxy at Schwarz IT by Andreas Lehr.pdf(20)
![[drupalday2017] - Speed-up your Drupal instance!](https://cdn.slidesharecdn.com/ss_thumbnails/daniele-piaggesispeedupyourdrupalinstance-170315152019-thumbnail.jpg?width=768&fit=bounds)
Último
Último(20)
![Maximiliano Roa - eRetail Week Blended [Professional] Experience 2023](https://cdn.slidesharecdn.com/ss_thumbnails/maximiliano-231206002742-0417f4e6-thumbnail.jpg?width=768&fit=bounds)
stackconf 2023 | Dynamic Image Optimization with imgproxy at Schwarz IT by Andreas Lehr.pdf
- 1. Dynamic Image Optimization with imgproxy at Schwarz IT An d r e a s L e h r, s t a c k c o n f 1 3 . 0 9 . 2 0 2 3
- 2. about me ➢ Passionate for all things powering the modern web. ➢ Interested in and helping with all challenges around cloud, scaling, reliability and monitoring. ➢ SRE at STACKIT ➢ Newsletter "allesnurgecloud.com" ➢ Podcast "Happy Bootstrapping" ➢ @shakalandy 4 3 , f a t h e r o f 3 , s w a b i a n g e r m a n
- 3. Retail The Schwarz Group Recyclables Production Shaping a sustainable company Europe's largest trading company Less plastic / Close the loop Ensuring the supply of the Schwarz Group
- 4. SIMPLE SECURE STABLE OUR TARGET IMAGE 2025 Cloud transformation of the Schwarz Group 12.09.2023 STACKIT Onboarding 5 80% 20% Cloud Enterprise IT
- 6. 7
- 7. 8
- 8. Past & Present „Solutions“ o r w h y w e n e e d „ D y n a m i c I m a g e O p t i m i za t i o n “.
- 9. SHIT IN – SHIT OUT.
- 10. The „Shit In – Shit Out“ Problem Images delivered as uploaded variations in Size and Quality CMS restrictions not sustainable metadata included Bad User Experience 11
- 11. Unfortunately…. 12 „SHIT IN – SHIT OUT“ is still there in 20223
- 12. the “42 resolutions“ solution
- 13. The „42 resolutions“ solution 14 Upload Source Batch Job creates 42 solutions Images are not live Takes a lot of CPU Bad CMS User Experience
- 14. Images account for 42 % of the Largest Contentful Paint (LCP) element for websites We b - Pe r f o r m a n c e i m p o r t a n t d u e t o impact on Customer Experience Conversion rate SEO and more 12.09.2023 Fußzeile 15
- 15. WebP and AVIF to the rescue
- 16. 17 WebP • released 2010 • Better compression than JPEG & PNG • Finally supported in Safari since 09/2022 • widespread • caniuse.com/webp AVIF • released 2019 • Image Version of AV1 • driven by Netflix • Open Source • will supersede WebP • use when bandwith is priority • caniuse.com/avif Modern image Formats WebP and AVIF to the rescue
- 17. 12.09.2023 18 Shopping cart JPEG (413 kb)
- 18. 12.09.2023 19 Shopping cart webp (226kb)
- 19. 12.09.2023 20 Shopping cart AVIF(195kb)
- 20. Doing the math 12.09.2023 21 requests JPEG WEBP AVIF hint 1 413 KB 226 KB 195 KB 1 image 10 4,13 MB 2,26 MB 1,95 MB 10 images per page 10000 4,13 GB 2,26 GB 1,95 GB 100 page impressions 1.000.000 4,13 TB 2,26 TB 1,95 TB 100.000 pi 10.000.000 41,3 TB 22,6 TB 19,5 TB 1 millionpi 100.000.000 413 TB 226 TB 195 TB 10 mio pi
- 22. meet imgproxy „ D y n a m i c I m a g e O p t i m i za t i o n“ d o n e r i g h t
- 23. About imgproxy 24 • Open-Source Project by Evil Martians • Developed in GO code using libvips • 55+ features • all Security features included in OS • Paid Version available • See NASA demo on imgproxy.net
- 24. Digital Leaflets D i g i t a l F l y e r f o r a l l K a u f l a n d & L i d l C o u n t r i e s ▪ Separation in multiple applications ▪ imgproxy for Images ▪ Managed databases ▪ Object Storage for PDFs & Images ▪ Direct PDF delivery / CDN for images ▪ Cost transparency
- 25. 26 1,9 TB Source Images 5,278,808,359 requests – only 4,742,986 at origin 751 TB traffic – only 925GB at origin mean requests: 1.970 rps vs. 1,77 rps mean bandwith: 2.24 Gbps vs 2.8 Mbps Some figures
- 26. 27 AppCloud Instances for Leaflets Autoscaling in Action
- 27. DEMO Time
- 28. Key Takeaways
- 29. 30 don‘t reinvent the wheel check WebP & AVIF use autoscaling & descaling Checkout imgproxy Key Takeaways