qué es sprites y por qué debería interesarme
DESCRIPTION
Sprites es una técnica de optimización de sitios basada en la fusión de imágenes a una sola para posteriormente ser separadas mediante CSS. ✓ Reduce principalmente el peso de mis páginas, consumiendo menos ancho de banda ✓ Disminuye de manera considerable las peticiones HTTP ✓ Minimiza sustancialmente la cantidad de imágenes y ✓ Optimiza el peso total de los archivos externos al HTMLTRANSCRIPT
Qué es Spritesy por qué debería interesarme
por Maximiliano Martin - www.maximiliano.cl
para Laboratorio de Medios UDP
Espíritus Enmascarados
Qué es Sprites
www.maximiliano.cl
Espíritus
Video Juegos
Enmascarados
Qué es Sprites
www.maximiliano.cl
Espíritus
Video Juegos
Mapas de Bit
Enmascarados
Qué es Sprites
www.maximiliano.cl
Espíritus
Video Juegos
Mapas de Bit
Transparentes
Enmascarados
Qué es Sprites
www.maximiliano.cl
Espíritus Enmascarados
Qué es Sprites
www.maximiliano.cl
Sprites en Web
2003 Petr Stanicek
Republica Checawellstyled.com
www.maximiliano.cl
Sprites en Web
2003 Petr Stanicek
Republica Checawellstyled.com
2004 Dave Shea
Canadaalistapart.com
www.maximiliano.cl
Sprites en Web
2003 Petr Stanicek
Republica Checawellstyled.com
2004 Dave Shea
Canadaalistapart.com
www.maximiliano.cl
Sprites en Web
2003 Petr Stanicek
Republica Checawellstyled.com
www.maximiliano.cl
Menú HTML/CSS
www.maximiliano.cl
button.gif
button-over.gif
button-active.gif
Menú HTML/CSS
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('Image16','','imag/boto/boto_menu_empr_b.jpg',1)"><img src="imag/boto/boto_menu_empr_a.jpg" alt="" name="Image16" width="148" height="21" border="0"></a>
www.maximiliano.cl
Antes Despues
Menú HTML/CSS
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('Image16','','imag/boto/boto_menu_empr_b.jpg',1)"><img src="imag/boto/boto_menu_empr_a.jpg" alt="" name="Image16" width="148" height="21" border="0"></a>
www.maximiliano.cl
Antes Despues
Menú HTML/CSS
<body id=”” onLoad="MM_preloadImages('imag/boto/boto_engl_over_01.jpg','imag/boto/boto_av_over.jpg','imag/boto/boto_menu_empr_b.jpg','imag/boto/boto_menu_hoga_b.jpg','imag/boto/boto_menu_vest_b.jpg','imag/boto/boto_menu_vent_b.jpg','imag/boto/boto_menu_cont_b.jpg')">
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('Image16','','imag/boto/boto_menu_empr_b.jpg',1)"><img src="imag/boto/boto_menu_empr_a.jpg" alt="" name="Image16" width="148" height="21" border="0"></a>
www.maximiliano.cl
Antes Despues
Menú HTML/CSS
<body id=”” onLoad="MM_preloadImages('imag/boto/boto_engl_over_01.jpg','imag/boto/boto_av_over.jpg','imag/boto/boto_menu_empr_b.jpg','imag/boto/boto_menu_hoga_b.jpg','imag/boto/boto_menu_vest_b.jpg','imag/boto/boto_menu_vent_b.jpg','imag/boto/boto_menu_cont_b.jpg')">
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('Image16','','imag/boto/boto_menu_empr_b.jpg',1)"><img src="imag/boto/boto_menu_empr_a.jpg" alt="" name="Image16" width="148" height="21" border="0"></a>
www.maximiliano.cl
Antes Despues
Menú HTML/CSS
<script language="JavaScript" type="text/JavaScript"><!--function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script>
<body id=”” onLoad="MM_preloadImages('imag/boto/boto_engl_over_01.jpg','imag/boto/boto_av_over.jpg','imag/boto/boto_menu_empr_b.jpg','imag/boto/boto_menu_hoga_b.jpg','imag/boto/boto_menu_vest_b.jpg','imag/boto/boto_menu_vent_b.jpg','imag/boto/boto_menu_cont_b.jpg')">
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('Image16','','imag/boto/boto_menu_empr_b.jpg',1)"><img src="imag/boto/boto_menu_empr_a.jpg" alt="" name="Image16" width="148" height="21" border="0"></a>
www.maximiliano.cl
Antes Despues
Menú HTML/CSS
<script language="JavaScript" type="text/JavaScript"><!--function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script>
<body id=”” onLoad="MM_preloadImages('imag/boto/boto_engl_over_01.jpg','imag/boto/boto_av_over.jpg','imag/boto/boto_menu_empr_b.jpg','imag/boto/boto_menu_hoga_b.jpg','imag/boto/boto_menu_vest_b.jpg','imag/boto/boto_menu_vent_b.jpg','imag/boto/boto_menu_cont_b.jpg')">
<a href="" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('Image16','','imag/boto/boto_menu_empr_b.jpg',1)"><img src="imag/boto/boto_menu_empr_a.jpg" alt="" name="Image16" width="148" height="21" border="0"></a>
www.maximiliano.cl
Antes Despues
<a href="" alt=””>Menu item 1</a>
<body id=””>
JavaScript para otros fines por ejemplo JQuery
Menú HTML/CSS
www.maximiliano.cl
#menu a { background: url("button.gif") 0 0 no-repeat; }
#menu a:hover { background-position: -157px 0;}
#menu a:active { background-position: -314px 0; }
Comportamiento con Pseudoclases
Menú HTML/CSS
www.maximiliano.cl
#menu a { background: url("button.gif") 0 0 no-repeat; }
#menu a:hover { background-position: -157px 0;}
#menu a:active { background-position: -314px 0; }
Comportamiento con Pseudoclases
Menú HTML/CSS
www.maximiliano.cl
#menu a { background: url("button.gif") 0 0 no-repeat; }
#menu a
#menu a:hover { background-position: -157px 0;}
#menu a:active { background-position: -314px 0; }
Comportamiento con Pseudoclases
#menu a:hover
Menú HTML/CSS
www.maximiliano.cl
#menu a { background: url("button.gif") 0 0 no-repeat; }
#menu a:hover { background-position: -157px 0;}
#menu a:active { background-position: -314px 0; }
Comportamiento con Pseudoclases
#menu a:active
Menú HTML/CSS
www.maximiliano.cl
#menu a { background: url("button.gif") 0 0 no-repeat; }
#menu a:hover { background-position: -157px 0;}
#menu a:active { background-position: -314px 0; }
Comportamiento con Pseudoclases
Objetivo
www.maximiliano.cl
Optimización de nuestro sitioahorrando ancho de banda
Objetivo
www.maximiliano.cl
Rollover Javascript
HTML JS
Optimización de nuestro sitioahorrando ancho de banda
Objetivo
www.maximiliano.cl
Rollover Javascript
HTML JS
Rollover CSS/imágenes
HTML CSS
Optimización de nuestro sitioahorrando ancho de banda
Objetivo
www.maximiliano.cl
Rollover Javascript
HTML JS
Rollover SpritesCSS
HTML CSS
Rollover CSS/imágenes
HTML CSS
Optimización de nuestro sitioahorrando ancho de banda
www.maximiliano.cl
ObjetivoReducir las peticiones al servidor
www.maximiliano.cl
HTML
CSS
ObjetivoReducir las peticiones al servidor
Conexión + Petición + Respuestapor cada archivo
www.maximiliano.cl
HTML
CSS
ObjetivoReducir las peticiones al servidor
Conexión + Petición + Respuestapor cada archivo
Cargar 10 elementos de 4kb NO es igual a cargar 1 de 40kb
www.maximiliano.cl
HTML
CSS
ObjetivoReducir las peticiones al servidor
Conexión + Petición + Respuestapor cada archivo
Cargar 10 elementos de 4kb NO es igual a cargar 1 de 40kb
www.maximiliano.cl
HTML
CSS
ObjetivoReducir las peticiones al servidor
Conexión + Petición + Respuestapor cada archivo
Cargar 10 elementos de 4kb NO es igual a cargar 1 de 40kb
10 elementos de 4kb es mucho más que
1 de 16kb
peticiones HTTP 10
Menú HTML/CSS
www.maximiliano.cl
Antes
peticiones HTTP 10
Menú HTML/CSS
www.maximiliano.cl
Antes en imágenes 40 KB
peticiones HTTP 10
Menú HTML/CSS
www.maximiliano.cl
Antes
Despues
en imágenes 40 KB
petición HTTP 1
peticiones HTTP 10
Menú HTML/CSS
www.maximiliano.cl
Antes
Despues
en imágenes 40 KB
petición HTTP 1 en imágenes
16 KB
EjemplosGoogle / resultado de búsquedaSprites: 1 Nombre Archivo: nav_logo7.pngPeso: 8 KbDimensiones: 164 x 106pxCantidad de imágenes: 32Tipo: Iconos, Logos, Botones.
www.maximiliano.cl
EjemplosYahoo.comSprites: 14Nombre Archivo: trough_2.2.gifPeso: 20 KbDimensiones: 420 x 1700pxCantidad de imágenes: 82Tipo: Iconos
www.maximiliano.cl
EjemplosYahoo.comSprites: 14Nombre Archivo: trough_2.2.gifPeso: 20 KbDimensiones: 420 x 1700pxCantidad de imágenes: 82Tipo: Iconos
4 x 4300pxBackground
www.maximiliano.cl
EjemplosYahoo.comSprites: 14Nombre Archivo: trough_2.2.gifPeso: 20 KbDimensiones: 420 x 1700pxCantidad de imágenes: 82Tipo: Iconos
4 x 4300pxBackground
108 x 27pxBotones
www.maximiliano.cl
EjemplosYahoo.comSprites: 14Nombre Archivo: trough_2.2.gifPeso: 20 KbDimensiones: 420 x 1700pxCantidad de imágenes: 82Tipo: Iconos
4 x 4300pxBackground
108 x 27pxBotones
45 x 1100pxIconos
www.maximiliano.cl
EjemplosYahoo.comSprites: 14Nombre Archivo: trough_2.2.gifPeso: 20 KbDimensiones: 420 x 1700pxCantidad de imágenes: 82Tipo: Iconos
www.maximiliano.cl
EjemplosSofatutor.deSprites: 8Nombre Archivo: iconTran.pngPeso: 4 KbDimensiones: 525 x 525pxCantidad de imágenes: 15Tipo: Iconos
www.maximiliano.cl
EjemplosSofatutor.deSprites: 8Nombre Archivo: iconTran.pngPeso: 4 KbDimensiones: 525 x 525pxCantidad de imágenes: 15Tipo: Iconos
430 x 3200px Botones
www.maximiliano.cl
EjemplosSofatutor.deSprites: 8Nombre Archivo: iconTran.pngPeso: 4 KbDimensiones: 525 x 525pxCantidad de imágenes: 15Tipo: Iconos
www.maximiliano.cl
Y cómo se produce?
Interfaces Front Sprites
www.maximiliano.cl
Y cómo se produce?
Interfaces
www.maximiliano.cl
Y cómo se produce?
Interfaces
www.maximiliano.cl
Y cómo se produce?
Interfaces
www.maximiliano.cl
Y cómo se produce?
Interfaces
www.maximiliano.cl
Y cómo se produce?
Interfaces
www.maximiliano.cl
Y cómo se produce?
Interfaces
www.maximiliano.cl
Y cómo se produce?
Interfaces
www.maximiliano.cl
Y cómo se produce?
Interfaces
www.maximiliano.cl
Y cómo se produce?
Interfaces
www.maximiliano.cl
Y cómo se produce?
Interfaces
www.maximiliano.cl
✓Contenido✓Diseño
Identificar
Y cómo se produce?
Interfaces
www.maximiliano.cl
✓Contenido✓Diseño
Identificar✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓
Reconocer
Y cómo se produce?
Interfaces
www.maximiliano.cl
✓Contenido✓Diseño
Identificar✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓
Reconocer y Asociar
Y cómo se produce?
Interfaces
www.maximiliano.cl
✓Contenido✓Diseño
Identificar✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓
Reconocer y Asociar Visualizar✓Contextos✓Situaciones✓Estados
Y cómo se produce?
Interfaces
www.maximiliano.cl
✓Contenido✓Diseño
Identificar✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓
Reconocer y Asociar Visualizar Proyectar✓Contextos✓Situaciones✓Estados
✓Escalabilidad✓Imponderables
Y cómo se produce?
www.maximiliano.cl
Interfaces
Y cómo se produce?
www.maximiliano.cl
Interfaces FrontHTML Imagenes Tipo CSS
Y cómo se produce?
www.maximiliano.cl
Interfaces Front
Escribir Clases✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓etc.
HTML Imagenes Tipo CSS
Y cómo se produce?
www.maximiliano.cl
Interfaces Front
Escribir Clases✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓etc.
Definir reglas✓Repeat✓Background-position✓Display✓Border✓Margin✓Padding✓etc.
HTML Imagenes Tipo CSS
Y cómo se produce?
www.maximiliano.cl
Interfaces Front
Escribir Clases✓Botones✓Iconos✓Backgrounds✓Ilustraciones✓Esquina✓etc.
Definir reglas Crear Familias✓Repeat✓Background-position✓Display✓Border✓Margin✓Padding✓etc.
✓Iconos SideBar✓Iconos Contenido✓Iconos Footer✓Botones Formularios✓Botones Contenido✓Cajas Sidebar✓Cajas Contenido
HTML Imagenes Tipo CSS
Y cómo se produce?
www.maximiliano.cl
Interfaces Front
Y cómo se produce?
www.maximiliano.cl
Interfaces Front Sprites
Re Escribir Clases✓Sobreescribir✓Clases Nuevas✓Background-Position✓Height ✓Width✓etc.
Y cómo se produce?
www.maximiliano.cl
Interfaces Front Sprites
Re Escribir Clases✓Sobreescribir✓Clases Nuevas✓Background-Position✓Height ✓Width✓etc.
Fusionar imágenes✓Manual✓Automática
Coordenadas (X,Y)
www.maximiliano.cl
Según estado
Coordenadas (X,Y)
www.maximiliano.cl
Según estado
Coordenadas (X,Y)
www.maximiliano.cl
Según estado
Coordenadas (X,Y)
www.maximiliano.cl
#menu a: 0 0;
Según estado
Coordenadas (X,Y)
www.maximiliano.cl
#menu a:hover: -157px 0;#menu a: 0 0;
Según estado
Coordenadas (X,Y)
www.maximiliano.cl
#menu a:hover: -157px 0;
#menu a:active: -314px 0;
#menu a: 0 0;
Según estado
Menú HTML/CSS
www.maximiliano.cl
#menu a:hover {background-position: -157px 0;color: #E9BE75;
}
#menu a:active {background-position: -314px 0;color: #FFF;
}
#menu a {background: url("button.gif") 0 0 no-repeat;width:120px;margin: 1em 0; padding: 7px 0 10px 20px;color:#c60;display:block; text-decoration: none;
}
HTML CSS
<ul id="menu"> <li><a href="" alt=””>Menu item 1</a></li> <li><a href...
...</li></ul>
Técnicas
Grilla Simple XY
www.maximiliano.cl
Grilla Espaciada
Grilla Diagonal
Técnicas
Grilla Simple XY
www.maximiliano.cl
Grilla Espaciada
Grilla Diagonal
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
Técnicas
Grilla Simple XY
www.maximiliano.cl
Grilla Espaciada
Grilla Diagonal
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
✓Iconos✓Backgrounds✓Ilustraciones
Técnicas
Grilla Simple XY
www.maximiliano.cl
Grilla Espaciada
Grilla Diagonal
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
✓Iconos✓Backgrounds✓Ilustraciones
✓Iconos✓Ilustraciones
Técnicas
Grilla Simple XY
www.maximiliano.cl
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
Técnicas
Grilla Simple XY
www.maximiliano.cl
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
Técnicas
Grilla Simple XY
www.maximiliano.cl
✓Botones✓Esquinas de cajas✓Iconos✓Animaciones
๏Contra
Técnicas
www.maximiliano.cl
Grilla Espaciada✓Iconos✓Backgrounds✓Ilustraciones
Técnicas
www.maximiliano.cl
Grilla Espaciada✓Iconos✓Backgrounds✓Ilustraciones
Técnicas
www.maximiliano.cl
Grilla Espaciada✓Iconos✓Backgrounds✓Ilustraciones
Técnicas
www.maximiliano.cl
Grilla Espaciada✓Iconos✓Backgrounds✓Ilustraciones
Técnicas
www.maximiliano.cl
Grilla Diagonal✓Iconos✓Ilustraciones
Técnicas
www.maximiliano.cl
Grilla Diagonal✓Iconos✓Ilustraciones
Técnicas
www.maximiliano.cl
Grilla Diagonal✓Iconos✓Ilustraciones
Técnicas
www.maximiliano.cl
Grilla Diagonal✓Iconos✓Ilustraciones
Técnicas
www.maximiliano.cl
Grilla Diagonal✓Iconos✓Ilustraciones
Qué es Sprites
y por qué debería interesarme
www.maximiliano.cl
Una técnica de optimización de sitios basada en la fusión de imágenes a una sola para posteriormente
ser separadas mediante CSS.
✓ Reduce principalmente el peso de mis páginas✓ Disminuye de manera considerable las peticiones HTTP✓ Minimiza sustancialmente la cantidad de imágenes y ✓ Optimiza el peso total de los archivos externos al HTML
Herramientas
www.maximiliano.cl
✓Online con muchos parámetros
Herramientas
www.maximiliano.cl
✓Instalables✓Online con muchos parámetros
Herramientas
www.maximiliano.cl
✓Instalables
✓Simples (Upload Imag)
✓Online con muchos parámetros
Herramientas
www.maximiliano.cl
✓Instalables
✓Simples (Upload Imag)
✓Online con muchos parámetros
✓Curioso
Recursos
www.maximiliano.cl
✓http://wellstyled.com/css-nopreload-rollovers.htmlPetr Stanicek
✓http://www.alistapart.com/articles/sprites/Dave Shea
✓http://www.cssblog.es/distintos-metodos-para-utilizar-css-sprites/✓http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249/
✓http://www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites/
✓http://www.romancortes.com/blog/la-tecnica-de-sprites-css/
✓http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/
✓http://www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites/
✓http://borkweb.com/story/faster-page-loads-with-image-concatenation/
✓http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/
✓http://www.from-the-couch.com/post.cfm/title/creating-rounded-buttons-with-css-sprites/
✓http://trevordavis.net/blog/tutorial/how-to-preload-images-when-you-cant-use-css-sprites/✓http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials
Artículos/Tutoriales/Listas/ScreenCast
✓http://spriteme.org/✓http://css-sprit.es/
✓http://printf.ru/spritr/
✓http://www.floweringmind.com/sprite-creator/index.php
✓http://drupal.org/project/sprites
✓http://www.csssprites.com/
✓http://es.spritegen.website-performance.org/
✓http://csssprites.org/
Generadores de Sprites/CSS/Imagenes
✓http://www.tufuncion.com/css-sprites/✓http://css-tricks.com/css-sprites/
✓http://www.alistapart.com/articles/sprites2/
✓http://www.csslessons.com/
✓http://adamducker.com/blog/7/use-css-sprites/
GraciasMaximiliano Martin
www.maximiliano.cl
www.maximiliano.cl