JMiur [E]

¿Será más rápido cargar una imagen grande o varias imágenes pequeñas?

No es una pregunta retórica, durante mucho tiempo, siempre se ha creido lo segundo y de hecho, la técnica del slice, partir una imagen en pedazos y cargar cada parte por separado, es algo que incluso poseen varios editores de imágenes como Photoshop o Fireworks.

Sin embargo, de un tiempo a esta parte, la idea ha ido cambiando y en estos momentos, hay una tendencia a lo contrario, al uso de los llamados sprites, es decir combinar varias imágenes en un solo archivo y luego, utilizar CSS para mostrarlas (más información)

¿Cómo hacemos esto? Es simple, sólo necesitamos un poco de aritmética.

Por ejemplo, supongamos que tengo tres íconos de 16x16 que quiero mostrar como enlaces y cada uno de ellos, tiene un efecto hover; necesitaría seis imágenes individuales. Las combino con un editor, poniendo una al lado de la otra y creo una sola imagen que tendrá 48x32:


En la fila superior tengo los tres íconos en estado "normal" (los que veré por defecto) y abajo los tres que mostraré cuando pase el mouse sobre ellos.

La propiedad background nos permite colocar una imagen de fondo y posicionarla, es decir, que si dimensionamos algo, podemos agregarle un fondo de mayor tamaño y  sólo mostrar una parte de esa imagen. Creamos unas clases CSS para que se vea el ejemplo:
/* las propiedades generales */
a.iconos {
background:transparent url(URL_IMAGEN) no-repeat 0px 0px;
display: block;
height: 16px;
width: 16px;
}

/* las propiedades de cada uno de los íconos */
a.icono1 {background-position: 0px 0px;}
a.icono2 {background-position: -16px 0px;} /* desplazamos la imagen 16 pixeles a la izquierda */
a.icono3 {background-position: -32px 0px;} /* desplazamos la imagen 32 pixeles a la izquierda */

/* las propiedades de los íconos con efecto hover */
/* de manera similar, desplazamos la imagen a la izquierda y 16 pixeles hacia arriba */
a.icono1:hover {background-position: 0px -16px;}
a.icono2:hover {background-position: -16px -16px;}
a.icono3:hover {background-position: -32px -16px;}


Lo mismo podemos hacer inline, escribiendo el estilo en la etiqueta HTML. Ene ste ejemplo usamos una imagen de 96x170 pixeles donde se combinan dos, una debajo de la otra:

En este ejemplo, usamos dos imágenes de 96x85 combinadas:
<div 
style="background: transparent url(URL_IMAGEN) no-repeat 0px 0px; cursor:pointer; height: 85px; margin: 0 auto; width: 96px;"
onmouseover="this.style.backgroundPosition='0px -85px';"
onmouseout="this.style.backgroundPosition='0px 0px';"
></div>


La posición se define en pixeles, primero la coordenada horizontal y luego la coordenada vertical. La posición 0px 0px es la esquina superior izquierda, y el desplazamiento lo calculamos sumando los anchos y/o los altos de cada parte y colocándo ese valor como un número negativo.

¿Cuál es la ventaja? Fundamentalmente, cuando se trata de íconos con efectos hover, evitamos la demora que se produce cuando se carga la segunda imagen; al ser una sola, siempre está disponible y eso agiliza la visualizacion de las páginas.

Obviamente, no es algo para aplicar en cualquier caso y siempre hay que tener en cuenta que el tamaño de las imágenes es un detalle a tener muy en cuenta cuando se trata de velocidades de carga pero, es un método efectivo y muy recomendable.

41 comentarios:

Jared  

el pajarito de twitter es una gran idea para aplicar, como siempre impecable JMiur.

Responder
Claudio - Poca Tinta  

Genial Master,

Lo vengo usando de hace un buen tiempo, desde que me di cuenta que lo usaba google en su buscador :D

Pero este tutorial no me cae nada mal, como siempre genial.

