Compresión de páginas web: ¿cómo hacer las fotos más pequeñas? 2 billones se convierten en 600.000.000.
PNG es un formato de compresión sin pérdidas muy popular y compatible con todos los navegadores. Proporciona una excelente calidad de imagen, pero generalmente tiene tasas de compresión más bajas.
Este artículo utilizará imágenes PNG como punto de referencia para compararlas con otros formatos de compresión con pérdida, verificar la calidad de la imagen y calificar la calidad de la imagen.
Aunque el formato PNG es antiguo y engorroso, todavía tiene su lugar en Internet, especialmente en algunas escenas que requieren mayor calidad de imagen. Al mismo tiempo, PNG también se recomienda para imágenes con bordes muy nítidos (como imágenes que contienen texto). En comparación con otros formatos (incluida la compresión con pérdida), la compresión PNG en realidad tiene tasas de compresión más altas y ventajas de mejor calidad para las imágenes de texto.
PNG tiene dos modos: profundidad de color de 24 bits u 8 bits. El primero se utiliza para representar fotografías y el segundo para imágenes de texto, fotografías monocromáticas o imágenes de logotipos.
BMP es sólo un contenedor de imágenes y no proporciona compresión. Este es un formato utilizado principalmente para el procesamiento de imágenes, como las paletas en Windows.
El tamaño del BMP es fácil de calcular. Por ejemplo, para una imagen RGB con una resolución de 1920x1080p, el espacio de almacenamiento total es de aproximadamente 1920x1080x3, que son aproximadamente 5 MB. Se puede ver que el tamaño de los archivos BMP es significativamente mayor que el de los formatos comprimidos, incluido PNG. En términos generales, las imágenes BMP no deben usarse en sitios web sin circunstancias especiales, pero todavía hay muchas imágenes BMP en los sitios web.
En términos generales, si desea que el archivo sea más pequeño, debe dedicar más tiempo de procesamiento a codificar el archivo y el tiempo de decodificación suele ser aproximadamente el mismo.
En retrospectiva, la calidad de la imagen BMP es muy buena y ampliamente compatible con los navegadores, pero el tamaño del archivo es muy grande.
GIF es muy popular como formato de animación. Ya sean emoticones animados reenviados en WeChat o animaciones en sitios web, se pueden ver en todas partes y todos los navegadores admiten imágenes GIF.
GIF tiene las características híbridas de compresión sin pérdidas y compresión con pérdidas. La representación de píxeles no tiene pérdidas, pero la profundidad del color está limitada a 8 bits por píxel (es decir, cada imagen se convierte a 256 colores y, si la imagen original está en formato RGB, cada píxel en realidad está representado por 24 bits). Esto significa que los archivos contendrán menos colores (hasta 256 colores diferentes por archivo), pero el tamaño del archivo será menor. Esta es una comparación de la representación del color en PNG de 24 bits y GIF de 8 bits.
Puedes ver claramente que la imagen GIF tiene un efecto de contorno, porque el GIF no puede expresar colores intensos.
GIF no es adecuado para representar fotografías ni otras imágenes ricas. Pero para logotipos simples, íconos y similares, es muy útil, porque estas imágenes tienen pocos colores y en su mayoría son colores sólidos. En mi experiencia, los PNG de 8 bits producen archivos más pequeños que los GIF, por lo que, para imágenes fijas, se recomiendan los PNG de 8 bits.
El formato SVG es especial y muy diferente a otros formatos. Las imágenes SVG almacenan formas geométricas en lugar de los valores de cada píxel. Su principal ventaja es que se puede ampliar infinitamente sin pérdida de calidad, como se muestra en la siguiente comparación:
El tipo de archivo SVG se utiliza principalmente para logotipos, pero también para imágenes geométricas. Las principales desventajas de este archivo son:
Para imágenes pequeñas como logotipos, el tamaño del archivo suele ser mayor que PNG o WebP, especialmente logotipos complejos e irregulares. La mayoría de las veces, no hay forma de convertir una imagen a SVG de manera eficiente (algunas herramientas dicen que puede hacerlo, pero los resultados no son los ideales).
La calidad de imagen de los archivos SVG es muy alta independientemente del tamaño de visualización. Todos los navegadores modernos lo admiten.
JPEG es el rey de las imágenes web. La gran mayoría de imágenes en la web se almacenan en formato JPEG. Consulte la siguiente figura para conocer el recurso compartido específico:
¿Qué hace que JPEG sea tan popular? Como ocurre con la mayoría de los archivos, los archivos JPEG suelen ser pequeños. Su compresión utiliza un algoritmo con pérdida que minimiza el tamaño sacrificando la calidad en áreas menos sensibles al ojo humano.
Este método puede reducir significativamente el tamaño, normalmente sin una distorsión significativa. Podemos comparar esta foto de Júpiter tomada por la sonda Juno.
Foto PNG original (2 MB)_PEG mejor calidad (1 MB) Calidad predeterminada JPEG
Utilizando la compresión JPEG podemos reducir el tamaño significativamente (más del 90 %). Cuando ampliamos estas fotos, no hay una gran pérdida de calidad.
JPEG no es útil para todas las imágenes. Como se mencionó en la introducción a PNG, JPEG no es muy útil para imágenes con bordes nítidos y pocos colores. Un ejemplo común es una imagen que contiene texto, otro es un logotipo:
En esta imagen, la imagen JPEG tiene un tamaño aproximado de 2 KB (el doble del tamaño de un archivo PNG). Al mismo tiempo, al hacer zoom, JPEG no funciona bien en los bordes y los colores se distorsionan. La distorsión es muy notable, incluso en partes de la imagen sin escala.
JPEG tiene dos formatos, uno es JPEG básico y el otro es JPEG progresivo.
La diferencia visual entre los dos es la forma en que se cargan las imágenes. Cuando llegan los datos, Baseline carga las imágenes de arriba a abajo. Progresivo imprime la imagen completa a la vez con una calidad muy baja, mejorando a medida que ingresan datos. La siguiente animación muestra la diferencia:
El mundo más allá de JPEG
La compresión JPEG puede reducir muy bien el tamaño del archivo, pero JPG está desactualizado. Como usted sabe, los años de desarrollo de TI son como un siglo fuera.
En los últimos años han aparecido métodos de codificación más nuevos (como mozJPG), pero la idea central permanece sin cambios.
Al mismo tiempo, existen otros formatos que son mejores en términos de calidad de imagen y tamaño de archivo (BPG, JPEG2000, JPEGXR), pero debido a que algunos formatos están protegidos por patentes, no pueden usarse ampliamente en La Internet.
Afortunadamente, WebP está disponible para el público. Actualmente desarrollado conjuntamente por Google y de código abierto, este formato utiliza compresión con y sin pérdidas para minimizar el tamaño del archivo. Muchos navegadores modernos lo admiten, pero todavía existen lagunas en la cobertura. En agosto de 2018, casi el 75 % de los usuarios de todo el mundo utilizan navegadores que admiten imágenes WebP para navegar por la web. El tamaño de archivo y la calidad de las imágenes WebP parecen prometedores. Además de su excelente rendimiento de compresión, su mayor ventaja es su versatilidad. Puede ser compresión con pérdida o sin pérdida, con profundidad de color, transparencia y efectos de animación específicos. Sobresale en todas estas áreas.
Para resumir brevemente, la comparación de imágenes estáticas en varios formatos es la siguiente:
El próximo artículo presentará formatos dinámicos comunes.
¿Cómo reducir el tamaño de la foto? Puede utilizar PS para ajustar el tamaño y la capacidad de las imágenes. Abra la imagen en PS y haga clic en el menú de la imagen; abra el menú desplegable y seleccione el tamaño de la imagen; simplemente ingrese el valor de tamaño deseado directamente en el cuadro de ancho o alto. También puede seleccionar el formato JPG al guardar como y seleccionar la calidad de la imagen en el cuadro de calidad o completar la calidad de la imagen manualmente. Los detalles son los siguientes:
Método 1: cambiar el tamaño de la imagen.
1. Abra la imagen con PS y haga clic en el menú de imagen;
2. Abra el menú desplegable y seleccione el tamaño de la imagen; Aparece el cuadro de diálogo de tamaño de imagen. Cambie el tamaño de píxel según sus necesidades y haga clic en Aceptar.
4. Vuelva a hacer clic en el archivo de la barra de menú para guardarlo en el formato utilizado por el sitio web.
5. En el cuadro de diálogo emergente Guardar para web, puede ajustar el formato. proporción Ajuste el tamaño de la imagen y finalmente seleccione Guardar.
Método 2: Si el tamaño de la imagen permanece sin cambios, puedes reducir la calidad de la imagen para comprimirla.
1. También puede abrir el menú de archivos de PS y seleccionar el formato para almacenamiento WEB y del dispositivo.
2. Seleccione el formato para guardar la imagen en la lista de formatos. luego seleccione JPG;
3. Seleccione o complete manualmente la calidad de la imagen en el cuadro de calidad.
¿Cómo hacer las fotos más pequeñas? 2 MB a 600 k1, abre la imagen en Photoshop.
2. Después de abrir la imagen, haga clic en el archivo en la barra de herramientas y luego haga clic en "Exportar".
3. Después de hacer clic en "Exportar", seleccione el formato para guardar como web.
4. Ingrese a la interfaz de guardar para formato web, configure el formato de imagen en JPEG y luego haga clic en Optimizar tamaño de archivo en el menú de optimización.
5. En Optimizar tamaño de archivo, ingrese 600K y haga clic en Aceptar.
6. Después de confirmar que la imagen está comprimida a 600K, haga clic en Guardar.