Cómo optimizar tus imágenes para la web

Cómo optimizar tus imágenes para la web
Diseño web

Te presentamos los diferentes formatos de imágenes y aprende a optimizar tus imágenes con photoshop.

Ya sea que tengas una web corporativa, un blog puedo asegurar que tienes bastantes imágenes para mantener la atención de los usuarios que llegan a tu sitio web y si junto con esto sigues las tendencias de diseño web actuales probablemente tus imágenes sean demasiado grandes y es cuando te preguntas si estamos en la era de la banda ancha porque preocuparme por el peso de las imágenes, bueno te explicare en 3 sencillas razones porque debes hacerlo.

  • La navegación móvil: al año 2013 el porcentaje de navegación alcanzaba un 17%, imagina hoy en donde esta esa cifra, esto significa que si bien contamos con tecnologías 3g y 4g estas no se comparan con la velocidad que puede alcanzar una linea de banda ancha, por lo que el tamaño de tus imágenes si debe importar considerando la cantidad de usuarios que puede acceder a tu sitio web desde un dispositivo móvil.
  • No perder usuarios: No hay nada más cierto en el diseño web que una página lenta asusta a los usuarios, es decir que si tu sitio no carga lo suficientemente rápido el porcentaje de rebote que tendrás será muy alto y esto es algo que no quieres.
  • Posicionamiento SEO: Google dispone de un tiempo determinado para rastrear sitios web, es decir que mientras más rápido cargue tu sitio web más páginas podrá indexear, ademas que la velocidad de carga de un sitio web es fundamental para la “experiencia del usuario” y esto es algo que Google considera muy importante al momento de posicionar tu sitio web, es por esto que debemos optimizar las imágenes de nuestro sitio web.

Espero que con estas tres razones ya estes lo suficientemente convencido de la importancia de optimizar tus imágenes, de ser así te invito a seguir leyendo para que aprendas como hacerlo.

optimizar tus imagenes

 

Lo primero y más importante es saber que formato elegir según tus necesidades, seguramente en más de alguna ocasión te has preguntado cual es la diferencia entre una imagen jpg, png o gif. Te cuento que no te aburriré con detalles ni tecnicismos que no va al caso mencionar tan solo me centrare en informarte cuando es mejor utilizar un formato u otro.

  • GIF: Es un formato prácticamente obsoleto, no hay que utilizarlo a menos que “necesites” una imagen con animación (movimiento)
  • PNG: Es un formato de imagen que viene en “reemplazo” del gif ya que también nos permite transparencias, es ideal para imágenes planas, con grandes espacios en blanco, como capturas de pantalla, logos, etc. PNG es un formato de imagen sin perdida, por lo que no reduce tanto el tamaño como el jpg, la calidad siempre sera mayo.
  • JPG: Ideal para imágenes, fotografías con muchos detalles y colores, es un formato de compresión con perdidas, es decir, que pierde calidad para reducir el tamaño de la imagen por lo que pueden aparecer aberraciones cromáticas en algunos casos.

Con esto te puedo contar que por lo general en nuestros sitios web debemos utilizar imágenes en formatos PNG, ya sea para iconos, logos, imágenes con transparencia y JPG para fotografías grandes, en especial las de gran tamaño.

También te invito a conocer los cada vez mas utilizados formatos vectoriales (EPS y SVG) para logotipos e iconos, ya que son totalmente escalables a todas las resoluciones, puedes revisar la calidad de este tipo de imágenes aquí mismo y hacer un zoom en tu navegador y podrás darte cuenta que el logo e iconos no pierden calidad sin importar el tamaño al que los lleves.

Espero que te quede un poco más claro el como utilizar las imágenes en tu sitio web y ademas la importancia de optimizarlas ya que de no hacerlo puede que estés perdiendo potenciales clientes, en Kubo todos nuestros sitios web son entregados con iconos e imágenes en formatos vectoriales para mejorar la carga de la página ademas de que no pierden calidad independiente del dispositivo en que las visualices.

Deja tu comentario