Post on 18-Dec-2014
description
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)