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, y eso afecta al posicionamiento en buscadores.
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. Dispone de versiones PNG8 y PNG24, en función del nº de bits de color… (hasta 256 o 16 millones de colores)
- GIF (Graphic Interchange Format), también relacionado con recursos como logos y animaciones, ya que este formato permite almacenar varios fotogramas y animarlos. Tiene buena compresión para una paleta reducida de colores (hasta 256), y admite transparencias (aparte de las animaciones anteriormente mencionadas). Está en desuso
- BMP, en desuso, almacena la imagen sin comprimir, así que ocupará mucho espacio en disco, y ralentizará su carga en nuestra página.
Formato Webp
Falta el más importante y moderno; el formato WebP (promovido por Google desde hace años), ¡que es aún más ligero, admite transparencias y tiene muy buena calidad, por lo que parece !el futuro de las imágenes en internet!
Principales Ventajas:
- Admite Compresión con y sin pérdida (ajuste de calidad de imagen).
- Admite transparencias
- Permite (al igual que gif) animaciones
- Incluye perfil de color incrustado en el propio archivo
- Incluye metadatos como XMP / EXIF
Inconvenientes: A pesar del tiempo que lleva en el mercado, aún hay plataformas y navegadores que no tienen un soporte de compatibilidad completo con este formato.
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 lenta; esta imagen en la web de un sitio ralentizaría el tiempo de 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:
- Abrimos la imagen con el software; hacemos clic en ARCHIVO> EXPORTAR.
- Elegimos la extensión JPEG o PNG según la necesidad.
- 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.
- 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
- …
Qué formato debo usar
Pues depende de tipo de imagen, de si necesita transparencia con el fondo (gif/png/webp), de si tiene muchos detalles (jpg/webp) o colores lisos (png8/gif) o, incluso, de si debe ser una imagen animada (webp/gif).
En realidad, la elección es bastante sencilla si te haces estas preguntas.