Creo que a estas alturas, nadie duda de que una web con imágenes es más atractiva visualmente y tiene muchos efectos positivos. Todos hemos escuchado eso de:
«Una imagen vale más que mil palabras»
Mediante las imágenes, podemos transmitir y captar la atención del usuario mucho más que sólo con palabras, nuestra imagen corporativa puede hacer que los clientes nos identifiquen con sólo una imagen, etc.
Ahora bien, usar imágenes no optimizadas en nuestra web, puede echar a perder todos los beneficios su uso, perjudicarnos en otros aspectos, como es el SEO, e incluso hacernos perder dinero.
Y es que usar en nuestra web, imágenes mal optimizadas e incluso sin optimizar, puede generar una mala experiencia de uso a nuestros usuarios, ya que la web será lenta, y esto puede hacer que salgan de allí, generando rebote lo que nos puede hacer perder posibles clientes y ventas.
Otro aspecto a tener en cuenta es que a Google no le gustan las páginas web que cargan lento y podría relegarnos a las últimas posiciones de su buscador, haciéndonos perder visibilidad, y de esta forma, posibles clientes.
Vale, ¿Pero qué es optimizar una imágen?
El tamaño importa…
Bien, lo primero, es utilizar imágenes del tamaño adecuado a como se van a visualizar, es decir, si en nuestra web, una imagen se va a mostrar a un tamaño de 900×600 pixeles, no la subamos a 4000×3000.
Esto que podríamos pensar como algo obvio, ocurre muy frecuentemente, son muchísimos los sitios web que usan las imágenes con tamaños no adecuados.
… y el peso también
Otro factor fundamental al usar una imagen para nuestra web, es su peso, el cual debe ser el mínimo posible, pero sin sacrificar la calidad de la imagen, y con peso, nos referimos al tamaño del archivo, medido en kilobytes.
Según un estudio de Http Archive, el peso de las imágenes es el 47% aproximadamente del total de una web, a fecha de diciembre de 2020. De ahí la importancia de usar imágenes lo más ligeras posible, a fin de hacer la carga lo más rápido posible y que el usuario tenga una buena experiencia de uso de nuestra web.
Aunque es algo muy relativo, el peso ideal para que una imagen sea usada en una web, debe rondar los 100KB.
Y ahora, ¿Cómo optimizo una imagen para mi web?
Métodos de compresión
Lo primero que debemos saber, es que existen dos formas de comprimir las imágenes:
- Lossy o compresión con pérdida: Con este método que elimina datos de la imagen, hasta casi el punto que queramos, podemos reducir mucho el tamaño de un archivo pero también perderemos calidad, hay que usarlo en la justa medida para encontrar el equilibrio entre peso y calidad. Lo podemos hacer por ejemplo con Photoshop o con aplicaciones online donde nos permitirá elegir el porcentaje de peso que queremos reducir.
- Lossless o compresión sin pérdida: Este método lo que hace es eliminar metadatos de la imagen, información que pueda llevar el archivo, tales como autor, descripción, etiquetas, etc. Usando este método de compresión, no afectamos a la calidad de la imagen, pero por contra, el peso que conseguimos reducir es menor.
Formatos de imagen
Ahora que ya conoces los métodos de compresión de archivos más habituales, debes saber también los formatos de imagen que debes usar para tu web:
- PNG: Es un formato de imagen que no pierde calidad, pero por el contrario tendrán mayor peso, y es más difícil de comprimir. Son ideales para logotipos, iconos e imágenes con fondos transparentes.
- JPEG: Es usado para imágenes grandes, ya que es bastante más fácil de reducir su peso que el PNG, ya que podemos ajustar mucho su calidad.
- GIF: Este formato es el que se usa cuando queremos poner imágenes animadas en nuestra web.
Adicionalmente a esto, te podrás encontrar con formatos más modernos como el JPEG XR y el WebP, pero como hemos dicho, son algo nuevos todavía, y nos son compatibles con todos los navegadores. Asique en resumen, debes usar PNG para imágenes sencillas como logos o iconos, JPEG para imágenes grandes, fotografías, etc, y GIF para imágenes animadas.
Herramientas
Vale, ahora que ya conoces tanto los formatos de imagen, como los métodos de compresión, vamos a ver como y con que herramientas, podemos comprimir nuestros archivos.
En este apartado contamos con multitud de opciones, la primera de ellas, como no podía ser de otra forma, es usando Photoshop, Affinity Photo o de forma gratuita, GIMP; con estas aplicaciones podremos tanto ajustar una imagen al tamaño deseado, como reducir su peso ajustando su calidad.
Por otro lado, tenemos herramientas online, como I love img, muy muy completa que nos permite tanto comprimir, como recortar o redimensionar nuestras imágenes de forma gratuita, y la cual uso bastante personalmente.
Otra herramienta muy útil y completa es Webresizer, la cual cuenta con multitud de parámetros que podemos ajustar para dejar nuestro archivo listo para usar en nuestra web.
Además de aplicaciones y herramientas online, si usamos WordPress, podemos optimizar nuestras imágenes mediante plugins, que harán el trabajo automáticamente por nosotros, dentro de este apartado tenemos, entre otros muchos WPSmush o EWWW Image Optimizer, que son dos plugins que optimizan imágenes de forma automática. Y un plugin muy recomendable y que ayudará a acelerar nuestra web es A3 Lazy Load, que lo que hace es que nuestra web cargue solamente las imágenes que el usuario va a ver en su pantalla en ese momento, e ir cargando las demás a medida que el usuario va haciendo scroll en nuestra página y se van necesitando.
Durante este post hemos visto la importancia y beneficios de optimizar las imágenes de nuestra web, los formatos y las maneras de hacerlo, así como algunas de las herramientas más comunes para llevar a cabo estas tareas. Si aún así necesitas ayuda con la optimización de imágenes o para cualquier otro aspecto de tu web, haz click aquí y ponte en contacto conmigo.