¿Alguna vez te han dolido los ojos al leer un texto de 10 párrafos sin una triste imágen?. Las imágenes juegan un papel importante en nuestra vida. El dicho “una imagen vale más que mil palabras” tiene toda la razón, aunque como animales visuales que somos, estamos acostumbrados a leer texto, aunque nuestra primera atención la capte una imagen.
¿Cuál es el mejor formato de imagen para mi web?
No hay una respuesta correcta. No será lo mismo una web donde utilices imágenes de stock sin interés que si eres un fotógrafo que quiere mostrar sus mejores fotos. Deberemos tener en cuenta tanto el número de imágenes como el tamaño
Dependiendo del tipo de web y del objetivo de las imágenes recomendaremos uno u otro formato.
Vamos a repasar los formatos de imágenes más comunes y ver en que caso puede ser interesante utilizarlo.
JPG o JPGE
Uno de los formatos de imagen más comunes que se utilizan en internet. Es un formato de imagen que ocupa poco espacio y se carga y descarga fácilmente.
Se puede comprimir de manera sencilla para reducir más aún su peso, pero durante este proceso perderá calidad, lo que se conoce como lossy compression.
Este tipo de compresión generará una pérdida de calidad que será especialmente apreciable si las imágenes contienen textos.
Cuando es recomendable.
- Cuando tus imágenes no requieran de una calidad muy alta.
- Cuando tus imágenes no necesitan transparencias (este formato no acepta transparencias).
- Ideal para subir imágenes a redes sociales.
Nunca deberías utilizar este formato para logos o para imágenes que quieras mostrar con una calidad muy alta.
GIF
Únicamente es recomendable si por algún motivo necesitas que tus imágenes sean animadas. Generalmente son de baja calidad ya que únicamente soportan una paleta de 256 colores.
Es un formato que sólo deberías utilizar para añadir imágenes en redes sociales o en algún banner concreto de tu web.
En este post te contamos cuál es la mejor manera de comprimir gifs.
PNG
El archivo ganador para logos e iconos ya que su principal ventajas es que admite diferentes capas de transparencia.
Otro de los usos más habituales, es la elección de este formato para hacer capturas de pantalla, ya que es el formato que con mayor calidad es capaz de generar estas imágenes, haciendo que sea la mejor opción si tu web va a incluir capturas de pantalla (por ejemplo si tienes muchos tutoriales).
En La Vía Digital usamos este formato para todas las miniaturas de los post ya que al ser imágenes pequeñas (300px x 300px), no pesan demasiado aunque se utilice este formato en lugar de JPG.
Si vas a utilizar infografías o imágenes con texto, quedará mucho mejor con PNG que con otro tipo de formato de imagen web.
Comparación JPG vs PNG
La primera imagen es un archivo JPG que pesa 30 kb mientras que la segunda es un PNG que pesa 211 kb. Si comprimimos en PNG, su pero se reduce a la mitad y sigue teniendo la misma calidad, mientras que el JPG está comprimido al máximo.
En este ejemplo ocurre lo mismo. Aunque pueda parecer que no existen grandes diferencias, si utilizásemos unas imágenes mucho mayores, el texto en la imagen JPG empezaría a pixelarse. Para evitar esto, habría que utilizar un archivo JPG sin compirmir y con un peso de 132 kb como en el del ejemplo de abajo.
– Si tus imágenes no necesitan tener una calidad muy alta, sería más interesante utilizar JPG.
– Si por el contrario, necesitas calidad y quieres que los textos no empiecen a pixerlarse, te recomendamos PNG.
– Si tus fotos son de tus productos, y van a tener un fondo blanco (como en la mayoría de ecommerce, la mejor solución será PNG.
WEBP
Este formato de imagen fue desarrollado por Google con el fin de proporcionar un único formato de imagen capaz de adaptarse a diversos usos en diseño web.
Su principal ventaja es que acepta todo tipo de compresión sin perder calidad cosa que por ejemplo no ocurre con otros formatos.
Ofrece la misma calidad que una imagen JPG pero con un menor peso en mb
¿Por qué no se ha generalizado su uso?
Lamentablemente, este formato de imagen, a pesar de tener muchas ventajas sobre otros que hemos mencionado, no cuenta con el mismo grado de aceptación. Para que te hagas una idea, un GIF O JPG se verá bien en cualquier navegador en cualquiera de sus versiones (hasta en un internet explorer de hace 15 años).
Sin embargo, el formato WEBP no es compatible con algunos navegadores como por ejemplo safari, y la inmensa mayoría de versiones antiguas de un navegador no lo soportan. Esto ha hecho, que a pesar de ser promovido desde el propio Google, a día de hoy no sea tan utilizado.
Otro aspecto curioso, es que si alguien se descarga una imagen en formato WEBP, no podrá abrirla al no ser que tenga un software concreto.
Te recomendamos este formato en el caso de que la gran mayoría de tus usuarios utilicen un navegador compatible.
SVG
Uno de los últimos formatos en aparecer es el formato Scalable Vector Graphics (SVG), que es un formato de archivo de imagen vectorial. Una imagen vectorial, no está formada por píxeles, sino por vectores.
Es la mejor opción sobre los otros formatos de imagen, incluyendo JPG, GIF y PNG porque ofrece imágenes claras y nítidas a cualquier tamaño o resolución. Es decir, aunque le cambiemos el tamaño, la calidad va a ser la misma.
Esto se debe principalmente a que el formato de imagen SVG no tiene pérdidas como los formatos de imagen GIF y PNG.
Lamentablemente nunca a ser la mejor opción para fotos de productos, de hecho, verás que casi nunca se utilizan en fotos de productos, o de naturaleza porque son especialmente buenas para iconos y similares, pero no para el tipo de imágenes de un ecommerce.
Te dejamos un ejemplo de este tipo de imágenes que podrás encontrar en la web https://pixabay.com/es/images/search/svg/
Entonces, ¿qué formato de imágenes elijo?
Para dar con la tecla, tendrás que ir probando hasta encontrar el formato que cumpla con la calidad de imagen que creas necesaria.
Independientemente del formato, busca siempre comprimir imágenes (ya sea a través de un plugin, una web o cualquier programa de edición de imágenes).
Si tu web va a tener muchas imágenes, planteate utilizar un CDN para reducir el tiempo de carga de tus imágenes.
Por último, revisa frecuentemente la velocidad de carga no solo de tu web, sino de cualquier url para detectar aquellas donde las imágenes están afectando significativamente a la velocidad de carga.
Para ello puedes utilizar herramientas como Pingdom Tools
o GTmetrics
Esperamos que te haya resultado útil esta información para saber qué formato de imágenes deberías utilizar en tu web.