El concepto de sprites ha existido por un tiempo. Es una de las técnicas más utilizadas en la industria de los juegos para acelerar el proceso de visualización de animaciones en una pantalla. En este artículo, veremos en particular cómo esta técnica puede ayudarnos a mejorar la experiencia del usuario en las páginas web con la ayuda de CSS Sprites en el siguiente orden:
- ¿Qué es un Sprite?
- ¿Qué es CSS Sprite - una descripción general rápida?
- ¿Ejemplo de cómo ayuda en el desarrollo web?
- Ventajas de usar CSS Sprites
- ¿Qué tiene que hacer un desarrollador cuando trabaja con CSS Sprites?
- ¿Cómo crear una hoja de Sprite CSS?
- ¿Cómo trabajar con CSS Sprites?
- Empresas que utilizan CSS Sprites
¿Qué es un Sprite?
Un objeto es una imagen única que forma parte de una escena más grande en un juego. Luego, varios sprites se combinan en una imagen grande llamada hoja de sprites. Una vez que se carga una hoja de sprites en la memoria, se renderizan diferentes sprites en rápida sucesión para dar la ilusión de animación. Esto se hace simultáneamente para decenas a cientos de sprites diferentes para generar una escena en el juego.
La idea básica es que es mucho más rápido cargar una imagen y mostrar una parte de ella donde sea necesario en comparación con cargar varias imágenes y mostrarlas.
¿Qué es CSS Sprite: una descripción general rápida?
Un sprite CSS es una técnica que los desarrolladores web utilizan a menudo para optimizar el rendimiento de las páginas web. En esta técnica, varias imágenes más pequeñas, generalmente de las mismas dimensiones, se combinan en una sola imagen grande llamada hoja de sprites o conjunto de azulejos . Esta hoja de sprites se usa para mostrar elementos individuales donde los necesitemos.
Por lo general, elementos como logotipos, flechas de navegación, botones se incluyen en la hoja de sprites, ya que tienen casi las mismas dimensiones y se usan con frecuencia en una página web.
¿Ejemplo de cómo ayuda en el desarrollo web?
Generalmente, al diseñar páginas web, las imágenes se almacenan y utilizan como archivos individuales. Entonces, cuando un usuario abre una página web, el navegador tiene que realizar una solicitud HTTP para cada uno de estos archivos, descargarlos por separado y mostrarlos. Esto conduce a tiempos de carga de la página más altos ya que una página web en particular puede tener una gran cantidad de imágenes más pequeñas como botones, íconos, logotipos.
Los sprites CSS ayudan a los desarrolladores a combinar estas imágenes pequeñas de uso frecuente en una imagen grande. El navegador tiene que descargar solo un archivo que luego se utiliza paramostrar la sección requerida desplazando la imagen.
Ventajas de usar CSS Sprites
Hay dos ventajas principales de usar sprites CSS sobre imágenes normales:
Carga de página más rápida: Mejora el tiempo de carga de la página, ya que las imágenes utilizadas en la página web aparecen tan pronto como se descarga la hoja.
Mayor rendimiento y menor uso de recursos: Esta técnica no solo mejora la experiencia del usuario final al hacer que la página se cargue más rápido,pero también reduce la congestión de la red ya que se realiza un menor número de solicitudes HTTP.
¿Qué tiene que hacer un desarrollador cuando trabaja con CSS Sprites?
Cuando trabaja con imágenes individuales, el desarrollador puede simplemente trabajar con etiquetas HTML y modifíquelo en CSS si es necesario. Pero cuando se trabaja con CSS Sprites, un desarrollador debe hacer dos cosas específicas:
- Creación de hoja de Sprite
Mientras desarrolla una página web, si el desarrollador decide usar sprites CSS, primero debe crear la hoja de sprites fusionando todos los elementos deseados como botones, logotipos, etc. en un patrón similar a una cuadrícula. Esto se puede hacer usando cualquier programa de edición de imágenes como Photoshop o Gimp. También hay muchas herramientas en línea disponibles que te ayudan a crear la hoja de sprites. Estas herramientas se describen más adelante en este artículo.
- Accede a un elemento particular del sprite usando el Posición de fondo CSS propiedad
Una vez que la hoja de sprites está lista, el desarrollador tiene que usar atributos CSS para acceder a diferentes partes de la hoja.
- anchura: Ancho del sprite
- altura: Altura del sprite
- antecedentes: Referencia a la hoja de sprites
- Posición de fondo: Valores de compensación (en píxeles) para acceder solo a la parte requerida de la hoja de sprites
¿Cómo crear una hoja de Sprite CSS?
Puede utilizar cualquier software de edición de imágenes para organizar sus imágenes más pequeñas en una cuadrícula, pero a continuación se describen dos métodos más sencillos:
1. Herramienta de creación de hojas de Sprite en línea
ENLACE: toptal.com/developers/css/sprite-generator/
Esta herramienta no solo es de uso gratuito, sino que también le proporciona el código CSS necesario que se puede utilizar al hacer referencia a la hoja de sprites. Además, puede jugar con diferentes propiedades, como el relleno entre los elementos y cambiar su alineación.
2. Generando hoja de Sprite con Sprity
Si está utilizando Grunt, Node o Gulp, puede instalar un paquete llamado Sprity que le ayudará a crear una hoja de sprites en una variedad de formatos como PNG, JPG, etc.
En primer lugar, deberá instalar Sprity usando:
npm install sprity -g
Luego, para generar una hoja de sprites, use el siguiente comando:
sprity ./output-directory/ ./input-directory/*.png
¿Cómo trabajar con CSS Sprites?
En este ejemplo, usaremos la siguiente hoja de sprites:
Como puede ver en la imagen de arriba, seis iconos (Instagram, Twitter y Facebook) se han organizado en forma de cuadrícula. En la primera fila, tenemos un estado normal y en la segunda fila, tenemos su estado de desplazamiento (la imagen que aparece una vez que pasamos el cursor del ratón sobre ellos).
Si creó la hoja de sprites usando las herramientas que discutimos anteriormente, entonces ya conoce las compensaciones requeridas en el CSS, pero si usó alguna otra herramienta o simplemente le dieron una hoja de sprites, no se preocupe, discutiremos un método que lo ayudará a obtener compensaciones para el elemento requerido.
Veamos ahora una forma muy sencilla de obtener las compensaciones necesarias para cada uno de los seis iconos utilizando MS Paint. Puede que no sea una solución ideal para trabajar con sprites, pero dado que tiene la función que proporciona las coordenadas del cursor del mouse, se puede usar para obtener las coordenadas X e Y requeridas.
Primero, abra la imagen de la hoja de sprites (cuadrícula que contiene todas las imágenes más pequeñas) y coloque el cursor del mouse en la esquina superior izquierda del sprite que desea tomar.
Una vez que tenga las coordenadas del punto superior izquierdo de su sprite (imagen de Instagram superior izquierda), puede mostrar este sprite específico donde sea necesario usando el código CSS:
fondo: url ('img_sprites.png')
posición de fondo: 0 0
ancho: 125px
altura: 125px
Estamos usando ancho y alto como 125 píxeles ya que nuestros íconos son de esa dimensión. Para buscar la siguiente imagen (Twitter) en la misma fila, usamos el siguiente código:
fondo: url ('img_sprites.png')
posición de fondo: -128px 0px
ancho: 125px
altura: 125px
cómo usar el método de recorte en java
Tenga en cuenta el atributo de posición de fondo en el fragmento anterior. (-128px, 0) significa que estamos desplazando nuestra hoja de sprites hacia la izquierda en 128 píxeles (teniendo en cuenta el relleno entre elementos) y 0 píxeles en el eje Y. Si tuviéramos que acceder al icono de desplazamiento de Twitter, nuestro atributo de posición de fondo sería:
posición de fondo: -128px -128px
De esta manera, ahora podemos acceder a cada componente de nuestra hoja de sprites usando CSS. Repasemos un código HTML y CSS completo sobre cómo hacerlo.
Paso 1: Escribir el código HTML requerido
En el siguiente código, simplemente agregamos tres enlaces. Además, enlazaremos nuestro HTML con la hoja de estilo (screen.css).
Paso 2: Escribiendo el CSS necesario. Primero, diseñaremos nuestra clase de íconos compartidos. Aquí, puede ver que estamos haciendo referencia a la hoja de sprites que creamos.
/ * Icono compartido Clase * /
span.icon un enlace,
span.icon a: visitado{
monitor:bloquear
guion de texto:-9999px
imagen de fondo: url (./ img_sprites.png)
repetición de fondo:no repetir
}
Paso 3: Obtener los iconos individuales de la hoja de sprites usando las compensaciones.
/ * Icono de Instagram * /
span.instagram un enlace,
span.instagram a: visitado{
anchura:125 px
altura:125 px
posición de fondo:0 0
}
/ * Icono de Twitter * /
span.twitter un enlace,
span.twitter a: visitado{
anchura:125 px
altura:125 px
posición de fondo:-128px 0
}
/ * Icono de Facebook * /
span.facebook un enlace,
span.facebook a: visitado{
anchura:125 px
altura:125 px
posición de fondo:-257px 0
sobrecarga de funciones en c ++
}
Etapa 4: Obtener los iconos flotantes de la hoja de sprites usando las compensaciones.
span.instagram a: flotar{posición de fondo:0 -128px}
span.twitter a: flotar{posición de fondo:-128px -128px}
span.facebook a: flotar{posición de fondo:-255px -128px}
Empresas que utilizan CSS Sprites
Muchos grandes nombres de la industria utilizan CSS Sprites para mejorar la capacidad de respuesta de sus sitios web. Empresas como Google, Facebook, Amazon utilizan ampliamente este método, ya que les ayuda a reducir la cantidad de solicitudes HTTP por sesión para un usuario en particular. Este es un gran beneficio cuando tenemos en cuenta que estas empresas atienden a millones de clientes en un momento dado.
Ahora que sabe qué son los sprites CSS y cómo trabajar con ellos, está un paso más cerca en su viaje para aprender CSS. Conceptos como los sprites cambian las reglas del juego en la actualidad, ya que se ha vuelto extremadamente importante para los desarrolladores extraer todo el rendimiento de una página web.
Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo convierte en un experto en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.
Tienes una pregunta para nosotros? Por favor, menciónelo en la sección de comentarios del blog “Imágenes HTML” y nos comunicaremos con usted.