Cómo usar una sola imagen para poner varios iconos o categorías en un blog

Alguien me puede decir como hago para usar una sola imagen para poner diferentes iconos, por ejemplo en un blog tengo los iconos de redes sociales, pero todos vienen en una sola imagen:


Pero yo lo que quiero es para poner imagenes para categorias en un blog de jueos online, no quiero usar de una imagen en una porque el codigo se haria muy grande. que alguien me explique

kanikase dijo:

Alguien me puede decir como hago para usar una sola imagen para poner diferentes iconos, por ejemplo en un blog tengo los iconos de redes sociales, pero todos vienen en una sola imagen:

Pero yo lo que quiero es para poner imagenes para categorias en un blog de jueos online, no quiero usar de una imagen en una porque el codigo se haria muy grande. que alguien me explique

Hacer clic para expandir...

Es curioso , me gustaría saber también así se puede hacer más responsivo el código :encouragement: eso ya lo había visto pero en Php en un script de warez :encouragement:

Se puede hacer complementando el HTML con CSS.
Acá podés ver cómo usé la imagen para tres redes sociales: http://jsfiddle.net/3tzGV/1
La posición de la imagen, la podés sacar con esta página: Sprite Cow - Generate CSS for sprite sheets

ramifenili dijo:

Se puede hacer complementando el HTML con CSS.
Acá podés ver cómo usé la imagen para tres redes sociales: http://jsfiddle.net/3tzGV/1
La posición de la imagen, la podés sacar con esta página: Sprite Cow - Generate CSS for sprite sheets

Hacer clic para expandir...

No entendi nada 😕

Buenas, eso creo que se llama css image sprite, podes buscarlo así. La idea es cargar una sola imagen grande en vez de varias chicas, para hacer menos consultas al servidor y otras ventajas más.
Se maneja con background-position. Es decir, cargas la imagen y para div o tag <a> le das una ubicación distinta de cada imagen. Por ejemplo:
Background: url(laurl.jpg) 0 0;
Background: url(laurl.jpg) 0 -25px;
Espero haberte dado una mano, saludos !


Enviado desde mi iPhone con Tapatalk

Te propongo dos opciones:

1ª usas esa imagen y creas zonas interactivas .
2ª usas imagenes individuales, te sirves de una tabla y enlazas cada imagen a cada sitio.

El tema es Sprites CSS ahorrarías tiempo de carga en tu pagina, peticiones al servidor, y si lo combinas con cloudflare seguramente tendrías un sitio veloz. Según varios estudios realizados por Yahoo!, hasta el 80% de la mejora en el rendimiento de la descarga de páginas web depende de la parte del cliente.

La idea para mejorar el rendimiento de una página que descarga por ejemplo 15 imágenes consiste en crear una única imagen grande que incluya las 15 imágenes individuales y utilizar las propiedades CSS de las imágenes de fondo para mostrar cada imagen. Esta técnica se presentó en el artículo CSS Sprites: Image Slicing’s Kiss of Death y desde entonces se conoce con el nombre de sprites CSS.

Aquí el articulo completo 1.10. Rollovers y sprites (CSS avanzado)

Es bastante sencillo

Ejemplo:
Tenemos esa imagen que contiene los iconos de 24x24px
Colocas este html

Y este css

Con esto se consigue que solo que cargue una sola imagen y una sola vez

Saludos 🙂