wdffpress.info

wdffpress.info

Una guía para principiantes de JPEG vs PNG (y cómo usar ambos)

¿Qué sería de la web con imágenes? En unas pocas décadas, Internet pasó de ser una impresora de matriz de puntos digital a un servidor dinámico de multimedia, que incluye imágenes, videos, animaciones y más. Sin embargo, cuando se trata de imágenes fijas digitales, puede haber confusión entre JPEG y PNG, específicamente cuándo usar cada uno.

Si mirara una imagen JPEG junto a la misma pero como PNG, probablemente no vería ninguna diferencia. Este es el ideal, ya que ambos formatos de imagen tienen como objetivo reproducir la mejor imagen posible para la web. Sin embargo, existen diferentes casos de uso y técnicas de optimización que debe tener en cuenta.

En este artículo, compararemos JPEG y PNG y le diremos cuándo debe usar cada formato de imagen. Sin embargo, primero vamos a presentarle cada tipo de archivo.

La diferencia entre JPEG y PNG

En la superficie (en un sentido literal), no hay diferencia entre JPEG y PNG. En otras palabras, si colocamos dos imágenes y le pedimos que elija cuál es JPEG y cuál PNG, la mayoría de las veces no podrá decirlo. Por ejemplo, toma la siguiente imagen:

Una mariposa.

¿Puede tomar una decisión sobre si esta mariposa mormona escarlata es una imagen JPEG o PNG? Por supuesto, sin un marco de referencia no se puede hacer una comparación:

Otra imagen de la misma mariposa.

Hay diferencias definidas, aunque no va a hacer una gran diferencia en este caso. Mientras intenta decidir (sin mirar las herramientas de desarrollo de su navegador), hay algunos detalles técnicos que podemos compartir:

  • El Grupo Conjunto de Expertos Fotográficos (JPEG) El formato de archivo ofrece compresión con pérdida de imágenes digitales. Esto significa que la calidad de la imagen se nota si el equilibrio entre esto y el tamaño del archivo oscila demasiado. Los archivos JPEG son archivos ‘planos’. En otras palabras, no pueden mostrar transparencia dentro de un archivo. Si bien puede ajustar el nivel de compresión, incluso en su mejor configuración, un JPEG será un archivo de 8 bits, lo que afecta el rango dinámico. Además, un archivo JPEG suele incluir un perfil de color, que indica a los monitores cómo mostrar los colores que contiene.
  • A diferencia de, Gráficos de red portátiles (PNG) las imágenes son archivos listos para la web. Es un formato más dinámico que JPEG, con la capacidad de generar archivos de 24 bits. También es un formato ‘sin pérdidas’, lo que significa que puede duplicarlo sin degradar la calidad de la imagen. Sin embargo, no puede ajustar la compresión de los archivos PNG y no hay un perfil de color. A pesar de esto, un PNG es perfecto para la web, según sus especificaciones técnicas.

Parece claro: los PNG se adaptan a la web y los JPEG no. Bueno, esta no es la historia completa. Cada tipo de archivo es ideal para ciertas aplicaciones. A continuación, los comentaremos.

JPEG vs PNG: cuándo debes usar cada uno

La web saca lo mejor de los archivos JPEG y PNG. De hecho, encajan de una manera agradable sin mucho cruce. Como un fragmento de sonido útil, aquí es cuando debe usar JPEG vs PNG:

Si desea mostrar una fotografía, utilice JPEG. Para cualquier otro archivo, especialmente gráficos digitales, use PNG.

Sin embargo, este consejo no es cierto para todas las situaciones (aunque es relevante para casi todos los casos). Por ejemplo, si combina dibujos digitales con imágenes de stock, tanto JPEG como PNG serán técnicamente incorrectos. Más adelante, tendrá más conocimiento para tomar una decisión correcta, aunque hay algunos otros consejos para darle.

Por ejemplo, si tiene previsto copiar imágenes, utilice un formato de archivo diferente al JPEG. Esto se debe a que los formatos de compresión con pérdida solo reconstruyen una versión aproximada del archivo. Por el contrario, PNG es una reproducción 1:1 porque ofrece compresión sin pérdidas.

