hand Inicio

SERVICIOS

Salir

nochedía

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

Cómo optimizar imágenes con squoosh.app

800 palabras
3 minutos
September 16, 2019
blogdesign

Reducir la calidad y dimensiones de tus imágenes es condición indispensable para optimizar tu página web, y esto lo puedes hacer rápidamente con squoosh.app, una herramienta online gratuita (una de tantas otras) que es tan útil como sencilla de utilizar

  1. Prólogo
  2. El valor de las imágenes
  3. Consideraciones
  4. Squoosh

Prólogo

Las imágenes son importantes, el diseño web también lo es, pero lo cierto es que a no ser que estés en una página centrado en las imágenes (tipo Instagram), lo importante será el texto (dentro de unos límites de usabilidad claro)

Pero una vez tienes el texto trabajado, el diseño apuntala y mucho tu capacidad para convertir y para retener

Aquí te hablo de un aspecto muy concreto, que es cómo optimizar las imágenes de manera muy sencilla con una aplicación que te simplifica mucho las cosas: squoosh.app

El valor de las imágenes

Las imágenes son evidentemente un reclamo extraordinario para hacer tus posts más atractivos y cómodos para leer, y en la página principal generarán la primera sensación que el usuario tendrá de tu página web

Esa primera imagen se forma en 5 segundos, la primera decisión la tomará después de estos 5 segundos y evidentemente quieres que decida no irse

Resulta obvio que si en esos 5 segundos está 4 segundos esperando a que tus imágenes se carguen ... vamos mal

Por lo tanto sí, las imágenes son importantes y suman mucho, pero siempre que sean ligeras

Hay excepciones claro, hay páginas que convertirán en función de esa primera imagen y necesitan que realmente sea muy buena, incluso videos, allí hay que inventarse algo para entretener al usuario hasta que todo esté cargado

También hay sitios donde sabes que tu público no te está descubriendo y que por lo tanto esperará lo que haga falta (dentro de un margen razonable)

Y también hay sitios y lugares, en la página principal es crítico no demorarse sobre todo si tienes sólo una listado de posts con sus imágenes y ya está

En cambio en un post donde se trate de texto con imágenes, puedes permitirte el lujo de cargar imágenes pesadas porque el usuario tendrá chicha para leer, y además sabes que aunque quizá te esté descubriendo realmente estás respondiendo a una pregunta que se ha formulado, por lo que su paciencia será mayor

Pero incluso así, no hay motivo para cargar una imagen de 500 ks si puedes optimizarla para que baje hasta 90 ks sin pérdida apreciable de calidad

El quid es decidir si hay pérdida de calidad o no

Consideraciones

El principal motivo para optimizar tu imagen es el tamaño, esto es, si necesitas una imagen de 800px de ancho, si tu imagen mide 2040px estarás desperdiciando recursos y malgastando el tiempo de tus usuarios

Lo suyo es reducir la medida hasta los 800 px que necesitas y ver qué tamaño de archivo te ha quedado

Si aún y así el tamaño del archivo sigue siendo exagerado (normalmente lo es), tienes que valorar hasta que punto necesitas que esa imagen se vea perfecta

El caso típico es el de archivos jpg (hay estándares más nuevos que son aún más eficientes que el jpg, pero en mi opinión aún no están suficientemente expandidos), la diferencia entre un jpg a calidad 100 y a calidad 90 es (normalmente) del todo imperceptible

Entre 80 y 90 también cuesta mucho (si te fijas en el detalle sí)

Y la realidad es que puedes reducir a 50 y tampoco notarás tanta pérdida

Al final la pregunta que tienes que responderte es "dejará mi usuario de visitar ese artículo por culpa de una calidad 50?"

Normalmente la respuesta es no (porque la imagen se ve suficientemente bien), así que adelante, usa el 50

Excepciones, si estás vendiendo fotografías e impresiones, claro, entonces allí necesitas una imagen impecable

Hasta cuanto tenemos que reducir? Si nuestra imagen está por debajo de 10 ks nos podemos plantear aumentar la calidad hasta quedarnos por debajo de 20 ks, estos tamaños son muy razonables y no nos penalizarán en absoluto

Hay margen y siempre depende del contexto, la norma general sería intentar quedarse siempre por debajo de 100 ks, pero claro, no es lo mismo un post con 2 imágenes de 100 ks que una página principal con un grid de 20 imágenes de 100 ks

Si no tienes imágenes jpg sino que utilizas el formato png (normalmente para ilustraciones en lugar de bitmaps), la discusión es ligeramente distinta pero en el fondo aplican los mismos criterios

Y cómo reducir e optimizar tus imágenes de manera cómoda y rápida?

Squoosh

Hay varias herramientas que persiguen lo mismo, yo hasta hace poco utilizava compressor.io, pero recientemente (ya no tan recientemente) me he pasado a Squoosh, con el código fuente diponible en GitHub, de Google (siempre es una garantía), y con una facilidad de uso más que óptima

El funcionamiento es sencillo, lanzas una imagen en la página web y tocas las dimensiones y la calidad, no hace falta cambiar nada más, rápido sencillo y efectivo, y gratuito

Te dejo un video para que veas el funcionamiento, al final paso de 1.7 Mb a 50 ks con una calidad final que se diferencia pero que en mi opinión no pierde valor en absoluto (en términos de persuadir al usuario)

*la imagen es de unsplash

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]