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 48
Selecciona el tipo de archivo correcto.
Competencias objetivo
"Nuestro cerebro procesa las imágenes 60.000 veces más rápido que el texto".
"Retenemos el 80% de lo que vemos, frente al 20% de lo que leemos".
Para optimizar tu web y reducir su impacto medioambiental, es importante elegir bien los formatos de imagen. Una mala elección del formato tiene un impacto importante en la carga de tu página web y, por tanto, aumenta su consumo de energía.
Los formatos de imagen más utilizados en la web son JPEG (Joint Photographic Experts Group); PNG (Portable Network Graphics); GIF (Graphics Interchange Format) y Webp.
El formato JPEG
Este formato se recomienda para fotografías y la mayoría de imágenes con colores y contrastes muy amplios. El principal inconveniente de este formato es que provoca una pérdida de imagen. En otras palabras, cuanto más colores distintos contenga la imagen, menos comprimible será el JPEG. A pesar de esta desventaja, este formato es el más usado en la web porque la calidad de las imágenes es mejor que la de los otros formatos.
Además, con el mismo peso, la cantidad de información contenida en el formato JPEG es más rica que en el formato PNG. En este caso, el peso se optimiza y requiere menos energía para el almacenamiento y la carga.
Formato PNG
Este formato permite comprimir una imagen sin pérdida de calidad e información.
Es el formato ideal si quieres poner transparencia a tus imágenes. Ten en cuenta que su calidad de compresión es superior a la del GIF.
El formato GIF
El formato GIF permite la transferencia de imágenes y tiene la capacidad de combinar varias imágenes en un solo archivo. Admite transparencias, pero sólo ofrece 256 colores. La gran ventaja es que no pierde información durante la compresión.
GIF es el formato ideal para imágenes pequeñas que necesitan muy pocos colores. En cambio, si la imagen es más grande y tiene muchos colores, la calidad de ésta se verá afectada y el tamaño del archivo será bastante elevado.
Ten en cuenta que este formato es menos interesante que JPEG en términos de relación peso/calidad.
El formato Webp
Este formato combina las ventajas de los otros tres (3) formatos mencionados anteriormente. Crea imágenes más pequeñas, más ricas y con un impacto más rápido en la web. Su comprensión es de mejor calidad y se realiza con o sin pérdida.