Clicky

28 Noviembre, 2018 0 Comentarios

Cómo optimizar imágenes para la web ✅ es una de las consultas habituales que me hacen. A continuación te detallo como siempre… ¡al grano!.

 

La anchura y altura RECOMENDADAS para tu web dependen de la plantilla web que estés utilizando, es decir, no te puedo decir exactamente con que dimensiones has de subirlas a tu plataforma pero sí te puedo dar unas directrices que te sirvan como guía.

 

Dimensiones Slides

Las imágenes más grandes se suelen corresponder con los slides (diapositivas) generalmente ubicados en la página de inicio.

Unas dimensiones que aproximadamente te pueden ir bien son: 1600px x 1000px.

Recuerda que px significa pixels y que la primera cifra (1600 en este caso) corresponde a la base por lo que 1000 corresponde a la altura, siempre se indica: base x altura.

 

Dimensiones Productos

Para las imágenes de productos te pueden ir bien unos 900px x 900px. Generalmente con estas dimensiones tendrás de sobra. No tienen porque ser cuadradas simplemente te doy un orden de magnitud.

 

Formato

JPG o PNG. Yo generalmente suelo usar jpg.

El objetivo es que la imagen se vea bien, se perciba poca pérdida de calidad y al mismo tiempo pese muy poco (KB).

 

Para que tengas una idea aproximada:

  • Los slides pueden pesar unos 150KB.
  • Las imágenes de producto pueden pesar unos 80KB.

 

🚫Si los pesos ahora mismo en tu web son bastante superiores ¡estás perdiendo clientes, así de claro!.

 

Photoshop

Hay muchísimos editores de imagen pero te recomiendo que utilices el mejor directamente: Photoshop.

Verás que puedes tener el último Photoshop siempre actualizado por una pequeña mensualidad. Consulta planes y precios aquí.

¡Es una aplicación que sin duda amortizarás!.

 

Qué imagen optimizar

Para optimizar una imagen coge la original, la que tiene la máxima calidad. NO optimices una imagen que previamente ya ha sido optimizada.

 

Cómo cambiar las dimensiones con Photoshop

Parto de la suposición que tu original tiene unas dimensiones superiores a las que pondrás en la web.

Cambiar dimensiones imagen con Photoshop

 

Ahora cambias los pixeles manteniendo la proporcionalidad de la imagen (el icono de proporcionalidad te lo señalo con una flecha en fucsia).

Cambiar pixeles

 

Guardar para web

 

La siguiente captura de pantalla es importante, según los parámetros que selecciones vas a obtener mayor o menor calidad de imagen, mayor o menor peso. Estos son los parámetros que yo suelo utilizar:

Parámetros para optimizar imagen

 

¿Cuántas imágenes tienes que optimizar?

Tienes dos maneras para optimizar tus imágenes: manualmente siguiendo las indicaciones que te doy en este artículo (imagen de una en una) o de forma automática procesando todas las imágenes que tengas a la vez (si son miles pues miles). Contáctame si deseas esta última opción para desarrollarte la automatización.

DV

👉Si necesitas AVANZAR RÁPIDAMENTE tu negocio online: 🚀FAST COACHING

David Vega
David Vega