stackconf 2023 | Dynamic Image Optimization with imgproxy at Schwarz IT by Andreas Lehr.pdf

NETWAYS
NETWAYSNETWAYS
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
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
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
SIMPLE
SECURE
STABLE
OUR TARGET IMAGE 2025
Cloud transformation of the Schwarz Group
12.09.2023 STACKIT Onboarding 5
80%
20%
Cloud
Enterprise IT
Images are everywhere
6
7
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 “.
SHIT IN – SHIT OUT.
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
Unfortunately….​
12
„SHIT IN – SHIT OUT“
is still there in 20223
the “42 resolutions“ solution
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
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
WebP and AVIF
to the rescue
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
12.09.2023 18
Shopping cart JPEG (413 kb)
12.09.2023 19
Shopping cart webp (226kb)
12.09.2023 20
Shopping cart AVIF(195kb)
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
The carefree solution
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
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
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
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
27
AppCloud Instances for Leaflets
Autoscaling in Action
DEMO Time
Key Takeaways
30
don‘t reinvent the wheel
check WebP & AVIF
use autoscaling & descaling
Checkout imgproxy
Key Takeaways
31
Questions? Thank you!
1 von 30

Recomendados

Has responsive had it's day? : Amplience Customer Day 2014 von
Has responsive had it's day? : Amplience Customer Day 2014Has responsive had it's day? : Amplience Customer Day 2014
Has responsive had it's day? : Amplience Customer Day 2014Ben Seymour
616 views82 Folien
Andreas Zeitler (Vuframe): Virtual & Augmented Business: How to Discover and ... von
Andreas Zeitler (Vuframe): Virtual & Augmented Business: How to Discover and ...Andreas Zeitler (Vuframe): Virtual & Augmented Business: How to Discover and ...
Andreas Zeitler (Vuframe): Virtual & Augmented Business: How to Discover and ...AugmentedWorldExpo
192 views28 Folien
Cairo Graphics Kit von
Cairo Graphics KitCairo Graphics Kit
Cairo Graphics KitESUG
1.3K views20 Folien
Kernel Con 2022: Securing Cloud Native Workloads von
Kernel Con 2022: Securing Cloud Native WorkloadsKernel Con 2022: Securing Cloud Native Workloads
Kernel Con 2022: Securing Cloud Native WorkloadsGabriel Schuyler
218 views15 Folien
CloudCamp von
CloudCampCloudCamp
CloudCampRightScale
624 views91 Folien
How the hell do I run my microservices in production, and will it scale? von
How the hell do I run my microservices in production, and will it scale?How the hell do I run my microservices in production, and will it scale?
How the hell do I run my microservices in production, and will it scale?Katarzyna Hoffman
226 views52 Folien

Más contenido relacionado

Similar a stackconf 2023 | Dynamic Image Optimization with imgproxy at Schwarz IT by Andreas Lehr.pdf