Además, si desea cambiar el tamaño de su imagen una vez que la guarde, use JPEG ya que esto maneja bien la escala. Los PNG usan una estructura de codificación diferente, que se degrada una vez que cambias las dimensiones (u otros atributos técnicos).

Otros formatos de imagen que debe conocer

Por supuesto, JPEG vs PNG no es la única comparación de formato de archivo de imagen a considerar. Hay muchos otros tipos de archivos que compiten por la atención y tienen otros casos de uso:

  • Formato de interfaz gráfica (GIF). Si publica un meme o un video de reacción en Twitter que anima, es un GIF. De hecho, PNG buscó reemplazar los archivos GIF en su especificación original, y ambos ofrecen capas de transparencia.
  • Formato de archivo de imagen etiquetado (TIFF). Esta formato de archivo basado en ráster es ideal para imprimir debido a su compatibilidad con espacios de color CMYK.
  • Formato de imagen sin procesar (RAW). Solo usarás esto si eres fotografo, y es exclusivo de la cámara que utilice. Si bien puede ver archivos RAW en su computadora, necesita un software dedicado para verlos. Los tamaños de archivo son astronómicos, porque los datos están completos. De hecho, los formatos RAW no son imágenes, sino datos que, cuando están codificados, representan la imagen.
  • Archivo de imagen de alta eficiencia (HEIF). Este es el formato de archivo primario de dispositivos iOS. Ofrece mejor compresión y tamaño de archivo que JPEG, y puede manejar muchos formatos multimedia diferentes.

Si bien cada uno de estos archivos de imagen se usará en la web (con la excepción de los archivos RAW con respecto a la visualización), JPEG frente a PNG aún domina. Ambos tienen casos de uso específicos para los cuales los pros y los contras se equilibran bien.

Cómo preparar tus imágenes para subirlas (de 3 maneras)

A pesar de que JPEG frente a PNG resulta ser un empate con respecto a la calidad de visualización final, debe manejar cada formato de una manera diferente para aprovecharlo al máximo. Hay tres áreas en las que puede afectar el tamaño del archivo, la calidad y la preparación general de sus imágenes:

Como era de esperar, hay un buen equilibrio aquí. Comencemos con las dimensiones de su imagen.

1. Establezca sus dimensiones

Las dimensiones de una imagen son más importantes para el usuario final que cualquier otro punto de la cadena. Esto se debe a que el navegador tiene que cargar la imagen y un archivo grande erosionará la experiencia del usuario (UX). Sin embargo, esta no es la única consideración. Por supuesto, la calidad también es clave. Si decide hacer una imagen de tamaño pequeño, afectará la calidad de la imagen final (más para los archivos JPEG que para los PNG).

La respuesta es dar en el clavo en algunas áreas, comenzando con las dimensiones de la imagen. Como regla general, desea que sus imágenes sean lo suficientemente grandes para que puedan transmitir los detalles que necesita. Hay un punto de exageración en algún lugar que es diferente según la plataforma de destino y la imagen en sí.

Configuración de las dimensiones de la imagen en Apple Preview.

Sensor de cultivo moderno y fotograma completo cámaras digitales puede producir imágenes con dimensiones predeterminadas de alrededor de 6000 px x 3000 px (aunque existen grandes diferencias entre las cámaras). Por el contrario, las imágenes con el «borde largo» de alrededor de 2000 píxeles son comunes en las redes sociales. Tenga en cuenta que esto es para mostrar en la ventana de visualización completa de un dispositivo.

Para las imágenes de blog, esta regla general de 2000 píxeles podría ser incluso tan baja como 1000 píxeles. Esto también tiene en cuenta las imágenes de alta definición o ‘Retina’. A menudo necesitan el doble de dimensiones para mostrarse tan nítidos en pantallas de alta definición. De hecho, la resolución es un buen lugar para dirigirse a continuación.

2. Establezca la resolución correcta

Uno de los elementos básicos de las pantallas digitales son los píxeles. Estos pequeños puntos forman toda la pantalla, aunque los píxeles no tienen un tamaño uniforme. Debido a esto, también debemos considerar la resolución al preparar nuestras imágenes JPEG y PNG.

