JPEG frente a PNG frente a GIF

Además de tomar una foto espectacular o crear un diseño maravilloso, es vital guardar su trabajo en el formato correcto.

No desea que el fondo blanco de su logotipo coloque el logotipo en un fondo de color, y ciertamente no desea tener una parte borrosa de su foto de alta resolución cuando la muestra en la página de su portafolio.

Este artículo le mostrará una guía rápida sobre los tres formatos de imagen (jpeg, gif y png) y cuándo es mejor utilizar cada método.

Nota: Las capturas de pantalla se tomaron de la versión para Mac de Adobe Photoshop CC 2021. Windows u otras versiones pueden tener un aspecto diferente.

Cuando guarde una imagen en Photoshop para usarla en la web, vaya al menú superior Expediente > Salva eso. Ahora, en la nueva versión de Photoshop, tendrá la opción de guardar en la nube o en la computadora.

Después de elegir la ubicación para guardar el archivo, puede elegir un formato. Como puede ver aquí, puede guardar la imagen como Photoshop, GIF, JPEG y muchos otros formatos.

JPEG (o JPG)

Entre los muchos formatos en los que puede guardar la imagen, jpeg es el formato más utilizado para fotos y este no es una excepción al guardar para la web. Cualquier imagen en color debe guardarse en este formato, donde el grado de compresión se puede aumentar tanto como sea posible para reducir el tamaño de la imagen sin perder calidad.

Sugerencias: una compresión de alrededor del 60-70% normalmente reduce el tamaño del archivo sin perder demasiados detalles.

GIF

Este formato es muy conocido por realizar mini animaciones. Puedes pensar en los gifs como lo opuesto a jpeg. Gif se usa generalmente para tipos, dibujos lineales y formas vectoriales. Sugeriría evitar guardar fotos o imágenes en color en este formato.

Los archivos GIF se comprimen por la cantidad de colores presentes en el archivo; el máximo utilizado es 256, pero puede guardar un gif como solo 2 colores, como una imagen con solo píxeles en blanco y negro, por ejemplo.

Cuando guarda una imagen como gif, también puede guardar la transparencia de la imagen, lo que en el diseño web significa que las imágenes pueden superponerse con otros elementos. No tomará colores semitransparentes como un archivo png, por lo que debe tener áreas completamente transparentes y colores opacos.

Las animaciones simples también se pueden guardar como gifs, donde hay 256 colores disponibles para cada marco. En las últimas versiones de Photoshop, todo el proceso de animación y fotograma se puede completar de principio a fin.

Puede ver cuadros de animación (Cronología) en Photoshop abriendo el panel Línea de tiempo en el menú superior Ventana > Cronología.

PNG

Si guarda un logotipo para un sitio web, png es la mejor opción. PNG se puede usar para transparencia donde gif y jpeg no pueden. El formato PNG puede mantener las áreas semitransparentes.

Esto podría usarse, por ejemplo, para crear un botón con una sombra. Con un botón opaco, un fondo transparente, pero con un tono semitransparente, este botón se puede colocar en una variedad de fondos.

Conclusión

Cada formato de imagen tiene sus propias ventajas y desventajas, elija el formato según su uso. JPEG es casi siempre una opción segura si su imagen tiene alta resolución y colores complejos. En este caso, GIF no es la mejor opción. PNG es ideal para gráficos vectoriales y cuando necesita un fondo transparente.

Scroll to Top