Prepare for the Mobilacalypse von
Prepare for the MobilacalypsePrepare for the Mobilacalypse
Prepare for the MobilacalypseJeff Eaton
1.6K views60 Folien
Why we don’t use the Term DevOps: the Journey to a Product Mindset - Destinat... von
Why we don’t use the Term DevOps: the Journey to a Product Mindset - Destinat...Why we don’t use the Term DevOps: the Journey to a Product Mindset - Destinat...
Why we don’t use the Term DevOps: the Journey to a Product Mindset - Destinat...Henning Jacobs
535 views99 Folien
CloudStack - Apache's best kept secret von
CloudStack - Apache's best kept secretCloudStack - Apache's best kept secret
CloudStack - Apache's best kept secretShapeBlue
253 views44 Folien
[drupalday2017] - Speed-up your Drupal instance! von
[drupalday2017] - Speed-up your Drupal instance![drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance!DrupalDay
352 views63 Folien
Speed up your Drupal instance!! von
Speed up your Drupal instance!!Speed up your Drupal instance!!
Speed up your Drupal instance!!bmeme
239 views63 Folien
John Landry at Mass TLC Feb09 von
John Landry at Mass TLC Feb09John Landry at Mass TLC Feb09
John Landry at Mass TLC Feb09John Landry
590 views51 Folien

Similar a stackconf 2023 | Dynamic Image Optimization with imgproxy at Schwarz IT by Andreas Lehr.pdf(20)

Prepare for the Mobilacalypse von Jeff Eaton
Prepare for the MobilacalypsePrepare for the Mobilacalypse
Prepare for the Mobilacalypse
Jeff Eaton1.6K views
Why we don’t use the Term DevOps: the Journey to a Product Mindset - Destinat... von Henning Jacobs
Why we don’t use the Term DevOps: the Journey to a Product Mindset - Destinat...Why we don’t use the Term DevOps: the Journey to a Product Mindset - Destinat...
Why we don’t use the Term DevOps: the Journey to a Product Mindset - Destinat...
Henning Jacobs535 views
CloudStack - Apache's best kept secret von ShapeBlue
CloudStack - Apache's best kept secretCloudStack - Apache's best kept secret
CloudStack - Apache's best kept secret
ShapeBlue253 views
[drupalday2017] - Speed-up your Drupal instance! von DrupalDay
[drupalday2017] - Speed-up your Drupal instance![drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance!
DrupalDay352 views
Speed up your Drupal instance!! von bmeme
Speed up your Drupal instance!!Speed up your Drupal instance!!
Speed up your Drupal instance!!
bmeme239 views
John Landry at Mass TLC Feb09 von John Landry
John Landry at Mass TLC Feb09John Landry at Mass TLC Feb09
John Landry at Mass TLC Feb09
John Landry590 views
Adobe Managed Services: Complicated Cloud Deployments by Adam Pazik, Mike Til... von AEM HUB
Adobe Managed Services: Complicated Cloud Deployments by Adam Pazik, Mike Til...Adobe Managed Services: Complicated Cloud Deployments by Adam Pazik, Mike Til...
Adobe Managed Services: Complicated Cloud Deployments by Adam Pazik, Mike Til...
AEM HUB1.6K views
Simpler, faster, cheaper Enterprise Apps using only Spring Boot on GCP von Daniel Zivkovic
Simpler, faster, cheaper Enterprise Apps using only Spring Boot on GCPSimpler, faster, cheaper Enterprise Apps using only Spring Boot on GCP
Simpler, faster, cheaper Enterprise Apps using only Spring Boot on GCP
Daniel Zivkovic189 views
Future Proof Development von Jeff Segars
Future Proof DevelopmentFuture Proof Development
Future Proof Development
Jeff Segars982 views
Webinar - Order out of Chaos: Avoiding the Migration Migraine von Peak Hosting
Webinar - Order out of Chaos: Avoiding the Migration MigraineWebinar - Order out of Chaos: Avoiding the Migration Migraine
Webinar - Order out of Chaos: Avoiding the Migration Migraine
Peak Hosting846 views
Cloud Driven Development: a better workflow, less worries, and more power von Marzee Labs
Cloud Driven Development: a better workflow, less worries, and more powerCloud Driven Development: a better workflow, less worries, and more power
Cloud Driven Development: a better workflow, less worries, and more power
Marzee Labs1.5K views
PuppetConf 2017: Cloud, Containers, Puppet and You- Carl Caum, Puppet von Puppet
PuppetConf 2017: Cloud, Containers, Puppet and You- Carl Caum, PuppetPuppetConf 2017: Cloud, Containers, Puppet and You- Carl Caum, Puppet
PuppetConf 2017: Cloud, Containers, Puppet and You- Carl Caum, Puppet
Puppet246 views
Webinar | So You Think You Know the Cloud: Hosting Alternatives You May Not K... von Peak Hosting
Webinar | So You Think You Know the Cloud: Hosting Alternatives You May Not K...Webinar | So You Think You Know the Cloud: Hosting Alternatives You May Not K...
Webinar | So You Think You Know the Cloud: Hosting Alternatives You May Not K...
Peak Hosting535 views
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13 von Enough Software
MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
Enough Software468 views
From Data Science to Production - deploy, scale, enjoy! / PyData Amsterdam - ... von Sergii Khomenko
From Data Science to Production - deploy, scale, enjoy! / PyData Amsterdam - ...From Data Science to Production - deploy, scale, enjoy! / PyData Amsterdam - ...
From Data Science to Production - deploy, scale, enjoy! / PyData Amsterdam - ...
Sergii Khomenko1K views
DockerCon EU 2015: Day 1 General Session von Docker, Inc.
DockerCon EU 2015: Day 1 General SessionDockerCon EU 2015: Day 1 General Session
DockerCon EU 2015: Day 1 General Session
Docker, Inc.37.7K views
To G or not to G von Peter Batty
To G or not to GTo G or not to G
To G or not to G
Peter Batty1.2K views

Último

The Throne of Your Heart 11-26-23 PPT.pptx von
The Throne of Your Heart 11-26-23 PPT.pptxThe Throne of Your Heart 11-26-23 PPT.pptx
The Throne of Your Heart 11-26-23 PPT.pptxFamilyWorshipCenterD
5 views24 Folien
OSMC | SNMP Monitoring at scale by Rocco Pezzani & Thomas Gelf von
OSMC | SNMP Monitoring at scale by Rocco Pezzani & Thomas Gelf OSMC | SNMP Monitoring at scale by Rocco Pezzani & Thomas Gelf
OSMC | SNMP Monitoring at scale by Rocco Pezzani & Thomas Gelf NETWAYS
15 views92 Folien
BLogSite (Web Programming) (1).pdf von
BLogSite (Web Programming) (1).pdfBLogSite (Web Programming) (1).pdf
BLogSite (Web Programming) (1).pdfFiverr
11 views9 Folien
Managing Github via Terrafom.pdf von
Managing Github via Terrafom.pdfManaging Github via Terrafom.pdf
Managing Github via Terrafom.pdfmicharaeck
5 views47 Folien
Helko van den Brom - VSL von
Helko van den Brom - VSLHelko van den Brom - VSL
Helko van den Brom - VSLDutch Power
86 views18 Folien
Pdffromtextfile_1.pdf von
Pdffromtextfile_1.pdfPdffromtextfile_1.pdf
Pdffromtextfile_1.pdfTRIEU QUANG NGO
6 views2 Folien

Último(20)

OSMC | SNMP Monitoring at scale by Rocco Pezzani & Thomas Gelf von NETWAYS
OSMC | SNMP Monitoring at scale by Rocco Pezzani & Thomas Gelf OSMC | SNMP Monitoring at scale by Rocco Pezzani & Thomas Gelf
OSMC | SNMP Monitoring at scale by Rocco Pezzani & Thomas Gelf
NETWAYS15 views
BLogSite (Web Programming) (1).pdf von Fiverr
BLogSite (Web Programming) (1).pdfBLogSite (Web Programming) (1).pdf
BLogSite (Web Programming) (1).pdf
Fiverr11 views
Managing Github via Terrafom.pdf von micharaeck
Managing Github via Terrafom.pdfManaging Github via Terrafom.pdf
Managing Github via Terrafom.pdf
micharaeck5 views
Helko van den Brom - VSL von Dutch Power
Helko van den Brom - VSLHelko van den Brom - VSL
Helko van den Brom - VSL
Dutch Power86 views
Christan van Dorst - Hyteps von Dutch Power
Christan van Dorst - HytepsChristan van Dorst - Hyteps
Christan van Dorst - Hyteps
Dutch Power87 views
OSMC 2023 | Will ChatGPT Take Over My Job? by Philipp Krenn von NETWAYS
OSMC 2023 | Will ChatGPT Take Over My Job? by Philipp KrennOSMC 2023 | Will ChatGPT Take Over My Job? by Philipp Krenn
OSMC 2023 | Will ChatGPT Take Over My Job? by Philipp Krenn
NETWAYS22 views
231121 SP slides - PAS workshop November 2023.pdf von PAS_Team
231121 SP slides - PAS workshop November 2023.pdf231121 SP slides - PAS workshop November 2023.pdf
231121 SP slides - PAS workshop November 2023.pdf
PAS_Team156 views
Synthetic Biology.pptx von ShubNoor4
Synthetic Biology.pptxSynthetic Biology.pptx
Synthetic Biology.pptx
ShubNoor45 views
OSMC 2023 | IGNITE: Metrics, Margins, Mutiny – How to make your SREs (not) ru... von NETWAYS
OSMC 2023 | IGNITE: Metrics, Margins, Mutiny – How to make your SREs (not) ru...OSMC 2023 | IGNITE: Metrics, Margins, Mutiny – How to make your SREs (not) ru...
OSMC 2023 | IGNITE: Metrics, Margins, Mutiny – How to make your SREs (not) ru...
NETWAYS8 views
Post-event report intro session-1.docx von RohitRathi59
Post-event report intro session-1.docxPost-event report intro session-1.docx
Post-event report intro session-1.docx
RohitRathi5912 views

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
  • 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
  • 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
  • 29. 30 don‘t reinvent the wheel check WebP & AVIF use autoscaling & descaling Checkout imgproxy Key Takeaways