Future of images in the web
13
The future of images in the web
-
Upload
trukhin-roman -
Category
Technology
-
view
138 -
download
1
description
Vision of using images in the web
Transcript of Future of images in the web
The future of images in the web
Agenda
B.C. - bitmap, gif, jpeg, <img>A.D. - vector, svgContemporary - HTML5/CSS3Questions
B.Cthe first ever image in the web
B.Cinventing of <img> tag
B.Cformats
JPEG color and brightness gradients, 32bitGIF full transparency, animation, lossless, 8bitPNG lossless, semi transparency, gradients, no animation, 32bitBMP lossless, as container for JPEG or PNG, 32bit
B.Ccolor depth
A.D.Vector Graphic
SVG
A.D.Vector Graphic: why vector?
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>
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);
Contemporary era:Javascript libs:
- Raphael (http://raphaeljs.com/)- GreenShock (http://www.greensock.com/get-started-js/)
Contemporary eradrawing using pure css
Every pixel as linear-gradient(http://bolknote.ru/2011/11/12/~3478/#00)
