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

ūüĎČAHORA en JULIO 2020: ¬°Herramienta que TE RECOMIENDO ūüíį!

David Vega
David Vega