Responsive ImagesSearch Experience Optimization

Search Use To Look Like This

Now It Looks More Like This

Images are Huge

4

Images Enhance Data Visualization

5

Images Sell Products

6

Huge Images Take Forever to Load on Mobile

7

30

8

10

8

15

23

30

38

3G 4G WiFi

Load Time in Seconds

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

Don’t Serve Huge Images to Mobile Users

10

serving the same image to all devices

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

Browser Support is Growing

14

Thank You