Evolution of <img>@ColinBendell

Director, CTO Office

Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.<a

href="/img/brooklyn_bridge.eps">

1989

Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.

<img src="/img/brooklyn_bridge.gif">

1992

Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.

<img src="/brooklyn_bridge.jpg" lowsrc="/bridge.gif" title="NYC Golden Gate at night" />

1995

Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.

<div style="width: 240px"> <div class="delayed-image-load" data-src="/brooklyn_bridge_{width}_{pixel_ratio}.jpg" data-alt="alternative text"></div></div>

<script> new Imager({ availableWidths: [200, 260, 320, 600],

availablePixelRatios: [1, 1.3, 2] });</script>

2011

Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.

<img src="/brooklyn_bridge_100.jpg" srcset="/brooklyn_bridge_200.jpg

100w, /brooklyn_bridge_400.jpg

400w, /brooklyn_bridge_800.jpg

800w, /brooklyn_bridge_1000.jpg

1000w, /brooklyn_bridge_1400.jpg

1400w, /brooklyn_bridge_1800.jpg

1800w, /brooklyn_bridge_2200.jpg

2200w" sizes="(min-width: 500px) 33.3vw,

100vw"/>

2014

<picture><source type="image/jp2"

srcset="/brooklyn_bridge_200.jp2 100w,

/brooklyn_bridge_400.jp2 400w,

/brooklyn_bridge_800.jp2 800w,

/brooklyn_bridge_1000.jp2 1000w,

/brooklyn_bridge_1400.jp2 1400w,

/brooklyn_bridge_1800.jp2 1800w,

/brooklyn_bridge_2200.jp2 2200w"

/>…

</picture>

<picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source type="image/webp" srcset="/brooklyn_bridge_200.webp 100w, /brooklyn_bridge_400.webp 400w, /brooklyn_bridge_800.webp 800w, /brooklyn_bridge_1000.webp 1000w, /brooklyn_bridge_1400.webp 1400w, /brooklyn_bridge_1800.webp 1800w, /brooklyn_bridge_2200.webp 2200w"/> <source type="image/vnd.ms-photo" srcset="/brooklyn_bridge_200.jxr 100w, /brooklyn_bridge_400.jxr 400w, /brooklyn_bridge_800.jxr 800w, /brooklyn_bridge_1000.jxr 1000w, /brooklyn_bridge_1400.jxr 1400w, /brooklyn_bridge_1800.jxr 1800w, /brooklyn_bridge_2200.jxr 2200w"/> <source type="image/jp2" srcset="/brooklyn_bridge_200.jp2 100w, /brooklyn_bridge_400.jp2 400w, /brooklyn_bridge_800.jp2 800w, /brooklyn_bridge_1000.jp2 1000w, /brooklyn_bridge_1400.jp2 1400w, /brooklyn_bridge_1800.jp2 1800w, /brooklyn_bridge_2200.jp2 2200w"/> <!--[if IE 9]></video><![endif]--> <img src="/brooklyn_bridge_100.jpg"

srcset="/brooklyn_bridge_200.jpg 100w, /brooklyn_bridge_400.jpg 400w, /brooklyn_bridge_800.jpg 800w, /brooklyn_bridge_1000.jpg 1000w, /brooklyn_bridge_1400.jpg 1400w, /brooklyn_bridge_1800.jpg 1800w, /brooklyn_bridge_2200.jpg 2200w"

sizes="(min-width: 500px) 33.3vw, 100vw"/></picture>

What happened to <img> ?

Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.

<img src="/brooklyn_bridge.jpg" sizes="(min-width: 500px) 33.3vw, 100vw"

/>

GET /brooklyn_bridge.jpgAccept: image/webp, */*DPR: 3Width: 230Viewport-Width: 460

200 OKContent-Type: image/webpContent-DPR: 1Vary: Accept, DPR, Width

2015

3 device types

x 4 formats

x 3 resolutions

x 3 uses (search, thumb…)SALE

108 imagesx anglesx products

Next Questions

What about:• Network Conditions?• Legacy Browsers?• Operations?• Disaster Recovery?

Visit Akamai at Kiosk #22!

• Pick up your copy of the preview edition of the upcoming book:

“High Performance Images”

• Talk to an HTTP/2 expert and view our demo!

Thank-You!@ColinBendell