PageSpeed is increasingly important for usability and visibility in search engines. Images account for a significant percentage of overall page weight so optimizing them for various environments is critical in reducing page load time. Reducing page load time makes visitors smile :)

1. Responsive Images
Search Experience Optimization

2. Search Use To Look Like This

3. Now It Looks More Like This

4. Images are Huge
4

5. Images Enhance Data Visualization
5

6. Images Sell Products
6

7. Huge Images Take Forever to Load on Mobile
7
30
8
1
0
8
15
23
30
38
3G 4G WiFi
Load Time in Seconds

8. Don’t Interrupt People
Research shows that any delay longer than a
second will interrupt the user experience.
8

9. Image Optimization Matters Most
Optimizing images can
yield some of the
largest byte savings.
9
Imag
es
62%
38%
Images are 62% of Page Weight

10. Don’t Serve Huge Images to Mobile Users
10
serving the same image to all devices

11. Responsive Image Optimization Techniques
11Example Code: http://goo.gl/uWI1zD
• SVG logos and CSS sprites
• Optimize image quality for web
• Image variations via SRCSET

12. 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" />

13. 98% Reduction in Load Time
• Implementing responsive
images reduced load
time by 97.5%
13
20 seconds
1 seconds
0.
5.
10.
15.
20.
25.
Old Way New Way

14. Browser Support is Growing
14

15. Thank You