¿Sabes qué formato es mejor para un sitio web PNG o JPG? Al crear un sitio web, debemos asegurarnos de utilizar imágenes JPG y PNG en el contexto correcto. Pero, ¿cuál es la diferencia entre los dos y cuál deberíamos utilizar en nuestros propios diseños?
En este artículo de Ayuda Hosting, vamos a discutir qué formato es mejor para un sitio web, PNG o JPG, cómo se originaron y cómo usarlos de la manera más correcta.
Internet, tal como la conocemos hoy en día, surgió por primera vez en la década de 1990. Pero la historia de las imágenes listas para la web comienza cuatro años antes (1986).
Índice
- 1 Al principio existían las imágenes GIF
- 2 El formato PNG ofrecía colores y calidad mejorados
- 3 JPEG crea archivos de gran tamaño pero mucho más pequeños
- 4 Formatos de archivo de imagen con diferentes tipos de compresión
- 5 ¿Qué formato es mejor para un sitio web PNG o JPG?
- 6 Ambos tipos de archivos de imagen PNG y JPG son prácticos
Al principio existían las imágenes GIF
En los días del acceso telefónico, CompuServe fue el primer proveedor importante de servicios online que ofrecía correo electrónico y otros servicios para usuarios de computadoras personales en el hogar.
También ofrecían descargas de imágenes, pero como la mayoría de las personas usaban módems que funcionaban a una velocidad increíblemente lenta de 1.200 bits por segundo, existían limitaciones considerables en lo que podían ofrecer.
Steve Wilhite, trabajó como informático en CompuServe. Se le encomendó la tarea de encontrar una solución en la que se tome una imagen grande y reducir su tamaño de archivo. El formato de intercambio de gráficos, o GIF, fue el resultado de este trabajo.
Basado en el algoritmo LZW, el formato GIF podría tomar una imagen grande y reducirla a un tamaño de archivo pequeño. A diferencia del formato de archivo XBM, otro tipo popular en ese momento que se limitaba a los colores blanco y negro, podría capturar la gama de colores de 256 bits de 8 bits que era el estándar.
Los GIF reinan ya que el formato de imagen web más utilizado se derrumbaría a mediados de los 90. Las computadoras e Internet habían avanzado, y las capacidades de imagen del formato GIF no podían adaptarse a estos avances tecnológicos.
También estaba la cuestión de las licencias. El titular de la patente del algoritmo LZW decidió cobrar a quienes usaban GIF en sus aplicaciones. Los PNG estaban libres de patentes, lo que ayudó a su adopción generalizada.
El formato PNG ofrecía colores y calidad mejorados
PNG son las siglas de Portable Networks Graphics y es un formato de archivo basado en raster o matriz de celdas. A diferencia de las escasas limitaciones de 8 bits del tipo de archivo GIF, ofrece 24 bits de color espectacular. Este fue un gran avance a mediados de los 90.
Los PNG pudieron ofrecer un universo de sombras y matices, con una resolución más alta a través de la compresión de datos sin pérdidas. Los archivos de gráficos de red portátiles de hoy en día también pueden funcionar a 48 bits e incluso hasta 64 bits. Los PNG se han mantenido y siguen siendo un formato popular que se encuentra ampliamente difundido en la web.
JPEG crea archivos de gran tamaño pero mucho más pequeños
Así como los PNG todavía se utilizan ampliamente, los archivos JPEG siguen siendo frecuentes en las publicaciones web. El formato de archivo JPEG, también conocido como JPG, que es la abreviatura de Joint Photographic Experts Group es anterior a PNG, se lanzó en 1992, pero su desarrollo se remonta a 1986.
Las imágenes contienen una gran cantidad de datos. Mucha de esta información visual es redundante. Los JPG se comprimen promediando la información de color y disminuyendo la cantidad de datos repetidos. Este tipo de compresión se conoce como compresión con pérdida.
Los JPG también eran una mejor alternativa a los GIF. Podrían capturar mejores imágenes complejas como fotos. Además, se reducen a un tamaño de archivo manejable con mejor resolución que los GIF.
Formatos de archivo de imagen con diferentes tipos de compresión
Entonces, ¿cuál es la diferencia entre la compresión sin pérdidas y la compresión con pérdidas? La compresión sin pérdida reduce el tamaño de un archivo y mantiene intacta su apariencia original. La compresión con pérdidas ofrece un mayor nivel de compresión del tamaño de archivo, pero a expensas de una pérdida en la calidad de la imagen.
1. Compresión sin perdidas
PNG es un tipo de archivo de imagen sin pérdidas, lo que significa que los archivos que se someten a esta forma de compresión son casi idénticos a las imágenes de origen. Mediante el filtrado y la codificación, se vuelven a ensamblar datos de la imagen en forma eficaz. Aunque los archivos PNG se han comprimido, siguen siendo mucho más grandes que los que utilizan compresión con pérdida.
2. Compresión con pérdida
La compresión con pérdida reduce los archivos al minimizar la repetición de datos. Con las redundancias eliminadas, hay mucha menos información de la imagen, lo que da como resultado, tamaños de archivo mucho más pequeños. El formato JPEG utiliza compresión con pérdida.
Con menos datos disponibles, las imágenes pueden verse afectadas por la calidad. Los colores de una imagen pueden estar apagados, los detalles más finos pueden perderse. Esto suena mal, pero la persona promedio que se desplaza por un sitio web no percibe cada píxel que ve.
Las imágenes JPG brindan una representación lo suficientemente precisa como para que la mayoría de las personas no noten sus sutiles defectos.
¿Qué formato es mejor para un sitio web PNG o JPG?
Ambos tipos de archivos tienen su lugar apropiado en el diseño web. La elección de archivos jpeg o png depende del contenido de las imágenes.
¿Cómo usar los archivos JPG?
Veamos a continuación, algunas ventajas y desventajas de los archivos JPG.
- Ventajas. Los archivos JPEG son más adecuados para imágenes que, de otro modo, serían gigantes sin compresión. Las imágenes que no tienen fondos transparentes, muchos colores diferentes y detalles, como fotografías, funcionan mejor para el tipo de archivo de imagen JPG.
- Desventajas. Si deseamos que las imágenes tengan fondos transparentes, no tendremos suerte con los JPG, sin importar lo que les hagamos con Photoshop. Tendremos que usar un PNG, que tiene un canal completo dedicado a la transparencia. Los archivos JPEG siempre tienen un color de fondo plano.
Si existen muchas texturas y otros detalles finos, un JPG tiene el potencial de aplastar estos píxeles. Puede ser complicado trabajar con imágenes que tienen degradados de fondo y traducirlas a JPG sin que sufran las bandas de colores después de comprimirlas.
Para imágenes complejas, es posible que debamos experimentar con diferentes configuraciones para que nuestras imágenes se vean bien.
Y al igual que hacer una fotocopia de una fotocopia de una fotocopia, cuanto más comprimamos la misma imagen JPEG, peor se verá.
¿Cómo utilizar los archivos PNG?
Ahora, veamos algunas ventajas y desventajas de los archivos PNG.
- Ventajas. Como se mencionó anteriormente, los archivos PNG pueden tener fondos transparentes como la imagen mostrada arriba. Esto los hace muy útiles en diferentes contextos de diseño web.
También son un mejor formato de imagen para reproducir colores vibrantes y asegurarse de que las líneas se mantengan nítidas, lo que hace que los PNG sean el formato preferido para ilustraciones, tipografía y logotipos de empresas.
PNG es un formato de archivo excelente para wireframes donde hay mucho texto y líneas rectas. También funcionan muy bien para capturas de pantalla. Este formato de imagen conserva su alta calidad incluso cuando está comprimido, y funciona tanto para imágenes complicadas como simples.
Las ilustraciones, como esta creada por Dmitry Mòói , y otras imágenes con líneas limpias y colores intensos se muestran mejor cuando se guardan como PNG.
- Desventajas. Dado que los PNG ofrecen la mejor resolución, ¿por qué no utilizarlos en todas partes? El tamaño del archivo es el problema. Un diseño web repleto de archivos PNG, en lugar de unos pocos, se cargará mucho más lento que si usamos JPEG.
Una página que no se carga rápidamente puede dañar el SEO de un sitio web, así como hacer que las personas reboten mientras esperan que aparezcan las imágenes. Esto es especialmente cierto cuando los tamaños de los archivos de imagen superan los 300 KB.
Optimización de imágenes para un diseño receptivo
Un sitio web debe ofrecer una experiencia coherente sin importar en qué pantalla se esté utilizando. Las imágenes deben ampliarse o reducirse según el dispositivo.
El diseño receptivo o responsivo es un conjunto de pautas centradas en crear una experiencia de usuario uniforme para cualquiera que se desplace por un sitio web. Cualquiera que sea el tamaño o la resolución de la pantalla, es necesario optimizar los tipos de archivos de imagen JPG y PNG.
Si tenemos un buen tema, no tenemos que preocuparnos por realizar un seguimiento a las varias versiones del mismo archivo. Detrás de escena, se comprimirán, escalarán y optimizarán todas las imágenes automáticamente, asegurándonos de que se muestren correctamente en cualquier tamaño de pantalla de los dispositivos. Todo lo que necesitamos hacer es cargar las imágenes del proyecto y nuestro tema se encargará del resto.
Un error que cometen muchos diseñadores nuevos es incluir texto como parte de una imagen. Existen algunos casos en los que es posible que debamos hacer esto, pero no es frecuente. La integración de texto en imágenes puede causar todo tipo de comportamientos extraños cuando están comprimidas o cuando se amplían o reducen. Tampoco es una buena práctica de accesibilidad.
Como quienes usan lectores de pantalla no podrán saber lo que se dice en la imagen. Es por eso que el texto alternativo es extremadamente importante para todas las imágenes de nuestro sitio web, algo que podemos añadir fácilmente en un buen Sistema de gestión de contenidos o CMS.
En lugar de utilizar imágenes con texto, podemos utilizar tipografía generada en la web. Responde muy bien y será legible sin importar en qué dispositivo lo vean.
Resguardo de los archivos originales en un lugar seguro
Ya sea que estemos comprimiendo nuestros archivos en JPG o PNG, los datos de las imágenes originales cambiarán para siempre. Es importante mantener nuestros archivos de imagen originales separados de los archivos que estamos preparando para un proyecto de diseño web. Es posible que los necesitemos en el futuro, y si todo lo que tenemos son versiones alteradas, esto nos puede ocasionar complicaciones a futuro.
Otro error común para los diseñadores web novatos es tener una imagen editada con múltiples capas y guardarla en un tipo de archivo comprimido sin mantener una versión sin comprimir. Debemos asegurarnos de conservar nuestros archivos con las capas que los acompañan en algo como un documento de PhotoShop o PSD para que podamos ingresar y realizar cambios en estas capas si es necesario.
Ambos tipos de archivos de imagen PNG y JPG son prácticos
La rapidez con la que se carga un sitio web y el aspecto de los gráficos y otras imágenes depende del uso de los formatos de archivo de imagen adecuados.
Es fácil confundirse sobre si guardar un archivo como JPG o PNG.
Al igual que todo en el diseño web, existen excepciones a estas reglas, pero estas pautas deberían brindarnos una comprensión lo suficientemente buena como para usar cualquiera de estos formatos de archivo de imagen con confianza.
Esperamos que este artículo sobre qué formato es mejor para un sitio web PNG o JPG, les haya resultado útil. Más información sobre este y otros temas en Ayuda Hosting.
