Existen diferentes tipos de formato digital para las imágenes y por eso tenemos que saber diferenciar unos de otros para usarlos de la mejor forma y conseguir reducir al máximo el peso de las mismas para que nuestra web cargue mucho mas rápido.
Cada día se da más valor a las imágenes, a los usuarios les encantan y de esta manera conseguimos atraer la atención a nuestra web, además las últimas tendencias en diseño de web podemos ver claramente que cada vez se usan más y de mayor tamaño.
¿Por qué es tan importante el tamaño de tus imágenes?
Hay varios motivos para tener en cuenta el tamaño de nuestras imágenes:
- Aligerar el peso de nuestra web y optimizar la carga hará que nuestra página sea mucho más rápida.
- Ayudará a no perder usuarios. Una web lenta siempre nos va a dar como resultado un porcentaje de rebote muy alto y no queremos que se vayan de nuestra web, no debemos hacer esperar a los usuarios.
- Nos ayudará con el SEO. Existen millones de webs y google dedica un tiempo a cada una de ellas, este es limitado, por eso cuanto menos pese nuestra web, más tiempo dispondrá para rastrear y aumentaran las posibilidades de mejorar nuestro posicionamiento y es que Google da mucha importancia a la velocidad de carga.
¿Cómo saber que imágenes optimizar para reducir su tamaño?
En primer lugar deberemos saber cuánto tiempo tarda en cargarse nuestra web, además de la imágenes existen muchos otros factores que pueden hacer que nuestra web sea muy lenta.
Las mejores páginas para hacer este análisis de velocidad de web son:
Estas herramientas nos aportan recomendaciones para poder mejorar la velocidad de carga en términos generales, no sólo nos hablan de las imágenes.
¿Qué formato es el mejor para conseguir optimizar las imágenes de tu web?
Existen varios formatos de imágenes, pero ¿Cuál es la diferencia entre unos y otros? y lo más importante y sencillo ¿Cuándo usarlos?
Formatos de imágenes y cuando usarlos
- .GIF: Este formato (.gif) está totalmente obsoleto, no se usa apenas, sólo para incluir imágenes animadas. Hace muchos años estaban muy de moda, en un futuro igual vuelven, nunca se sabe.
- .PNG:Este formato permite transparencias y por ello es fantástico para imágenes planas o con muchas zonas blancas, para los logos. Este formato (.png) no tiene pérdidas por lo que no reduce su tamaño como puede hacerlo un JPG, digamos que la calidad siempre será mayor.
- .JPG: Este formato se puede reducir mucho más, va perdiendo calidad a medida que se reduce por lo que debemos tener cuidado para que no nos queden imágenes realmente horribles.
Cómo resumen diremos que:
Usaremos el formato PNG para todas las imágenes que componen la estructura de nuestra web (iconos, logotipos, botones…) y JPG únicamente para las fotografías.
Existen otro tipo de formatos vectoriales cada vez más usados (.EPS o .SVG) para los iconos y los logotipos, estos formatos son totalmente ampliables a cualquier resolución.
¿Cómo optimizar nuestras imágenes?
Optimizar desde Photoshop:
Si usas Photoshop deberás guardar tus imágenes en la opción: [ Archivo > Guardar para web…]
Después deberás seleccionar que tipo de formato quieres (png, jpg o gif) y luego elegir la compresión que mejor relación calidad/peso nos ofrezca.
Cuando decides exportar en JPG, hay que tener en cuenta la calidad que queremos que tenga la imagen, la calidad va del 0 al 100, siendo 0 la capacidad de compresión máxima.
Si decides marcar la opción «progresivo», la imagen se guardará en varias capas de manera que se muestre en baja calidad y subirá la calidad a medida que se carga. Si no lo haces así, la imagen se cargará directamente en alta calidad y ser verá a trompicones.
Si exportas la imagen en PNG hay que valorar si hacerlo o PNG-8 o PNG-24.
La diferencia está en la compresión de colores, lo normal es usar el PNG-24 ya que alcanza hasta los 16 millones de colores.
Si es una transparencia, lo normal es hacerlo en PNG ya que de esta manera podremos tener la zona transparente deseada.
Existen muchos programas para realizar una buena reducción del tamaño de las imágenes, ya que muchas veces no se dispone del programa Phosohop de Adobe.
Para MAC podemos usar Image Optim y para PC RIOT.
También existen plugins de Word Press que no ayudan con la optimización, a reducir mucho el tamaño, pero ese es otro tema. Siempre será mejor subir las imágenes ya optimizadas. Recuerda que lo más importante es el usuario y google y una buena reducción de imagen les encantará.