Gracias por el aporte.

Responder
Dña. Urraca  

Y si lo quiero utilizar luego como enlace en una entrada ¿que tendría que poner en ella icono1, por ejemplo?

Responder
alezandri  

:) excelente

Responder
Angel  

No me había parado a pensar en ello, pero es cierto que para efectos hover funciona genial, ¡muchas gracias!

Responder
MamaNunes  

Graaaacias querido! :D

Responder
Gem@  

A decir verdad sabía que se podía conseguir el efecto hover de esta forma, pero siempre lo vi complicado por tener que armar la imagen con las dos pequeñas.
Es un buen tutorial que más de uno va a poner en práctica :D

Responder
Admin  

Super lo Intentare este Una Truco q buscaba ase mucho

Responder
JMiur  

Es una técnica muy útil, la uso hace ya mucho tiempo.

Para usarla en una entra se hace lo mismo, en las entradas es posicble agregar etiquetas <style> ... </style> sin problemas. Sólo es necesario que todo se escriba sin saltos de línea.

Crear las imágenes no es tan complicado como parece y hay algunos sitios online que permiten hacerlo. Por ejemplo: spritegen y css-sprit.es.

Responder
Jaime Trujillo Escobedo  

Siempre he andado buscando una forma sencilla y clara para poder utilizar sprites en el balcón. Gracias a tí, JMiur, me pondré manos a la obra haber lo que consigo ;)

Responder
Admin  

Pregunta?:D
Este metodo no podria ser usado para colocar para el leer mas de blog, o hack de leer mas
Este Metodo sera compatible con eso?:-|

Responder
JMiur  

Admin: No entiendo la idea. Este método sirve para agrupar varias imágenes en un solo archivo. En el caso del Leer más, serviría apra ese enlace; no para su contenido.

Jaime: Suerte con eso :D

Responder
Jaime Trujillo Escobedo  

¡¡¡Biennnn!!! me quedó de maravilla, lo puse en los bullets de la lista de categorías y la carga es mucho más rápida (antes la imagen para el hover tardaba en cargar y se veía un espacio en blanco).

Una vez más, ¡gracias JMiur!

Responder
Quique  

Buenas! a mi me costo un poquito aplicarlo pero que desde lo puse en "Nuestras Aventuras", "Escapadas" etc. la velocidad de la pagina es espectacular. De descargar mas de 20 imagenes a solo una es una pasada!

Responder
Jabladores Del UFE  

HOla Jmiur
Soy Admin Disculpa cambien de nombre
Amigo lo que digo es lo siguiente:
En Esta Entrada El Potro no enseño como personalizar el leer mas de Bloger
y colocar una IMG por el texto
Entonce queria saber si este metodo se puede Utilizar para colocar como una img
Si es compatible para en ves de colocar una img Colocar este sprites?
Esa es mi duda:)

Responder
JMiur  

Quique, Jaime: Efectivamente, la carga será más rápida pero, sobre todo, el efecto será instantáneo.

Jabladores Del UFE: Ya entiendo. Pués sí, es posible usarlo ahí o en cualquier enlace que sea una imagen, sólo es cuestión de establecer als propiedades adecuadas.

Responder
Jessica  

Interesantísimo. Ya había leído sobre esto antes, pero me parecía demasiado complejo para implementar. Gracias por explicar más a fondo.

Responder
egoloco  

con esta entrada respondes a una pregunta q tenia para hacerte desde hace tiempo... gracias!

Responder
Bilosony2™  

Hola Jmiur!! E podido hacerlo poniendo imagenes en los widgets pero, No puedo lograr implementar imagenes en la plantilla e echo tambien talcual lo explicas en el post y nada... alguna sugerencia??

Responder
JMiur  

Explícame un poco más; por ejemplo ¿dónde lo has querido usar y cómo?

Responder
Bilosony2™  

