Lección 8Optimización de imágenes y carga lenta
- Noción 47 - Diferencia entre imágenes rasterizadas y vectoriales.
- Noción 48 - Selecciona el tipo de archivo correcto.
- Noción 49 - Ajusta la calidad de una imagen.
- Noción 50 - Comprende la compresión de imágenes.
- Noción 51 - Utiliza sprites CSS.
- Noción 52 - ¿Qué es el nuevo formato WebP?
- Noción 53 - Herramientas para la optimización de imágenes.
- Noción 54 - Repaso/evaluación
Noción 51
Utiliza sprites CSS.
Competencias objetivo
En este módulo vamos a tratar el sprite CSS y su impacto en la velocidad y la durabilidad de tu sitio web.
A partir de la información recogida en internet (Conception Web durable : Sprites CSS - Mightybytes), el sprite CSS se define como una colección de imágenes que se colocan en una sola imagen de gran tamaño. En otras palabras, esta técnica consiste en reunir varias imágenes en un único archivo, reduciendo así el número de peticiones HTTP (Hypertext Transfer Protocol). Para que lo sepas, esta solicitud representa un conjunto de líneas transmitidas al servidor por el navegador.
Por ejemplo, en lugar de usar 3 imágenes individuales en tu página web, las combinas en una sola. Con CSS podemos mostrar sólo la parte de la imagen que necesitamos.
El uso de esta técnica contribuye en gran medida a reducir nuestro impacto ecológico al diseñar nuestra página web. De hecho, al reducir el número de peticiones enviadas al servidor también optimizará el rendimiento de tu sitio web.
CSS Sprite Generator es una herramienta en línea que puede ayudarte a crear tus sprites.
https://www.css.spritegen.com