Top Image Mistakes That Impact Page Load Time Gary Ballabio - PowerPoint PPT Presentation

Top Image Mistakes That Impact Page Load Time Gary Ballabio gary@cloudinary.com

#1: Using the Wrong Format 2 30.3 KB JPEG 21.3 KB WebP 23.5 KB JPEG-XR

#2: Uniformly Encoding at q_80 QUALITY 80 QUALITY 50 42.37 KB 24.73 KB 3

#3: Wasteful Browser Side Resizing • 400x400 = 640,000 Bytes • 350x350 = 490,000 Bytes (24% less) • 300x300 = 360,000 Bytes (44% less)

#4: Not Using Performance Budget (600 x 600 – 550x550) x 4 (200 x 200 – 150x150) x 4 =230,000 =70,000 WASTED BYTES WASTED BYTES

#5: Serving High-Res Images to Standard Displays DPR 1.0 DPR 2.0 12.46 KB 42.90 KB

#6: Using Animated GIFs • 3.3MB - GIF • 188KB - MP4 video • 141KB - WebM video

Some Tools To Help 8

Thank you! Gary Ballabio @ballabio