Las imágenes de tu Sitio Web son determinantes para bien o para mal. Por un lado pueden ser el factor detonante de un impulso de compra, y por otro lado pueden ser la razón por la que tus potenciales clientes no convierten en tu Sitio Web.
Nota: Para profundizar acerca del impacto que tienen las imágenes en tu Sitio Web te recomiendo esta publicación.
En esta ocasión, me dedicaré a explicar la razón por la que debes Optimizar las Imágenes de tu Sitio Web y Cómo es que puedes conseguirlo. Así que ponte cómodo que aquí vamos.
Por qué optimizar las imágenes.
Las imágenes no optimizadas pesan mucho más y esto repercute en el tiempo de carga de tu Sitio. Dicho en otras palabras, las imágenes no optimizadas hacen mas lento a tu Sitio Web.
La solución a este problema es comprimir las imágenes lo máximo posible. Suena sencillo pero la gracia está en encontrar un equilibrio perfecto entre el peso y la calidad de tu imagen, ya que, a mayor comprensión, menor calidad. Así que el gran desafío es conseguir imágenes de excelente calidad, pero muy livianas al mismo tiempo.
Calidad de las imágenes
¿Me podrías mostrar la diferencia entre las dos imágenes que aparecen mas abajo?
Si te fijas bien, a simple vista, no se percibe ninguna diferencia, pero te cuento que si la hay. La diferencia está en el peso de cada imagen. La primera imagen está optimizada para la web y la segunda no lo está.
- Imagen No Optimizada: Tamaño: 6000 x 4000 / Resolución: 300 dpi / Peso: 10,3 Mb
- Imagen Optimizada: Tamaño: 350 x 233 / Resolución: 72 dpi / Peso: 33 Kb
¿Por qué una Imagen PESA MÁS que la otra?
La Imagen No Optimizada pesa 10 Mb mientras que la Imagen Optimizada pesa tan solo 33 Kb, esto es casi 300 veces mas liviana. ¿Cómo es posible que 2 imágenes visualmente idénticas tengan tanta diferencia en su peso? Para ello te explicaré 3 sencillos conceptos, aquí vamos:
1. El Tamaño:
El tamaño de una imagen digital se mide en píxeles. Piensa que 32 píxeles equivalen a un centímetro aproximadamente. Ahora, si haces la conversión de píxeles a centímetros, notarás que la imagen original (la que no está optimizada) mide unos 1,87 metros de ancho por 1,25 metros de alto. Es una imagen gigantesca si es que piensas proyectarla en un monitor que en promedio no mide mas de 40 centímetros de ancho por unos 30 centímetros de alto.
2. La Resolusión:
La resolución de una imagen se mide en dpi (dot per inch), esto no es ni más ni menos que la cantidad de píxeles por cada pulgada lineal. Mientras más alto sea el dpi, mayor será la calidad de la imagen. Ahora presta atención: Para las imágenes que se muestran en una pantalla – como en el caso de tu sitio web – no necesitas más de 72 dpi. Si te fijas la imagen no optimizada tiene 300dpi, una medida excesiva para un Sitio Web.
3. El Peso:
En el caso de este ejemplo, el excesivo tamaño y la excesiva resolución hacen que la imagen no optimizada sea excesivamente pesada. Si en tu Sitio publicas una imagen así, créeme, tendrás grandes problemas con el tiempo de carga de tu página.
La Pregunta del Millón: ¿Formato JPG o PNG?
La eterna pregunta de muchos: «¿Cuál es el formato debo usar? ¿JPG o PNG?» Te lo explicaré muy simple:
Formato PNG:
Utiliza este formato, para todas las imágenes que contengan zonas de colores planos, como por ejemplo logotipos, iconos, botones, etc. Una de las más notables diferencias con el formato JPG es que te permite conservar un fondo transparente.
Formato JPG:
Este es un formato de compresión universal que se utiliza principalmente para las fotografías. Aunque pierde un poco de calidad al comprimir las imágenes, no pierde la calidad de los colores ni de las tonalidades.
Herramientas para Optimizar Imágenes
Ahora vamos a lo mas importante: Cómo optimizar las imágenes para tu Sitio Web. Actualmente, tienes múltiples opciones, desde software pagado como Corel o Photoshop, hasta aplicaciones gratuitas como las que te compartiré a continuación:
Gimp:
La mayor ventaja de Gimp, es que es un software libre, por lo que no es necesario pagar por usarlo. Además, te permite hacer retoques fotográficos. El único defecto, es que solo está disponible para Windows.
Compressor.io:
Si no necesitas retocar tu imagen, te recomiendo Compressor.io. Simplemente, subes la imagen y en unos pocos segundos te la devolverá totalmente comprimida hasta en un 90%. ¿Genial no crees?
Tiny PNG:
La gracia de Tiny PNG es que te permite reducir las imágenes en formato PNG, es decir que puedes conservar la transparencia de fondo de una imagen.
Optimizilla:
Cuando necesites optimizar varias imágenes a la vez, te recomiendo Optimizilla, un Sitio que te permite subir hasta 20 imágenes en una sola carga.
Resize Image:
Este software es distinto, y te lo comparto porque es complementario. No comprime las imágenes. Lo que hace es re dimensionar su tamaño. Por lo tanto, te recomiendo usar esta aplicación primero, y luego usar los compresores anteriores. De esta forma, lograrás una mayor reducción en el peso de las imágenes.
Si aplicas estas sencillas herramientas para optimizar tus imágenes, créeme, el tiempo de carga de tu página se verá notablemente favorecido y tus usuarios te lo agradecerán.
Para terminar, te comparto algunas publicaciones que también pueden ser de tu Interés:
- Los 4 Criterios Básicos para escoger las Imágenes de tu Sitio Web
- Diseño Web: Los 6 Pilares de un Sitio Atractivo, Intuitivo y Escaneable
- Tipografías: Cuáles, Cuándo y Cómo Aplicarlas en tu Sitio Web
Te recuerdo… si necesitas ayuda con tu Sitio Web no dudes en contactarnos. Estamos listos para ayudarte con ello.
Gustavo Muñoz
Diseñador Freelance
Kroki.cl