E querido implementarlas en la plantilla como tu lo haces por ej en la opcion de "suscribirse a los comentarios" que tienes el icono de feed puesto con sprite. Me dirias como puedo hacer para poder utilizarla haci en la plantilla como tu???


Saludos!!

Y que tengas Feliz Dia!!

Responder
JMiur  

No veo que haya un ejemplo realizado, bastaría establecer las propiedades del fondo de ese div:

.feed-links {background: transparent url(imagen) no-repeat left top;}
.feed-links:hover {background-position: left bottom;}

Todo depende de la imagen a usar.

Responder
Bilosony2™  

A ver todavia no lo puedo hacer.. :(
Te cuento que mi grandioso problema es que no se donde ubicarlo ni cmo llamarlo para que aparesca por ej:

.feed-links {background: transparent url(imagen) no-repeat left top;}

noce en que parte ubicarlo para ni como llamarlo..
Y a este para que aparesca noce como llamarlo ni donde ponerlo para hacer que la imagen se muestre.

.feed-links:hover {background-position: left bottom;}

????


Saludos

Responder
JMiur  

Ahora, tu plantilla tiene esa definición .feed-links { ... } la de .feed-links:hover { ... } la agregas debajo junto con lo demás. Lo que no sé es cuál es la imagen que quieres usar.

Responder
Bilosony2™  

Seguia sin entender :S pero de insistir tantos dias creo que ya lo logre:) lo aplique a casi todas las imagenes del blog esepto a dos :( y se nota vastante como alijera el sistema de sprite muy bueno :D ahora el blog anda entre 3 y 5 segundos de carga segun Pingdom :)


Saludos!!!!

Responder
Manfenix  

Hola JMiur
Use esta herramienta en los botones de la galeria simplísima.
Todo funcionó bien hasta que noté un defecto:
Imagen
Cómo puedo eliminar los dos puntos señalados en la imagen, junto con el recuadro punteado que aparecen luego de hacer clic en los botones?
Para ver en vivo el problema: Galería.
También se presenta este problema en un botón de descarga: Descargar
Saludos y gracias por tu ayuda. :)

Responder
JMiur  

Eso ocurre probablemente porque colocas un elemento de bloque dentro de un elemento inline. y vaya uno a saber qué propiedades hereda Podrías simplificar un poco esa parte.

Ahora, haces algo así:

<a href="javascript:void(0);" onclick="visorAdelante('Imagencitrico',Citrico); return false;">
<pre>
<div onmouseout ....... style="background: ....... "></div>
</pre>
</a>

Y podrías ponerlo así; lo escribo en lineas para que se entienda un poco más:

<a
onclick="visorAtras('Imagencitrico',Citrico); return false;"

href="javascript:void(0);"

style="background: transparent url(....retroceso1.png) no-repeat 0 0; cursor: pointer; display:block;margin: 0 auto; width: 46px; height: 49px;"

onmouseover="this.style.backgroundPosition='0px -49px';"
onmouseout="this.style.backgroundPosition='0px 0px';">
</a>

Es decir, el estilo de la etiqueta A, no hacen falta otras, basta dimensionarla con width y height y colocar display:block para que sea un rectángulo y acepte un fondo aún cuando no tenga contenido.

Responder
Manfenix  

Entendí el concepto y pude resolver la falla.
También lo apliqué al botón de descarga en el que tenía un problema igual y se solucionó.
Mil Gracias... :P

Responder
JMiur  

Perfecto :D

Responder
JAIME  

Hola JMiur, 3 preguntas:

1. Con la primera opcion (clase CSS) tu imagen tiene 3 iconos, se puede dar a cada uno la opcion de redireccionar a una pagina distinta?

2. La primera opcion no lleva codigo HTML para BODY?, en todo caso es necesario para ubicarla en la plantilla no?

3. Como hago para un menu vertical y q cada icono sea un link distinto?

Gracias

Responder
JMiur  

