Optimización de imágenes

En este artículo le sugerimos las mejores prácticas a adoptar al manejar imágenes, ya sea que esté comenzando a crear un sitio o administrar uno a diario.

Un sitio con imágenes grandes y hermosas será más atractivo que un sitio con solo texto. Así, podemos tender a añadir fotografías y gráficas en cantidad, olvidándonos de un elemento imprescindible: ¡cuando seleccionamos una imagen, no comprobamos su tamaño ni peso, sobre todo!

¿Cuál es el problema? Ralentizamos nuestra página web, y por lo tanto hacemos que sus usuarios esperen y tengan una mala experiencia durante la visita.

Por eso, veremos cómo optimizar sus imágenes para una carga y una calidad «aceptables».

Formatos de imágenes más habituales

Los formatos básicos más habituales son:

  • JPEG (JPG/JPEG), asociado a fotos, con un formato de alta compresión, más ligero que PNG.
  • PNG, que se asocia más a imágenes como logotipos, pictogramas… Su compresión es menor. Y a diferencia de jpeg, conserva la transparencia.
  • BMP, en desuso, almacena la imagen sin comprimir, así que ocupará mucho espacio en disco, y ralentizará su carga en nuestra página.

Están surgiendo nuevos formatos como el WebP promovido por Google, ¡que es aún más ligero y tiene buena calidad, por lo que parece el futuro de las imágenes en internet!

El tamaño y peso de las imágenes

En la web, medimos en píxeles y no en cm, y podemos decir que el ancho ideal para una imagen es 1920px. De hecho, la resolución del tamaño de la pantalla de un PC de escritorio corresponde a 1920 x 1080 px en 72 dpi (esta es la resolución FULLHD).

No nos engañemos, una imagen que ocupe todo el ancho de una pantalla de 20 pulgadas se ve «de lujo» a esta resolución pero, para el 90% del resto de usuarios, una imagen a 1080px también.

Cuantas veces hemos visto esas imágenes demasiado grandes, de 6000 X 4000 píxeles, por ejemplo, que deben reducirse 4 o 5 veces para entrar en una pantalla grande, algo bastante absurdo.

Esto hace la carga demasiado pesada; esta imagen en la web de un sitio ralentizaría su carga, empeorando la esperiencia, sin ninguna ventaja.

¿Cómo cambiamos el tamaño de una imagen?

Para poder redimensionar tu imagen tendrás que pasar por un software de retoque, y hay miles, algunos incluso servicios online pero, por mencionar los clásicos:

  • Adobe Photoshop es el más popular, pero de pago, tal vez no lo poseas.
  • Gimp es un software libre de regalías y una buena alternativa.
  • Opción entre las 2, Affinity Photo, que ofrece una suscripción pagadera una vez, la licencia le pertenece de por vida.

Abra su archivo en el software o servicio cloud, escojamos en nuevo ancho+alto, su calidad y exportaremos nuestra imagen en un nuevo formato y tamaño, reduciendo su peso (algo que sus usuarios le agradecerán).

Ejemplo con Affinity Photo

Tomaremos el ejemplo Affinity Photo pero el proceso es básicamente el mismo independientemente del software:

  1. Abrimos la imagen con el software; hacemos clic en ARCHIVO> EXPORTAR.
  2. Elegimos la extensión JPEG o PNG según la necesidad.
  3. Te tenemos 1 920 para el ancho. Pulsamos Enter y la altura se corrige automáticamente: se cierra el candado, por lo que se conserva la relación de imagen.
  4. Exportamos: Y aquí está la nueva imagen. Le damos otro nombre para no sobrescribir el archivo original.

La compresión y redimensionamiento

Finalmente, el paso de compresión, que arañará los últimos Kbytes innecesarios y reducirá considerablemente la imagen. Un paso muy eficaz y por tanto recomendado.

Existe un software muy fácil de usar en Mac: Image Optim. Esto es simplemente una macro: no tiene nada que hacer, excepto arrastrar el archivo en cuestión, ¡el software hace el resto!, mientras en windows, tiene «FileOptimize», por ejemplo.

A partir de una imagen de 3 MB, obtenemos una imagen mucho más ligera de 300 KB.

Conclusiónes

Si utiliza un CMS como WordPress, tenga en cuenta que existen plugins que optimizarán el tamaño de sus imágenes sobre la marcha, como Imagify o Smushit y, para los demás, servicios online como:

  • Optimizilla
  • TinyPNG
  • iLoveIMG
  • Kraken.io

Para más información, no dude en contactarnos.