Extreme image performance without quality loss

Mehrdad Reshadi
(mreshadi@instartlogic.com) Lead Software Architect

Images & User Experience

Problem: dealing with large images
Large beautiful images
Are essential for user experience Can hurt user experience!
Specially on mobile devices

2 | Confidential and proprietary

Mobile website approaches

Desktop site for all
Ignore mobile

Dedicated desktop, with an m. site

Limit mobile

Dedicated desktop, mobile, and tablet sites

Invest on separate sites

Responsive websites
Single site adapts to the device
Adapt both Presentation & Performance
3

Whats a responsive website look like?

Whats the performance look like?

Safari on iPad 4 3G 3.1 MB 94 seconds

Firefox 5Mbps wired 1.7 MB 3.9 seconds

Safari iPhone 5 3G 1.9 MB 38 seconds

Chrome 5Mbps wired 1.7 MB 3.6 seconds

Source: webpagetest.org, Appurify.webpagetest.org

Whats going on?

750 x 422 283KB

750 x 422 283KB

300 x 169 283 KB

Same images (and data) sent to every device Expensive resizing on the client side Solution: Right image for each device

Big, high-resolution images increase user engagement

but mean slower page load times

7

Frustrates your mobile/tablet users the most

2.99
seconds

14.3
seconds

15.8
seconds

Source: Keynote Source: Keynote Systems, Average response time for retail sites across devices

Poor load times destroy conversions

Conversion rate vs. Load Time
Population (%) Conversion rate (%)

0-1

1-2

2-3

3-4

4-5

5-6

6-7

7-8

8-9

9-10

10-11 11-12 12-13 13-14

14-5

>15

Load Time (seconds) Sources: Walmart, Amazon, GlassesDirect

Problem : Web delivery designed for desktops

CDNs ADCs

LAST MILE 10ms

MIDDLE MILE 100ms

FIRST MILE

BOTTLENECK

10

Whats changed #1: Wireless Networks and Devices

INTERNET

BOTTLENECK
EDGE
11

Whats changed #2: Big Complex Sites

2003
12

2014

The New Bottlenecks: Browser Mechanics and Last-Mile Latency

HTML 5 adoption

Image heavy design patterns

High resolution displays

13 | Confidential and proprietary

Performance vs. Quality

Current responses
Ignoring performance at the expense of user experience Web app developers creating lower quality mobile experiences Automated quality reduction systems from CDNs

Result
Poor user experience, poor conversions, high bounce rates Reducing download size can improve load times But ultimately does not deliver a great user experience
14

Image Optimization
Browsers try to not block on image download
Technically, page can be interactive before images download Practically, user has to wait for important information to arrive

Simple model
d: time to download content
Network bound

u: time for user to see something

Download Decode Render network
15 | Confidential and proprietary

cpu

Original Images
d1

r1
d2 r2 (d1+d2) U

Assume 1connection download render

User sees all info after all images are fully download Large image => slow download => high wait time

16 | Confidential and proprietary

Individual Image Optimize

Goal: reduce download and render time
Remove unnecessary metadata from image (Photoshop ) Resize for each device/screen type Compress un-important images more Use browser specific image formats when possible
WebP on Chrome, JPEG XR on IE, Experiment with other formats on different browsers

17 | Confidential and proprietary

Progressive Images
d1 r1 d2 r2 (d1+) U Assume 1connection download render

Overlap download and rendering of images

Convert to progressive JPEG or JPEG XR

Still download of one image, blocks other images

18 | Confidential and proprietary

Split Progressive Images

d'1 r'1 d'2 r'2 Assume 1connection download render

d1 r1
(d1+) U d1

d2 r2

Use smaller (progressive?) images first Load actual images after all images are loaded replace the small ones More complex More download => can starve other tasks, more cost on the server

19 | Confidential and proprietary

Stream Images
d'1 r'1 d'2 r'2 Assume 1connection download render

d"1 r"1
(d1+) U d1 d"2 r"2

Send only part of the images first Load rest of images later Same download as before, but faster information load
20 | Confidential and proprietary

Choosing Best Optimization

Most effective optimization depends on the many factors
Device, image type (even content), network Choosing proper optimization may require significant investment

Instart Logic application streaming technology

Automatically detect the best optimization Apply to each image transparently with no developer investment

21 | Confidential and proprietary

Streaming disrupted downloading

Web Applications
x86 Applications Video
FROM DOWNLOADS FROM DOWNLOADS FROM DOWNLOADS

CDN ADC
TO STREAMING

TO STREAMING TO STREAMING

22

Instart Logics solution: Web Application Streaming

High Performance plus high quality Leverages dramatic advances in capability of browsers/JavaScript Full CDN replacement, same integration process, transparent to users Works equally well for all devices, as well as desktop
Web Application

23

Web App Streaming vs CDN / Application Delivery

Web Application

CDN

Web Application

24

How Traditional Image Delivery Works

1,500 KB of JPG/PNG

2 Mbps

1,500 KB 5.8 Sec

25

Ready

How Instart Logic Image Streaming Works

1,500 KB of JPG/PNG
Initial: 500 KB Next: 1,000 KB

2 Mbps

500 KB 1.9 Sec

26

1,000 KB 3.6 Sec

Ready

IRIS Image Resize as a Service

/brownie.jpg /brownie.jpg /brownie.jpg?resize=width:300

750 x 422 283KB

750 x 422 283KB

300 x 169 28 KB

27

Single high quality version on web server Developers can request any size they want Instart Logic will resize images during delivery Get your performance and conversions back

A unique client-cloud architecture for streaming apps

Application Virtualization Application Intelligence

Web Application

NanoVisor.JS
Browser API & Resources

Instart Logic Cloud

(30 Global locations)

Web Browser

Application Server

Designed as a full replacement for a CDN No changes required for you or end users
28

Call to action
Optimizations
Concepts similar to JIT, Profile driven compiler optimizations New and novel web-app optimizations

Use asynchronous and distributed programming

Distributed storage and caching Client-cloud optimizations Performance monitoring and measurement Data analytics

We have full-time and intern positions!!

29 | Confidential and proprietary

31 | Confidential and proprietary

Agenda
Current approaches to desktop, mobile, and tablet sites Responsive sites function and performance impact Image quality and performance impact on conversions New challenges with modern web delivery A new modern solution for fast responsive websites Demo and customer case studies

32

Web Application Streaming Demo

33

Case Study: Dollar Shave Club

This was the single most impressive conversion win we have experienced to date for anything we have done.
Todd Lehr, VP Engineering

Switched from CDN Conversion Boost

16.8% overall Up to 27% for tablets Up to 126% for smartphones

34

Case Study: Bonfaire

Our goal is to create a high-end luxury experienceto draw users in, get them immersed. Working with Instart helped us nail - Keiron McCammon, CEO and Founder that goal

Switched from CDN Using large immersive images Dramatic performance boost
2x improvement in page load times

Offloaded backend servers

35

Summary
Responsive websites can help tame the multi-screen world
But performance needs to be a key part of your strategy Images are a big impact on performance

Replace your CDN with Instart Logic

Make your existing web experiences dramatically faster Enables high-resolution images with performance Turn your responsive sites into adaptive sites Improves conversions with no changes for you or your users

Request a free trial of the service on our website

36

Extreme image performance without quality loss

Mehrdad Reshadi (mreshadi@instartlogic.com) Lead Software Architect

Increase conversions with a faster responsive mobile website with a new approach to delivery