Los dos formatos de imagen JPG y PNG son de los más utilizados y son excelentes para su uso en sitios web. Ambos formatos se utilizan de manera diferente en diseño web y cada uno tiene sus propias fortalezas y debilidades. En este artículo, se comparan JPG y PNG para mostrar qué formato es el más adecuado para cada propósito. Las imágenes optimizadas para SEO son una parte esencial del contenido y juegan un papel crucial en la optimización para motores de búsqueda.
Los formatos de imagen pueden crearse con varios perfiles y/o una matriz de cuantificación modificable. Por lo tanto, los valores obtenidos aquí en cuanto a calidad y tamaño de archivo no son comparables con los resultados de otras pruebas.
PNG
El formato PNG es un formato de imagen sin pérdidas que permite una compresión eficiente de imágenes. PNG significa ‘Portable Network Graphics’ y es el sucesor del formato GIF. Al igual que el formato GIF, cuenta con un canal alfa, que permite mostrar fondos transparentes. Sin embargo, los gradientes de color y los detalles finos pueden llevar rápidamente a tamaños de archivo grandes en la compresión PNG.
Calidad de imagen de PNG
Dado que PNG es un formato sin pérdidas, no se producen pérdidas de calidad durante la exportación.
Mientras que los objetos como gráficos se representan de forma limpia y el tamaño de archivo se mantiene pequeño, la situación cambia con imágenes más detalladas que tienen muchos tonos de color.
Para reducir el tamaño del archivo, se pueden cuantificar los datos de la imagen, lo que resulta en aliasing y pixelado, especialmente en imágenes multicolores, donde la diferencia se nota mucho más. Con una calidad media, ya se nota pixelación visible. Mientras que las imágenes de dos tonos pueden verse bien con cuantificación media, las imágenes multicolores tienen un rendimiento deficiente.
Aunque los artefactos pueden reducirse aumentando la cuantificación, esto causa que el tamaño del archivo aumente considerablemente, lo que hace que la cuantificación pierda su utilidad. En estos casos, formatos como el JPG, que se presentan a continuación, muestran sus ventajas.
JPG
El formato JPG (JPEG) es un formato de compresión con pérdida de imágenes. Durante años, JPG ha sido el formato estándar de compresión en cámaras digitales. Solo los dispositivos de gama alta ofrecen la opción de almacenar fotos sin compresión en formato RAW. Al usar compresión JPG, una cámara digital reduce significativamente el tamaño del archivo de una foto.
Para la edición de imágenes, el uso del formato RAW ofrece ventajas claras sobre JPG, ya que el perfil RAW no aplica filtros como la reducción de ruido. El formato RAW también preserva los detalles en áreas oscuras, que luego pueden aclararse para revelar más detalles. Esta información se pierde en los archivos JPG.
Para los fotógrafos, se recomienda el uso del formato RAW. Sin embargo, para diseño web y uso en internet, JPG es ideal debido a su tamaño de archivo más pequeño.
Para evitar distorsionar los resultados de las pruebas mediante una nueva compresión, las imágenes se escalaron sin interpolación y se guardaron sin pérdida en formato PNG.
Calidad de imagen en JPG
Una compresión JPG con un valor de calidad de 92 logra una buena calidad de imagen. Con un valor de calidad de q=84, que es un valor común, ya aparecen artefactos visibles, como bloques alrededor de los bordes. Con q=50, el número de artefactos aumenta y se vuelve más pronunciado.
Con q=50, el ejemplo multicolor también muestra un notable banding en el degradado de color. El número de colores se reduce significativamente con este nivel de compresión.
Tamaño de archivo de JPG
El tamaño de archivo de una imagen de dos tonos con 152,3 KB (877x877px) se redujo en un 59% a 62,5 KB con una calidad de compresión de q=84. Una mayor reducción mediante una compresión más fuerte da como resultado un tamaño de archivo de 46,1 KB en q=50. Sin embargo, se producen pérdidas significativas de calidad aquí. Usando detección psicovisual (con q=84), el tamaño del archivo se puede reducir aún más por debajo del valor de compresión regular de q=50, alcanzando solo 44,9 KB.
La detección psicovisual es análoga a la compresión psicoacústica, como en el audio MP3, donde solo se almacenan las informaciones relevantes para el oído humano en el archivo JPG.
Reducir la resolución con compresión en q=84 reduce significativamente el tamaño del archivo y aún ofrece un buen resultado adecuado para la web.
Comparación directa y conclusión sobre PNG o JPG
Tanto JPG como PNG han sido estándares en diseño web durante muchos años. Con estos dos formatos, la mayoría de las imágenes se pueden mostrar de manera óptima.
El formato PNG es particularmente adecuado para imágenes con pocos colores y bordes de alto contraste, como tipografía, logotipos, etc., ya que proporciona excelentes resultados visuales con tamaños de archivo pequeños. Los bordes permanecen limpios sin artefactos de compresión. Las imágenes con poca información de detalle se pueden comprimir a un tamaño de archivo muy pequeño con PNG.
El formato JPG sobresale en la compresión de todo tipo de imágenes, particularmente en imágenes detalladas como las fotografías. En estos casos, PNG generaría archivos mucho más grandes.
Es notable que una imagen PNG original que ha sido comprimida con JPG y luego guardada nuevamente como PNG puede terminar siendo significativamente más grande que la imagen original. Esto se debe a que la compresión PNG puede generar tamaños de archivo extremadamente pequeños para imágenes simples, pero la compresión JPG introduce artefactos adicionales. Estos artefactos luego se interpretan como datos de imagen cuando el archivo se vuelve a codificar en PNG, lo que lleva a un tamaño de archivo más grande.