Cargando...

Image sprites CSS

Optional Advanced acaba de cubrir !important — una bandera de override rara. Esta sesión es otro tema opcional: image sprites. Los verás en hojas de estilo antiguas y en algunos packs de iconos legacy. La idea es sencilla: un archivo de imagen, muchos iconos, y background-position elige qué baldosa asoma por una ventanita.

Respuesta directa

Un image sprite en CSS es una sola hoja de imagen que guarda varios iconos (o estados de botón) uno al lado del otro. Cada elemento de UI recibe ancho y alto fijos, la misma background-image y un background-position que desliza la hoja hasta que la baldosa deseada llena la caja. Los sprites bajaban el número de peticiones cuando cada icono era otro archivo. Para trabajo nuevo, prefiere iconos SVG, SVG en línea o un sistema pequeño de iconos — conserva sprites cuando mantienes una hoja ya existente o debes igualar un diseño legacy.

Por qué existían los sprites

Hace años, cada icono solía significar otro viaje HTTP. Combinar veinte PNG diminutos en una hoja era una descarga y una entrada de caché. Luego el navegador pintaba distintas «ventanas» sobre esa hoja con CSS. HTTP/2 y el bundling moderno aliviaron ese dolor, y los iconos vectoriales suelen verse más nítidos — pero el patrón de posicionamiento sigue siendo alfabetización útil cuando abres CSS antiguo.

Las tres piezas

Necesitas:

  1. Una hoja — p. ej. icons.png con baldosas en fila o cuadrícula
  2. Una caja — width y height que coincidan con una baldosa (a menudo con display: inline-block o un enlace en bloque)
  3. Un desplazamiento — background-position para que la baldosa correcta quede bajo la caja
    background-repeat: no-repeat evita que la hoja se repita. No cargas un archivo por icono; estás recortando por posición.

Primera baldosa en una hoja compartida

Imagina una hoja donde cada icono mide 32×32 píxeles. El primero está arriba a la izquierda. La caja del elemento es 32×32 y el fondo empieza en 0 0:

First icon tile from a shared sheet

css 
.icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}

La caja actúa como un viewport. Solo se ve el 32×32 superior izquierdo de icons.png. El resto de la hoja está ahí — solo recortado por el tamaño del elemento.

Segundo icono: desliza la hoja

Si el siguiente icono empieza 32px a la derecha, mueve el fondo 32px a la izquierda (X negativo). Misma imagen, mismo tamaño de caja, otra ventana:

Second icon with a horizontal offset

css 
.icon-home {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}

.icon-search {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: -32px 0;
}

La X negativa tira la hoja a la izquierda para que la segunda baldosa llene la ventana. Una segunda fila de iconos también cambia el valor Y (por ejemplo -32px -32px). Mide en tu hoja real — no adivines offsets de memoria.

Hover desde otra baldosa

Los sets de botones suelen poner estados normal y hover (o active) en la misma hoja. En :hover, cambia solo background-position:

Hover state from another sprite tile

css 
.btn-icon {
display: inline-block;
width: 40px;
height: 40px;
background-image: url("btn-sheet.png");
background-repeat: no-repeat;
background-position: 0 0;
}

.btn-icon:hover {
background-position: -40px 0;
}

No hay un segundo archivo de imagen — solo otro recorte. Mantén estable el tamaño de la caja para que el control no salte.

Hábitos tranquilos con la hoja

Empareja siempre la hoja con una caja explícita y no-repeat. Nombra las clases por rol, no solo por la matemática de píxeles:

Named sprite roles and no-repeat

css 
.sprite {
display: inline-block;
background-image: url("icons.png");
background-repeat: no-repeat;
}

.sprite--mail {
width: 24px;
height: 24px;
background-position: 0 -48px;
}

.sprite--bell {
width: 24px;
height: 24px;
background-position: -24px -48px;
}

Documenta la cuadrícula de baldosas en un comentario breve (tamaño de baldosa, orden de filas) para que el siguiente mantenedor no tenga que hacer ingeniería inversa de números mágicos.

Sprites entonces frente a iconos ahora

📊 Sprite sheets vs modern icon approaches

Approach Best when Watch out
CSS image sprite (PNG sheet) Legacy UI you must keep; one cached sheet already in the project Raster scales poorly; offsets break if the sheet changes
Inline SVG / SVG sprite Crisp UI icons at any size; easy theming with currentColor Slightly more markup or build setup
Icon font Very old stacks that already ship one Accessibility and ligature quirks; harder to theme than SVG
Separate PNG per icon Rare one-off graphics Many requests on old HTTP/1 connections
Real <img> photos Content images, galleries, product shots Not a job for background-position sprites

Las lecciones de galería de imágenes e imágenes responsive usan <img> reales (miniaturas flex, object-fit, srcset). Los sprites suelen ser cromo decorativo de UI en el fondo — no un sustituto de fotos de contenido con alt significativo.

Prefiere iconos modernos en UI nueva

Para una interfaz nueva, empieza con SVG (en línea o un pequeño sistema de sprites SVG). Obtienes bordes más nítidos, cambios de color más simples y sin offsets frágiles en píxeles. Acude a un sprite PNG clásico solo cuando el pack de diseño ya es una hoja, o cuando parcheas CSS que ya depende de una.

When a sprite is the wrong tool

css 
/* Content photo — use <img>, not a sprite crop */
.hero-photo {
max-width: 100%;
height: auto;
}

/* UI chrome — sprite OK only if the sheet already exists */
.toolbar .icon-save {
width: 16px;
height: 16px;
background-image: url("legacy-toolbar.png");
background-repeat: no-repeat;
background-position: -64px 0;
}

Pruébalo tú

  1. Dibuja una fila de 3 iconos en papel (o abre un sprite real). Anota el ancho de baldosa (p. ej. 32px).
  2. Crea .icon-a con background-position: 0 0 y una caja a juego.
  3. Añade .icon-b con -32px 0 (o el segundo offset real).
  4. Escribe una regla hover que pase a una tercera baldosa sin cambiar width/height.
  5. Escribe una frase en un comentario: por qué esta hoja sigue existiendo (legacy) o por qué usarías SVG la próxima vez.

Errores frecuentes

  • Meter fotos de contenido en un sprite y perder alt / semántica adecuada
  • Olvidar width y height de modo que se vea toda la hoja o el recorte no quede limpio
  • Usar offsets positivos cuando querías deslizar la hoja al otro lado
  • Dejar background-repeat activo y que las baldosas se dupliquen dentro de la caja
  • Construir una app nueva por defecto sobre sprites PNG en vez de SVG
  • Copiar offsets de un tutorial sin medir tu hoja

Resumen

  • Un sprite es una hoja; background-position elige qué baldosa llena una caja fija
  • Históricamente redujo peticiones HTTP de muchos iconos pequeños
  • Mantén no-repeat, tamaños estables y roles con nombre; documenta la cuadrícula
  • Prefiere SVG (o similar) para UI nueva; conserva sprites para hojas legacy
  • Las imágenes de contenido siguen siendo <img> reales — galería e imágenes responsive son otro trabajo
  • Optional Advanced continúa después con múltiples columnas (multi-column)

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 72 de 72
Css Tutorial