Si estamos trabajando en el diseño de una página web, las imágenes son una pieza fundamental. Nos ayudan a ilustrar el contenido, complementarlo e incluso guiar al usuario hacia la consecución del objetivo marcado.
Por eso, uno de los trabajos fundamentales antes de poner en marcha tu página web es tener bien optimizadas tus imágenes.
[toc]
¿Qué es una imagen mal optimizada?
Para explicar el concepto de optimización de imágenes para web, creo que es más sencillo explicar cuándo una foto está mal optimizada:
- Cuando tenemos una fotografía mucho más grande (en ancho o alto) que el sitio donde se va a ver.
- Cuando la imagen se está mostrando deformada en la web.
- Cuando el archivo contiene mucha más información de la necesaria (¿Sabías que las fotos incluyen información oculta como la cámara o el sitio donde se hicieron?).
- Cuando utilizamos un formato que no es el adecuado (échale un ojo a este post sobre JPG y PNG).
Si subes las fotos directamente desde la cámara a la web o las subes sin pensar cómo se ha generado, es muy probable que las imágenes de tu página cumplan una o varias de estas características.
Y deberías ponerle remedio con urgencia.
¿Por qué es importante optimizar las fotos de tu página web?
Existen 3 razones fundamentales por las que deberías empezar a preocuparte por la optimización de las fotos de tu web. Te las cuento en orden inverso de importancia, dejando para el final la fundamental:
Peso/tamaño…
Una imagen mal optimizada siempre tendrá un peso y/o tamaño excesivo para su función. Y esto afecta a dos áreas:
- El servidor donde tienes alojada la web necesitará más espacio para alojar tus fotos innecesariamente grandes.
- El navegador con el que te visitan tus futuros clientes necesitará trabajar más para mostrar las fotos al tamaño adecuado.
Velocidad de carga:
Del punto anterior se deduce que, si todos trabajan más, tu página web cargará más lenta. Y el tiempo de carga es fundamental: si quieres que Google y tus usuarios te quieran, tu página web debe cargar lo más rápido posible.
Experiencia de usuario:
¿Sabías que una web que tarda más de 3 segundos en cargar pierde un 53% de sus visitas? Creo que es la razón más importante para optimizar las imágenes de tu web: no espantar a tus clientes.
En mi experiencia en desarrollo web, he visto casos en los que al optimizar las fotos se ha conseguido reducir un 60% el peso de las imágenes (reduciendo algunas en un 96% su tamaño) y mejorar un 70% el tiempo de carga desde móviles solo con ese cambio.
Squoos.app, una herramienta todo en 1 para optimizar tus fotos
Si trabajas con un fotógrafo profesional para las imágenes de tu web, seguramente te entregue una versión optimizada en resolución y tamaño adecuados para ver online.
Aún así, casi siempre es necesario un retoque de optimización posterior, ya que esta mejora final depende del diseño, ubicación y contexto en el que se muestran las fotos.
¿Cómo puedes hacer esta optimización? Existen muchas herramientas como Compressor.io o TinyJPG muy sencillas de utilizar. Pero desde hace un tiempo la que más estamos utilizando en MrKii es Squoss.app.
Squoosh.app es una herramienta desarrollada por Google para optimizar imágenes web, con multitud de herramientas y tremendamente fácil de usar.
Simplemente tienes que arrastrar la foto desde tu ordenador, ajustar los parámetros y descargar la imagen optimizada. Además, podrás comparar en vivo cómo afecta la configuración a la calidad de la imagen.
En el ejemplo de arriba puedes ver un caso práctico con la foto de cabecera de este artículo:
- Tamaño al guardar desde Photoshop: 296Kb.
- Tamaño después de optimizar con Squoosh: 76,3Kb (un 74% menos)
¿Qué puedes hacer con Squoosh?
El número de herramientas que tiene Squoosh es muy amplio. Y si te soy sincero, creo que no he utilizado ni el 40% de lo que ofrece.
Entre otras cosas, con Squoosh puedes:
- Ajustar la calidad de la imagen.
- Cambiar entre varios formatos de compresión.
- Redimensionar el tamaño de tus fotos, para hacerlo adecuado a dónde se verán en la web.
- Reducir el número de colores que incluye la foto.
¿Y para recortar imágenes web?
Una de las cosas que Squoosh no permite es recortar imágenes para, por ejemplo, quedarnos con un área de una foto más grande para sacar un detalle o hacer una proporción más panorámita.
En estos casos, si no quieres utilizar Photoshop puedes tirar de otra herramienta online gratuita como imageresize.org:
También es bastante sencilla de utilizar e incluye un pequeño optimizador de imágenes. No es tan potente como Squoosh para optimizar, pero si quieres hacerlo todo en la misma app podría servirte.
¿Cuál es la configuración ideal para una imagen web optimizada?
Ahora llega la gran pregunta: ¿cuál es la mejor configuración para optimizar una foto? Y la respuesta, como te puedes imaginar, es relativa: depende.
Lo ideal al optimizar las fotos de tu web es hacer un trabajo personalizado para cada imagen o grupo de imágenes que se comporten igual: analiza a qué tamaño se van a mostrar como máximo, en qué formato las tienes, cuál es la resolución… y trabaja la optimización en detalle.
Aún así, te dejamos una serie de líneas generales que pueden servirte de guía para optimizar tus fotos según el tipo de imagen:
Logotipo web
- Tamaño: seguramente se esté mostrando a 250-300 píxeles de ancho como mucho.
- Asegúrate que no lo tengas subido a un tamaño gigante.
- Resolución: 72ppp, aunque puedes subirlo a 300 para asegurarte que se vea a alta calidad en todos los dispositivos.
- Calidad: juega en Squoosh hasta conseguir un peso bajo sin perder calidad.
- Peso: por debajo de 50Kb, ideal si consigues que sean 20Kb.
Imágenes grandes, para cabeceras o fondos
- Tamaño: 1280 píxeles de ancho (1980px si tiene mucho protagonismo la foto)
- Resolución: 72ppp.
- Peso: siempre por debajo de 100Kb.
Imágenes en el contenido
- Tamaño: 450 – 500 píxeles de ancho si se muestran junto a texto.
- Resolución: 72ppp
- Peso: siempre por debajo de 100Kb
—
Siguiendo estos consejos deberías poder empezar a optimizar las imágenes de tu página web y conseguir una carga más rápida para tener contentos a tus usuarios.
¿Conocías Squoosh? ¿Sueles optimizar las fotos de tu web antes de subirlas? Déjanos tu opinión en los comentarios.
¡Hasta el próximo artículo!
