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

▶
top image mistakes that impact page load time
SMART_READER_LITE
LIVE PREVIEW

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

Apr 17, 2023 10 likes •100 views

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:

slide-1
SLIDE 1

Top Image Mistakes That Impact Page Load Time

Gary Ballabio gary@cloudinary.com

slide-2
SLIDE 2

#1: Using the Wrong Format

2

30.3KB JPEG 23.5KB JPEG-XR 21.3KB WebP

slide-3
SLIDE 3

#2: Uniformly Encoding at q_80

3

QUALITY 80

42.37KB

QUALITY 50

24.73KB

slide-4
SLIDE 4
  • 400x400 = 640,000 Bytes
  • 350x350 = 490,000 Bytes (24% less)
  • 300x300 = 360,000 Bytes (44% less)

#3: Wasteful Browser Side Resizing

slide-5
SLIDE 5

#4: Not Using Performance Budget

=230,000

WASTED BYTES

=70,000

WASTED BYTES (600 x 600 – 550x550) x 4 (200 x 200 – 150x150) x 4

slide-6
SLIDE 6

DPR 1.0 DPR 2.0

12.46KB 42.90KB

#5: Serving High-Res Images to Standard Displays

slide-7
SLIDE 7
  • 3.3MB - GIF
  • 188KB - MP4 video
  • 141KB - WebM video

#6: Using Animated GIFs

slide-8
SLIDE 8

Some Tools To Help

8

slide-9
SLIDE 9

Thank you!

Gary Ballabio @ballabio