¿Por qué?
Porque un formato de imagen incorrecto significa tamaños de archivo más grandes, lo que significa un sitio web más lento. Esto conlleva mayores tasas de rebote y menores tasas de conversión.
Dame unos minutos de tu tiempo y no volverás a cometer ese error. En su lugar, sabrás elegir el formato de imagen correcto y tu sitio cargará más rápido.
Regla básica: Guarda todo en JPEG excepto cuando no puedas
Si sólo vas sa recordar una cosa del artículo, que sea esto: guarda tus fotografías comunes como JPEG y tus gráficos y trasparencias como PNG.
Este tipo de imagen debe guardarse como JPEG.
Un gráfico como este debe guardarse como PNG.
Puedes pensarlo así: Si tiene muchos colores, gradientes y texturas diferentes, JPEG es el formato correcto.
Si tiene líneas afiladas, áreas claramente separadas de colores planos y texto, PNG es el camino a seguir.
¿Pero por qué importa?
Cuando comparas una imagen en JPEG con otra en PNG, es muy probable que no seas capaz de encontrar diferencias apreciables. Entonces, si no hay una diferencias apreciables, ¿por qué no sólo guardar todo como JPEG y hacer con él?
La respuesta es: compresión de imágenes.
La compresión de imágenes consiste en reducir el tamaño del archivo de una imagen tanto como sea posible, sin comprometer demasiado la calidad. Por regla general, a mayor compresión, archivo más pequeño y por lo tanto peor calidad de imagen. La buena compresión de imagen trata de encontrar una buena combinacíón entre tamaño del archivo y calidad de visualización.
Cuando estás en el PC está muy bien ver una imagen de alta resolución, el archivo no está comprimido y, como se guarda en el disco duro, se puede abrir en un instante. Pero si ese mismo archivo está en un sitio web, tiene que ser descargado. Incluso en una conexión rápida, los archivos de imagen grandes pueden tardar varios segundos en descargarse. Y cuando se trata de la velocidad del sitio web y las tasas de conversión, no tienes esos segundos de sobra..
Fuente
El gráfico anterior muestra como la gente abandonará su sitio web después de algunos segundos de tiempo de espera. Si tienes varias imágenes grandes en una página, es muy posible que estés perdiendo la mitad de tus visitantes antes incluso de que vean todo tu contenido
Echemos un vistazo a un ejemplo práctico de esto. Si guardamos una fotografía como esta en una resolución de 1080p en ambos formatos de imagen, esto es lo que recibimos:
La calidad de la imagen es casi idéntica, pero el formato de imagen incorrecto (PNG, en este caso) hace que el tamaño del archivo sea doble! Pero además las imágenes deben ser comprimidas para sitios web
Si quieres que te eche una mano puedes visitar mi página de diseño web y ver como trabajo, te ayudaré con todo este tipo de cuestiones.
Compresión de imágenes
Como he dicho antes, las imágenes deben ser comprimidas y en la compresión las diferencias entre JPEG y PNG se vuelven más claras.
JPEG utiliza un método de compresión que agrupa varios píxeles similares y difumina las líneas entre las cosas. Esto funciona bien para las fotografías, pero va fatal para gráficos y capturas de pantallas.
Si guardas una fotografía como PNG y la comprimes, todavía se verá bien. El problema aquí es el tamaño del archivo: una fotografía JPEG puede comprimirse a un tamaño de archivo pequeño sin mucha pérdida de calidad, mientras que el png siempre ocupa más.
PNG para gráficos nítidos
Ten en cuenta que si guardas un gráfico o una captura de pantalla como JPEG y lo comprimes mucho, puedes lograr un tamaño de archivo más pequeño que con un PNG comprimido, pero perderás bastante calidad. En este caso, debes elegir la calidad de imagen sobre el tamaño del archivo: el PNG se verá siempre más nítido y claro que JPEG a lgual tamaño de archivo.
Cómo comprimir tus imágenes
A continuación se ofrecen algunos servicios y herramientas que puede utilizar para la compresión de imágenes:
- Optimizador.io – Es el servicio que uso en mi web. Excelente compresión de imagen manteniendo una alta calidad de imagen.
- WP Smush – otro plugin de WordPress que auto-Comprime tus imágenes.
Ya conoces las razones y herramientas para reducir el tamaño y elegir el formato de imágenes en tu sitio web. No tienes excusa para que sea un sitio rápido y muy bonito!