# PNG o JPG: qué formato de imagen usar y cuándo [Canonical HTML page](https://gradiently.design/es/guide/png-vs-jpeg) Un formato conserva cada píxel; el otro descarta detalle para ocupar poco. Saber qué detalle se descarta te dice cuál elegir, siempre. ## The short version - PNG es un formato sin pérdida, así que conserva cada píxel exactamente, mientras que JPG es con pérdida y descarta el detalle que el ojo tiene menos probabilidades de notar. - Usa PNG para texto, logotipos, capturas de pantalla, color plano y todo lo que necesite un fondo transparente. - Usa JPG para fotografías, donde su compresión cuesta de ver y el archivo es varias veces más pequeño. - JPG no admite transparencia y tiende a mostrar bloques y bandas en los degradados suaves y alrededor de las letras nítidas. - Las redes sociales recomprimen todo lo que subes, así que partir de un PNG limpio o un JPG de alta calidad le deja a su compresión menos que estropear. La respuesta corta a **PNG o JPG**: usa PNG para todo lo que tenga texto, logotipos, color plano, bordes nítidos o fondo transparente, y JPG para fotografías. PNG es sin pérdida, así que cada píxel que exportas es el píxel que llega. JPG es con pérdida: descarta detalle para que el archivo sea pequeño, y el detalle que descarta es justo el que hace nítidas las letras y suaves los degradados. Una foto disimula bien esa pérdida. Un titular sobre un degradado, no. ## La diferencia entre PNG y JPG Los dos formatos guardan una cuadrícula de píxeles, así que ninguno se amplía sin perder nitidez. Lo que los separa es cómo comprimen esa cuadrícula en un archivo. | Propiedad | PNG | JPG (JPEG) | | --- | --- | --- | | Compresión | Sin pérdida: no se descarta nada | Con pérdida: se descarta detalle para ahorrar espacio | | Transparencia | Sí, un canal alfa completo | No, las zonas transparentes se vuelven un color sólido | | Ideal para | Texto, logotipos, capturas, color plano, degradados | Fotografías y diseños con mucha foto | | Tamaño de archivo | Mayor en fotos, pequeño en gráficos planos | Pequeño en fotos, ajustable con la calidad | | Volver a guardar | Seguro, sin pérdida cada vez | Cada guardado pierde un poco más | | Color | Hasta 16 bits por canal, sRGB en la web | 8 bits por canal, sRGB en la web | JPG y JPEG son el mismo formato. La extensión de tres letras es una herencia de los sistemas de archivos antiguos. JPG funciona dividiendo la imagen en cuadraditos de 8×8 píxeles y simplificando después el color y el detalle fino dentro de cada uno. En una foto llena de textura esa simplificación desaparece entre el ruido. En un degradado suave o en el borde de una letra, aparece como bloques tenues, halos emborronados y bandas de color escalonadas. ## Cuándo usar PNG - **Gráficos con mucho texto**: tarjetas de citas, anuncios, carruseles, diapositivas. - **Logotipos e iconos**, sobre todo sobre un [fondo transparente](https://gradiently.design/es/guide/transparent-background). - **Capturas de pantalla** de interfaces, donde JPG emborrona la letra pequeña. - **Degradados y color plano**, que muestran bandas y bloques con la compresión JPG. - **Archivos maestros** que volverás a editar, para no perder calidad en cada guardado. Una publicación vertical para redes que dice Abrimos tarde los viernes, con tipografía nítida sobre un degradado suave Una publicación de texto sobre un degradado exportada como PNG: letras nítidas, sin bandas. La misma publicación vertical, usada para mostrar dónde aparecen los artefactos JPEG alrededor de las letras y en las zonas oscuras del degradado Guardada como un JPG muy comprimido, aquí es donde aparecen primero los artefactos: halos alrededor de las letras y escalones en las esquinas oscuras. ## Cuándo usar JPG Usa JPG para fotografías: fotos de producto, retratos, viajes, comida. Las fotos reales están llenas de grano y textura, que enmascaran la compresión, y un JPG con una calidad de entre 80 y 85 suele verse idéntico al original con una fracción del tamaño. Una foto grande en PNG puede pesar fácilmente varias veces más sin ninguna ganancia visible. JPG también encaja con diseños que son casi todo foto con un poco de texto, siempre que el texto sea grande. Si el texto es pequeño o fino, o va sobre un cielo liso, exporta en PNG, o prueba los dos y compáralos al 100% de zoom. ## PNG o JPG para redes sociales Instagram, Facebook, X y LinkedIn recomprimen todo lo que subes, normalmente a JPG. Parece un motivo para despreocuparse, pero es justo lo contrario: la compresión se acumula. Un JPG que ya estaba comprimido se comprime otra vez, y los artefactos se duplican. Dale a la plataforma el archivo más limpio que puedas, al tamaño exacto que espera, para que no tenga nada que redimensionar. Los tamaños están en [tamaños de imagen para redes sociales](https://gradiently.design/es/guide/social-media-image-sizes). - Publicación de Instagram 1080×1350: 1080 × 1350 - Historia 1080×1920: 1080 × 1920 - Publicación de X 1600×900: 1600 × 900 - Publicación de LinkedIn 1200×1200: 1200 × 1200 Exporta exactamente a estos tamaños en píxeles. Una plataforma que tiene que reescalar tu imagen la recomprime con más fuerza. | Qué publicas | Exportar como | Por qué | | --- | --- | --- | | Tarjeta de cita, anuncio, diapositiva de carrusel | PNG | La tipografía y el color plano sobreviven mejor a la recompresión | | Fondo de degradado o material con palabras | PNG | Evita bandas en los tonos oscuros y sutiles | | Fotografía | JPG, calidad 85 a 90 | Visualmente idéntico, mucho más pequeño | | Logotipo para foto de perfil | PNG | Bordes limpios, y se puede reutilizar con transparencia | | Imagen Open Graph de un enlace | PNG o JPG | PNG para texto, JPG para foto; mantenlo por debajo de unos cientos de KB | ## PNG o JPG para un logotipo PNG, siempre, si necesitas un archivo de píxeles. Un logotipo son formas planas y bordes duros, que PNG comprime bien y JPG estropea, y un logotipo casi siempre necesita fondo transparente para ir sobre fotos, colores y el modo oscuro. Mejor aún, guarda el original en SVG, que se mantiene nítido a cualquier tamaño. [SVG o PNG](https://gradiently.design/es/guide/svg-vs-png) explica cuándo usar cada uno, y [tamaños de logotipo](https://gradiently.design/es/guide/logo-sizes) enumera los archivos que necesitas. ## Por qué los degradados muestran bandas en JPG Los degradados suaves son la prueba más dura para cualquier formato. Una transición oscura de casi negro a violeta profundo solo tiene unas pocas decenas de valores de color distintos con los que trabajar, y la compresión JPG funde los vecinos en franjas visibles. Eso es el [banding en degradados](https://gradiently.design/es/guide/gradient-banding), y es peor en fondos oscuros y de poco contraste. De casi negro a violeta profundo: `linear-gradient(180deg, #0b0a14 0%, #1a1233 45%, #2e1a5c 100%)` Una transición oscura y sutil como esta es justo lo que se llena de bandas en JPG. Expórtala en PNG o añade un poco de grano antes de exportar. ### Provoca banding - JPG con calidad 60 o inferior - Guardar un JPG, editarlo y volver a guardarlo - Una transición digital perfectamente limpia sin textura - Subir un tamaño que la plataforma tiene que reescalar ### Lo evita - PNG para todo lo que tenga un degradado - JPG a 90 o más si tienes que usar JPG - Una capa de grano ligera, que rompe los escalones - Exportar al tamaño exacto en píxeles de la plataforma El grano ayuda más que cualquier ajuste, porque le da al compresor una textura con la que trabajar en lugar de una tirada plana de colores casi idénticos. [Degradados con grano](https://gradiently.design/es/guide/grainy-gradients) muestra cuánto es suficiente. Los Marks de Gradiently llevan su propio grano y su propia luz, que es justo la textura que ayuda a un diseño con degradado a sobrevivir a la recompresión de una plataforma. ## ¿Y WebP y AVIF? En tu propia web, los formatos más nuevos ganan a los dos: WebP y AVIF pueden ser con o sin pérdida, admiten transparencia y ocupan menos con la misma calidad. Todos los navegadores actuales admiten WebP. Reserva PNG y JPG para subir a plataformas y compartir archivos, y lee [WebP frente a PNG y JPG](https://gradiently.design/es/guide/webp-images) antes de rehacer las imágenes de tu web. Para los ajustes en sí, consulta [comprimir imágenes sin estropear los degradados](https://gradiently.design/es/guide/image-compression). ## FAQ ### ¿PNG tiene mejor calidad que JPG? PNG es sin pérdida, así que nunca pierde calidad por mucho que lo guardes. En fotografías, un JPG de alta calidad se ve igual a simple vista y ocupa mucho menos, así que lo mejor depende del contenido. ### ¿Subo a Instagram en PNG o en JPG? PNG para texto, gráficos y degradados; JPG con calidad 85 o más para fotos. Instagram recomprime los dos, así que exporta al tamaño exacto que espera, como 1080×1350 para una publicación vertical. ### ¿JPG admite fondos transparentes? No. JPG no tiene canal alfa, así que las zonas transparentes se rellenan con un color sólido, normalmente blanco. Usa PNG, WebP o SVG para la transparencia. ### ¿Por qué mi degradado se ve a franjas después de guardarlo como JPG? La compresión JPG funde los colores parecidos de las transiciones suaves en bandas visibles. Exporta el diseño en PNG, sube la calidad del JPG a 90 o más, o añade una capa de grano ligera. ### ¿JPEG es lo mismo que JPG? Sí. Son el mismo formato; JPG es simplemente la versión de tres letras de la extensión.