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 of 30

Recommended

Has responsive had it's day? : Amplience Customer Day 2014 by
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 slides
Andreas Zeitler (Vuframe): Virtual & Augmented Business: How to Discover and ... by
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 slides
Cairo Graphics Kit by
Cairo Graphics KitCairo Graphics Kit
Cairo Graphics KitESUG
1.3K views20 slides
Kernel Con 2022: Securing Cloud Native Workloads by
Kernel Con 2022: Securing Cloud Native WorkloadsKernel Con 2022: Securing Cloud Native Workloads
Kernel Con 2022: Securing Cloud Native WorkloadsGabriel Schuyler
218 views15 slides
CloudCamp by
CloudCampCloudCamp
CloudCampRightScale
624 views91 slides
How the hell do I run my microservices in production, and will it scale? by
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 slides

More Related Content

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

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

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

Prepare for the Mobilacalypse by 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... by 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 by 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! by 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!! by bmeme
Speed up your Drupal instance!!Speed up your Drupal instance!!
Speed up your Drupal instance!!
bmeme239 views
John Landry at Mass TLC Feb09 by 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... by 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 by 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 by Jeff Segars
Future Proof DevelopmentFuture Proof Development
Future Proof Development
Jeff Segars982 views
Webinar - Order out of Chaos: Avoiding the Migration Migraine by 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 by 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 by 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... by 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 by 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 - ... by 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 by 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 by Peter Batty
To G or not to GTo G or not to G
To G or not to G
Peter Batty1.2K views

Recently uploaded

Christan van Dorst - Hyteps by
Christan van Dorst - HytepsChristan van Dorst - Hyteps
Christan van Dorst - HytepsDutch Power
87 views24 slides
PB CV by
PB CVPB CV
PB CVPedro Borracha
7 views16 slides
OSMC 2023 | Will ChatGPT Take Over My Job? by Philipp Krenn by
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 KrennNETWAYS
22 views25 slides
BLogSite (Web Programming) (1).pdf by
BLogSite (Web Programming) (1).pdfBLogSite (Web Programming) (1).pdf
BLogSite (Web Programming) (1).pdfFiverr
11 views9 slides
Helko van den Brom - VSL by
Helko van den Brom - VSLHelko van den Brom - VSL
Helko van den Brom - VSLDutch Power
86 views18 slides
Post-event report intro session-1.docx by
Post-event report intro session-1.docxPost-event report intro session-1.docx
Post-event report intro session-1.docxRohitRathi59
12 views2 slides

Recently uploaded(20)

Christan van Dorst - Hyteps by 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 by 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
BLogSite (Web Programming) (1).pdf by Fiverr
BLogSite (Web Programming) (1).pdfBLogSite (Web Programming) (1).pdf
BLogSite (Web Programming) (1).pdf
Fiverr11 views
Helko van den Brom - VSL by Dutch Power
Helko van den Brom - VSLHelko van den Brom - VSL
Helko van den Brom - VSL
Dutch Power86 views
Post-event report intro session-1.docx by RohitRathi59
Post-event report intro session-1.docxPost-event report intro session-1.docx
Post-event report intro session-1.docx
RohitRathi5912 views
Managing Github via Terrafom.pdf by micharaeck
Managing Github via Terrafom.pdfManaging Github via Terrafom.pdf
Managing Github via Terrafom.pdf
micharaeck5 views
OSMC | SNMP Monitoring at scale by Rocco Pezzani & Thomas Gelf by 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
Gym Members Community.pptx by nasserbf1987
Gym Members Community.pptxGym Members Community.pptx
Gym Members Community.pptx
nasserbf19876 views
231121 SP slides - PAS workshop November 2023.pdf by 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
OSMC 2023 | IGNITE: Metrics, Margins, Mutiny – How to make your SREs (not) ru... by 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

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