The document discusses techniques for optimizing and managing images in web development, including responsive images, art direction, and appropriate image formats. It covers the use of HTML elements like <img> and <picture>, as well as CSS strategies for managing image sizes and background images. Lastly, it highlights the importance of using vector images, image compression methods, and image sprites to enhance web performance.

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..