En el post de hoy quiero dejarte una serie de consejos y herramientas de optimización web muy útiles tanto para un principiante en esto de los negocios online, como para un freelance experimentado en marketing digital. El objetivo concreto es que logres optimizar imágenes de una vez por todas, y así ¡aumentar esas visitas!
Web = Velocidad de información sobre un tema que el “navegante” solicita
Esta podría ser una definición (muy personal) sobre lo que se espera de una página dentro del englomerado mundo de Internet. Al margen del contenido que esta pueda tener, las imágenes y elementos visuales la enriquecen de una manera notable, haciendo que la propia web cobre sentido y adquiera más interés a los ojos de los usuarios.
Toda web, blog o e-commerce que se precie necesita de las imágenes para dotar al conjunto de palabras que nos informan un sentido y un atractivo visual que las complemente, pero mucha gente (por falta de tiempo o desconocimiento) pasa un poco de dedicarle un mínimo a este asunto, y claro… luego se quejan de que su página carga muy despacio o que sus posts no reciben las visitas deseadas. Por esta razón, crear imágenes con texto aunque no sepas diseñar es un plus para atraer visitantes.
SOS ¡las imágenes de mi web son muy pesadas!
Cuando la gente desconoce los motivos de recibir pocas visitas, o cuando las que tiene apenas duran unos segundos en su página, suelen atribuirlo a que el contenido (escrito) es de baja calidad o a que no suscita interés. Y puede que tengan razón, pero muchos no caen en la cuenta de que si las imágenes de la web son demasiado pesadas, estas relentizarán la apertura de la misma, haciendo que muchos usuarios, cansados de esperar a que se abra del todo para poder leer el contenido, abandonen la web y pasen a buscarlo a otras con la misma temática.
Hay que aligerar esas imágenes, ¡todas! Tanto las que alimentan el post, como aquellas que componen los diferentes elementos de la página; cabecera, iconos, banners, fotografías, etc. ¿Cómo hacemos esto? Utilizando editores de imagen como Photoshop para reducir su tamaño sin perder calidad.
Con la gran variedad que existe, es normal que surjan dudas sobre cuál es el formato de imagen más adecuado para incluir en nuestra web. Por eso, voy a mostrarte las diferencias que existen entre los tres más utilizados y, así, saber cuál se puede adaptar mejor, ¿te parece?
- JPG: Son las fotografías que poseen mayor número de detalles, poseen muchas texturas y, por ello, no nos debería importar mucho si pierden algo de calidad al editarlas y reducir su peso.
- PNG: Son capturas de pantalla que muestran imágenes con amplias zonas “lisas” de un sólo color. También se suele atribuir este formato a los dibujos o bocetos.
- GIF: Muy parecido al PNG, sólo que en este caso es más común cuando hablamos de imágenes animadas, por lo que se puede deducir que su peso será mayor que los dos formatos anteriores.
Pero… ¿JPG o PNG?
Esta pregunta viene a raiz del desagradable efecto producido en los archivos JPG cuando los redimensionamos; unas marcas bastante feas que aparecen alrededor de los objetos al reducir su tamaño. Esto no quiere decir que sea un formato peor que el PNG, sólo que hay que utilizarlo cuando la ocasión lo requiera:
Estas molestas marcas se denominan artefactos de compresión, y se producen debido a que el JPG es un formato con pérdidas. O sea, que para que ocupen menos se reduce su calidad. Por eso, este formato es adecuado para fotografías con más detalles que para imágenes que contengan zonas de color uniforme. Calidad perderán, eso está claro, pero esos artefactos de compresión se notarán mucho menos.
Por otro lado, en las imágenes PNG este hecho no ocurre, ya que es un formato que no tiene pérdidas. Para conseguir que ocupen menos, se utilizan algortimos de compresión que no consiguen reducir tanto el tamaño, pero no introducen artefactos.
CONCLUSIÓN: JPG para fotografías y PNG para imágenes que contengan zonas de color uniformes.
¿Y qué herramientas uso para optimizarlas?
Existen algunas herramientas que nos ayudarán muchísimo para conseguir que nuestras imágenes se adapten a nuestra web sin que estas pierdan excesiva calidad:
Tal vez haya quien eche en falta algunas cosas dentro de lo que es la optimización de imágenes para web, pero creo que con estos consejos y herramientas de edición puedes empezar más que de sobra a adaptarlas correctamente para que tu página fluya como es debido.
¿Qué te ha parecido este post? ¿Nos recomendarías alguna otra herramienta?