Usamos píxeles por pulgada (PPI) para analizar cuántos píxeles caben en una pantalla. También puede expresar esto en centímetros o como ‘puntos’. Este último es para formatos de impresión físicay los círculos de diseño gráfico usan DPI a menudo. Como tal, escuchará que se usa de manera intercambiable, aunque PPI es el término correcto.

Si bien la especificación de imagen PNG usa 72 PPI como su resolución de diseño óptima, esto no tendría en cuenta las pantallas modernas de alta definición. Si bien puede duplicar las dimensiones de una imagen para que sea nítida en todas las pantallas, también puede hacer lo mismo con la resolución. Por ejemplo, tome esta captura de pantalla del escritorio macOS Big Sur:

Una captura de pantalla usando una alta resolución.

Es un PNG, con 1000 píxeles en el borde largo (en este caso, la parte superior e inferior). Sin embargo, usa 144 PPI, aunque hay algo de «magia» de carga que convierte la resolución a 72 PPI al cargar a WordPress.

Tanto las imágenes PNG como las JPEG también pueden usar PPI mucho más altos: las resoluciones listas para imprimir son de alrededor de 300 DPI/PPI. Además, muchas imágenes de sitios de fotos de stock como pixabay se descargará usando 300 PPI:

Un pájaro garceta.

Como tal, reducir esto preparará mejor sus imágenes para la web y sus diversas pantallas.

3. Optimice sus imágenes usando compresión

No tenemos que contarte mucho sobre la optimización de imágenes. Es un tema que puede encontrar en otras partes del blog, y casi todos los usuarios de WordPress sabrán cómo optimizar las imágenes antes o durante el proceso de carga.

El concepto general es que se aplica compresión adicional a las imágenes, a menudo con pérdida. Esta lo hace afectan la calidad de la imagen, y se nota si realiza cambios drásticos en las dimensiones y la resolución antes de aplicar una gran compresión con pérdida.

Una imagen demasiado comprimida y mal optimizada.
Puede ver que se nota una degradación de la imagen en forma de ‘bandas de color’, un artefacto revelador de una mala compresión.

Estos artefactos tienen que ser mínimos para presentar bien las imágenes. Debido a esto, hay muchas herramientas disponibles para hacer el trabajo. La más accesible es TinyPNG, aunque también comprime archivos JPEG:

La página de inicio de TinyPNG.

Sin embargo, la compresión que aplica es suave en algunas imágenes, lo que podría no reducir el tamaño del archivo lo suficiente. Un servicio como ShortPixel tiene disponible un formato agresivo de compresión con pérdida, mientras que su compresión Glossy hace un trabajo admirable en comparación con TinyPNG.

La herramienta ShortPixel.

La conclusión aquí es que debe equilibrar el nivel de compresión tanto con el tamaño del archivo como con todos los demás elementos de la imagen. En la siguiente sección, discutiremos el mejor enfoque a seguir.

JPEG vs PNG: cómo aprovechar al máximo cada formato

A pesar de las diferencias en los formatos de archivo, la naturaleza de navegar por la web significa que puede reducir la preparación de sus imágenes a lo siguiente:

  • Utilice dimensiones entre 1000 y 2048 píxeles en el borde largo.
  • Establezca una resolución de 144 PPI para todas sus imágenes, para asegurarse de que se muestren nítidas y claras en todas las pantallas.
  • Aplique una compresión sutil a través de la optimización de la imagen para ayudar a reducir el tamaño del archivo. Teniendo todo en cuenta, la mayoría de las imágenes tendrán un tamaño de entre 100 y 200 kb.

Hay un poco más aquí basado en formatos de archivo específicos:

  • Para los archivos PNG, la reducción de las dimensiones podría degradar demasiado la calidad de la imagen. La idea aquí es mantener la resolución lo más alta posible para mitigar esos factores.
  • Los archivos JPEG no resisten la copia, ya que cada duplicación está más degradada que la anterior. Si puede controlar de dónde proviene el JPEG (por ejemplo, si tomó la fotografía), cree un JPEG a partir de un archivo TIFF o RAW para conservar la calidad dentro de la imagen.
  • Según nuestra experiencia, los archivos JPEG no se comprimen tan bien como otros formatos de archivo. Esto significa que es importante preparar y optimizar esas imágenes antes de pasar a la etapa de compresión.

Por ahora, tú…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *