Future of images in the web

285 views

Published on

Vision of using images in the web

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
285
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Future of images in the web

  1. 1. The future of images in the web
  2. 2. Agenda B.C. - bitmap, gif, jpeg, <img> A.D. - vector, svg Contemporary - HTML5/CSS3 Questions
  3. 3. B.C the first ever image in the web
  4. 4. B.C inventing of <img> tag
  5. 5. B.C formats JPEG color and brightness gradients, 32bit GIF full transparency, animation, lossless, 8bit PNG lossless, semi transparency, gradients, no animation, 32bit BMP lossless, as container for JPEG or PNG, 32bit
  6. 6. B.C color depth
  7. 7. A.D. Vector Graphic SVG
  8. 8. A.D. Vector Graphic: why vector?
  9. 9. Contemporary era: <canvas> <script> function draw() { var canvas = document.getElementById('canvas').getContext ("2d"); canvas .beginPath(); canvas .arc(200, 200, 100, 0, Math.PI*2, true); canvas .closePath(); canvas .fill(); } </script> <body onload="draw()"> <canvas id="canvas" width="300" height="300"></canvas> </body>
  10. 10. Contemporary era: CSS3 prefixes background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to (#aa1317)); background: -webkit-linear-gradient(top, #ed1c24, #aa1317); background: -moz-linear-gradient(top, #ed1c24, #aa1317); background: -o-linear-gradient(top, #ed1c24, #aa1317); background: -ms-linear-gradient(top, #ed1c24, #aa1317); background: linear-gradient(top, #ed1c24, #aa1317); -pie-background: linear-gradient(#ed1c24, #ac1317);
  11. 11. Contemporary era: Javascript libs: - Raphael (http://raphaeljs.com/) - GreenShock (http://www.greensock.com/get-started-js/)
  12. 12. Contemporary era drawing using pure css Every pixel as linear-gradient (http://bolknote.ru/2011/11/12/~3478/#00)

×