Estamos hablando de una etiqueta , de solo una etiqueta, en este caso, un enlace así que, sólo puede direccionar a una página; tiene tres imágenes de fondo diferente pero podría tener colores o fuentes distintas; en todos los casos siempre enlazaría a una sola página.

No hay HTML porque es una técnica que se puede aplicara cualquier etiqueta; en este caso a un enlace así que la etiqueta sería <a href="la_url" class="un_modelo" ......

En un menú, cada enlace apunta a una página distinta.

Magoplup  

Hola JMiur disculpa podrías indicarme la forma correcta de usarlo con una url por ejemplo en los iconos de redes sociales según veo indicas que debe hacerse <a href="la_url" class="iconos" ......
pero donde debe ir el background:url (Imagen), como ves no soy muy diestro en el tema :l

El efecto sin url lo he logrado pero con url es el problema :(

JMiur  

La url que se coloca en href es la de la dirección del enlace; si es una red social, habría que ver cómo se ha escrito porque puede ser que tena errores ya que muchas veces son complejas de armar en las plantillas de Blogger.

De todos modos, eso, nada tiene que ver con el estilo en si mismo. La imagen con el sprite es parte del CSS; en ese ejemplo, seria parte de la clase iconos{background:url (Imagen);}

Magoplup  

Gracias JMiur de momento resolví algunas pequeñas cosas es que estoy trabajando en una nueva plantilla mejorando ciertos elementos que antes no conocía y que ahora estoy descubriendo y que son de gran utilidad súper útiles tus guías mil gracias.

Responder
JAIME  

Ok, hare algunas pruebas, gracias :)

Responder
Thor  

Hola JMiur, si defino #ejemplo ul li {background:transparent url(URL_IMAGEN) no-repeat 0px 0px;}
En cada elemento li especificado en #ejemplo se mostrara el sprite, mi duda es: ¿el tiempo de carga sera igual al número de elementos li por el tamaño del sprite? o simplemente el sprite se carga una vez y las repeticiones no agregan tiempo adicional.

Responder
JMiur  

Thor:

Cuando colocas algo como esto:

ul li {background:transparent url(URL_IMAGEN) no-repeat 0px 0px;}

la imagen se carga, es decir, el navegador accede a ella y la guarda en la caché.

Luego, si esa imagen la usas en un item LI o en cien items distintos, es indiferente, sólo se carga una vez.

Responder
Mil Chistes  

Muy bueno el tutorial JMiur, muchas gracias por compartir esta información :)

Una pregunta, yo hice una pequeña modificación a la barra de navegación de entradas recientes y antiguas en su lugar puse unas imágenes (dentro de cada post), pero no puedo ponerle el efecto de a:hover, ya lo he intentado pero no he podido agregarlo en la plantilla, este es mi blog para que le eches una ojeadita.

MilChistes.net

Por el momento le he aplicado la opacidad para que no tape el texto de las imágenes, pero me gustaría ponerle el efecto a:hover sobre el botón de navegación Anterior y Siguiente.

¿Qué debería cambiar en los estilos?

Muchas gracias

JMiur  

Allí hay efectos sobre el hover. Dicen:

.blog-pager-newer-link:hover {background-position: 0 -75px;}
y
.blog-pager-older-link:hover {background-position: 40px -76px;}

¿Qué es lo que quieres agregar?

Mil Chistes  

jejeje ya no hay "tos", jeje problema solucionado, me puse a indagar y a probar si funcionaban esos estilos mientras esperaba tu respuesta ;)

Hay que ser proactivo ¿verdad? :D

Igualmente muchas gracias por responder :)

Responder
Beatriz Martín M  

Muchísimas gracias!!!! te acabo de descubrir a través del blog de comparttilisimo uufff no sabes lo difiicl que ha sido para mi todo jope solita aprendiendo tengo meses detrás de poenerle esos iconos a mi mis dos blog y no lo he logrado hasta que los consigo y aremás lo explicas de forma clara y sencilla , gracias lo intentaré , un saludo cariñoso desde Tenerife

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR