In this tutorial, Akamai's Guy Podjarny, will review these techniques, and help you identify and implement the techniques that are right for you. We'll share tools that can help implementation, and share data about the results you can expect. Finally, we'll discuss what's next for image optimization, and how you can get involved.
Watch the presentation here:
Part 1: http://www.youtube.com/watch?v=a3X71PCwPD8
Part 2: http://www.youtube.com/watch?v=zZHP8K2OFjw
60. Client-side detection
• Use modernizr, or use the 1 line WebP detect function...
<script
src="modernizr.min.js"></script>
<script>
if
(Modernizr.webp)
{
var
webpImg
=
document.createElement("img");
webpImg.setAttribute('src',
'/awesome.webp');
webpImg.setAttribute('alt',
'na');
document.body.appendChild(webpImg);
}
else
{
//
Fallback
to
non-‐webp,
or
load
a
JS
decoder:
//
webpjs-‐0.0.2.min.js
/
webpjs-‐0.0.2.swf
}
</script>
+ Bullet proof, custom URLs for .webp files (cache friendly), easy fallback for all clients
- Must wait for JS execution to schedule image downloads
http://webpjs.appspot.com/
61. Server-side User-Agent detection
Serve different HTML based on User-Agent header
<html>
...
<img
src="awesome.webp">
...
<html>
Cache-‐Control:
private
<html>
...
<img
src="awesome.jpg">
...
<html>
+ No extra latency overhead, automated by the server
- Returned HTML should be marked with "Cache-Control: private"
Deploying new image formats on the web
Or inject a
polyfill library!
62. Dealing with interoperability ...
•
•
Link sharing: send a link to a .webp image to a friend running IE ... sad face.
Save As: save .webp file locally; no way to open it?
o Fixed: Chrome is now a file handler for .webp!
o Provide an explicit 'Download' option, and link to JPEG / PNG.
http://news.cnet.com/8301-1023_3-57580664-93/facebook-tries-googles-webp-image-format-users-squawk/
63. Client-Server Accept negotiation
Serve different Image based on Accept header...
UA Detection on
Images also valid
bp
e/we
imag
pt:
Acce
Acce
pt:
imag
e/pn
g
+ No extra latency overhead
+ Fully transparent to your existing application!
Deploying WebP via Accept negotiation
Only works on
Opera…
(today)