Responsive Images - SMX Milan 2015
-
Upload
idea-evolver -
Category
Marketing
-
view
125 -
download
1
Transcript of Responsive Images - SMX Milan 2015
Don’t Interrupt People
Research shows that any delay longer than a second will interrupt the user experience.
8
Image Optimization Matters Most
Optimizing images can yield some of the
largest byte savings.
9
Images
62%
38%
Images are 62% of Page Weight
Responsive Image Optimization Techniques
11Example Code: http://goo.gl/uWI1zD
• SVG logos and CSS sprites
• Optimize image quality for web
• Image variations via SRCSET
SRCSET Example
• Provide smaller images to mobile devices• Provide zoomed-in images where applicable
12
<img src="/1-large.jpg"srcset=" /large.jpg 1024w,
/med.jpg 640w, /small.jpg 320w"
sizes="(min-width: 10em) 33.3vw, 100vw"alt="public outdoor squash court" />
98% Reduction in Load Time
• Implementing responsive images reduced load time by 97.5%
13
20 seconds
1 seconds0.
5.
10.
15.
20.
25.
Old Way New Way