網頁與圖片已密不可分 ，根據統計，圖片在網頁上的比重超過 50%，意即只要處理好圖片，就解決網頁一半以上的問題。這次的主題將要介紹如何在什麼都要 RWD、mobile-firendly 的時代，用前端的技術，去完成最佳的圖片體驗。

1. Images meet Web
Presented by Jay

2. A piece of cake !

3. As Web Developers
BUT
We face…

6. width : 100%
padding-bottom : 70%
display : none
The designer gives you a picture

8. Responsive Images
&
Optimize Images

9. Responsive Images

10. • Art direction
• Device-pixel-ratio
• Proportion of Viewport
• Image format

12. <img> <picture>
background
media queries
window.matchMedia()
window.navigator

13. • Art direction
• Device-pixel-ratio
• Proportion of Viewport
• Image format

14. <img src="img.jpg" srcset=“img_2x.jpg 2x, img_3x.jpg 3x">
-----------------------------------
<picture>
<source media="(min-width: 800px)"
srcset="head.jpg,head-2x.jpg 2x">
<source media ="(min-width: 450px)"
srcset="head-small.jpg, head-small-2x.jpg 2x">
<!-- polyfill -->
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" >
</picture>
(no media property)

15. • Art direction
• Device-pixel-ratio
• Proportion of Viewport
• Image format

16. Pad : 720 * 350
80% viewport

17. Desktop : 425 * 200 , 30% viewport

18. <img src=“img.jpg"
sizes="(max-width: 720px) 80vw, 30vw"
srcset= "img_400.jpg 400w,
img_600.jpg 600w,
img_1280.jpg 1280w">

19. • Art direction
• Device-pixel-ratio
• Proportion of Viewport
• Image format

20. <picture>
<source type="image/webp" srcset="butterfly.webp">
<img src="butterfly.jpg" alt="a butterfly">
</picture>
https://developers.google.com/speed/webp/docs/compression

21. Source : http://responsiveimages.org/#implementation

24. .example {
background-image: url(small.png);
}
@media (min-width: 500px) {
body {
background-image: url(body.png);
}
.example {
background-image: url(large.png);
}
}

25. image-set()

26. .sample {
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
}

28. matchMedia()
<!–- polyfill -->

29. navigator
userAgent

30. Optimize Images

31. • Eliminating and replacing images
• Vector images : SVG
• Raster images
• Image compression
• Use image Sprites
• Load necessary image

32. • Eliminating and replacing images
• Vector images : SVG
• Raster images
• Image compression
• Use image Sprites
• Load necessary image

33. CSS effects
(gradients, shadows, radius etc.)

34. CSS animations
Web fonts

35. • Eliminating and replacing images
• Vector images : SVG
• Raster images
• Image compression
• Use image Sprites
• Load necessary image

37. <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
</svg>
<img src="credit.svg">.

38. Style with CSS
.color-icons.change .icon-star-2 {
fill: #aa0bb7;
}
.color-icons.change .icon-bulb-2 {
fill: #ed6f2f;
}

39. Icon

40. • Eliminating and replacing images
• Vector images : SVG
• Raster images
• Image compression
• Use image Sprites
• Load necessary image

41. Selecting the right image format

42. PNG
32-bit (16M colors), 7-bit (128 colors), 5-bit (32 colors)

43. • Eliminating and replacing images
• Vector images : SVG
• Raster images
• Image compression
• Use image Sprites
• Load necessary image

44. GIF
gifsicle
JPG
jpegtran
jpegoptim
PNG
pngquant
OptiPNG
SVG
svgo

45. • Eliminating and replacing images
• Vector images : SVG
• Raster images
• Image compression
• Use image Sprites
• Load necessary image

47. .sprite-sheet {
background-image: url(sprite-sheet.png);
width: 40px;
height: 25px;
}
.google-logo {
width: 125px;
height: 45px;
background-position: -190px -170px;
}
.gmail {
background-position: -150px -210px;
}

48. Generate Sprite

49. • Eliminating and replacing images
• Vector images : SVG
• Raster images
• Image compression
• Use image Sprites
• Load necessary image

50. Load necessary image

51. Auto , auto , auto
Last but not least..