Cómo reducir el tamaño de las fotos de tu web

Hoy quiero hablarte de cómo reducir el tamaño de las fotos de tu web, un tema que me parece crucial.

Este será el último post hasta septiembre… y quiero asegurarme que, a la vuelta, no voy a escuchar más excusas del tipo ” Yo es que no sé cómo reducir el tamaño de las fotos para la web… ¡Menudos diseñadores web éstos!

Me parece increíble que uno de los errores más habituales que encuentro en las auditorias web sea que haya que reducir el tamaño de las fotos porque pesan una barbaridad.

Reducir el tamaño de las fotos de una web es una práctica que debes dominar si quieres resultados de tu web, así que no quería dejar pasar la oportunidad de hablarte de cómo comprimir fotos para hacer más óptima tu web.

Cómo reducir el tamaño de las fotos

¿Por qué hay que reducir el tamaño de las fotos de tu web?

Las imágenes sin optimizar, sin comprimir correctamente, tienen un efecto muy negativo en la efectividad de una web.

¿Por qué? Pues porque la hace terriblemente lenta y eso repercute negativamente en:

  • El SEO: Ningún buscador posicionará bien una web que tarda en cargar
  • La Usabilidad: No es cómoda de usar una web en la que tienes que estar esperando que cargue la siguiente página
  • La Eficiencia de la web: ¿Tu esperarías segundos a que cargue una web o harás una nueva búsqueda para encontrar una alternativa?

Saber reducir el tamaño de de las fotos, optimizar imágenes para la web, saber comprimir correctamente las imágenes es imprescindible para cualquier diseñador web

¿Cuál es mejor tipo de imagen para mi web?

Cómo sabes, no puedes usar cualquier tipo de imagen para tu web. Un tiff, por ejemplo, sería una muy mala elección.

Los formatos estándar de imagen para la web son:

Todos ellos basados en mapas de bits o, también llamados ráster.

También existe un formato vectorial que puedes usar en tu web (y no es flash, no):

¿Cuando se debe utilizar uno u otro formato?

GIF es un formato decano de imagen comprimida que se ha recuperado ultimamente en las redes sociales, aunque llevaba ya unos años en el olvido.

Este formato tiene la desventaja de usar sólo 256 colores y el acierto de posibilitar pequeñas animaciones gracias a que funciona por capas.

Incluso tiene una capa transparente.

Este formato se comprime bajando la cantidad de colores utilizados por la imagen, por lo que en una época fue muy útil para imágenes planas, dibujos y/o logotipos.

Plátano animado en gif

Imagen original de hatandriyapramusesa

JPG es el formato comprimido más conocido y utilizado en la web.

Aunque puede usar millones de colores, cuanto más comprimida está la imagen menos resolución tiene, aunque da muy buen resultado si se equilibra correctamente la fidelidad original con la compresión moderada.

Imagen en JPG

Imagen original de www.neuronagroup.cl

PNG es un formato que se queda un poco a medio camino entre el GIF y JPG.

También puede trabajar con millones de colores (PNG 24) y, además, incluye la posibilidad de crear fondos transparentes con una capa Alpha.

Aunque se inventó para ser un formato sin pérdida, no deja de ser una evolución de GIF.

Sería el formato perfecto si no fuese el más pesado de todos.

SVG es un formato que, a diferencia de los anteriores, está basado en vectores y no en mapas de bits.

Aunque no es todo lo conocido que debería, lleva muchos años en la web y parece que cada vez tiene más adeptos.

Tiene muchas ventajas y todos los números para sustituir finalmente al GIF:

  • Pesa muy poco
  • Se redimensiona sin pérdida
  • Está aceptado y recomendado por el Consorcio WWW

La desventaja es que está limitado su uso a imágenes planas, logotipos y/o dibujos

Diferencia entre imagen raster (mapa de bits) y vector

imagen original de wikimedia.org

Optimizar imágenes para la web

Compresión de imagen

Imagen original de http://s.culturacion.com

El primer consejo que te voy a dar para reducir el tamaño de las fotos es que debes aprender a usar los formatos de imagen según el caso.

Saber escoger correctamente cuando usar jpg, png o svg será definitivo para que tu web sea más usable.

Pero también tienes que saber cuando no usarlas.

Es una postura inteligente usar fuentes web (como las Google Fonts), efectos visuales CSS (como degradados) frente al uso de las imágenes. La carga será mucho más rápida y eficaz si evitamos usar imágenes de forma gratuita.

En cuanto a la optimización de imágenes para reducir el tamaño de las fotos, hay una regla que debes seguir y que yo les repito a mis alumnos hasta la saciedad:

Para comprimir fotos o imágenes de forma correcta debes seguir siempre unas pequeñas reglas:

  • El tamaño de tu imagen debe estar al 100% cuando se muestre en la web
  • Tus imágenes deben tener la resolución de pantalla. Actualmente hay una pequeña guerra entre dos formatos de resolución:
    • Resolución de pantalla estándar: 72 ppi
    • Retina

Retina es un sistema que aplica Apple a sus dispositivos, sobretodo móviles, que mejora ampliamente la calidad de visionado de las imágenes.

¿Qué resolución escoger?

Pues dependerá de cuál sea el público objetivo de tu web.

Si éste es clase alta, diseñadores, profesionales liberales, etc… Es decir, personas que por su poder adquisitivo o profesión consumen dispositivos Apple, necesitarás aplicar Retina, para el resto de webs, la resolución estándar es más que suficiente.

Que no debes hacer nunca con las imágenes para la web

  • No redimensiones nunca a la baja tus imágenes: Aunque la veas más pequeña, la imagen sigue siendo grande y sigue pesando lo mismo: demasiado.
  • No redimensiones nunca al alta tus imágenes: Si tu imagen es más pequeña y la redimensionas a un tamaño mayor sólo conseguirás que se vea pixelada
  • No vuelvas a subir una imagen que ya está subida: No lo necesitas, vuelve a enlazar la misma imagen… Sí, se puede hacer. Ten el detalle de poner la fuente de procedencia y asegúrate que no tiene derechos de publicación antes de usar una imagen de terceros.
  • No comprimas demasiado: Deformarás la imagen y tu web dará la sensación de una web amateur.

Si sigues estas prácticas harás todo lo contrario a reducir el tamaño de las fotos. 

Los mejores programas para optimizar imágenes para web

optimizar imagenes para web

imagen original de http://i.emezeta.com

Adobe Photoshop

Reconozco que no soy especialmente amigo de Photoshop para la optimización de imágenes web, pero como estoy seguro que o la usas o has oído hablar de ella, voy a comentarla un poco por encima.

No la recomiendo especialmente ya que, aunque con Photoshop se puede manipular la compresión y el tamaño de una imagen, el resultado aún sigue siendo más grande de lo que debería ya que deja mucha información innecesaria dentro de la imagen.

De todas formas, te incluyo un acceso donde los amigos de 40 de fiebre explican paso por paso, cómo usar Photoshop para comprimir imágenes:

Compressor.io

Este es un servicio online que recomiendo para quién no se quiere complicar demasiado la vida.

Comprime todos los formatos de imagen que te he comentado en este artículo e incluso tiene la opción Lossless que comprime sin pérdida de calidad.

En este vídeo te explica cómo utilizarlo para tus imágenes

Kraken.io

También muy recomendado.

Incluye los mismo servicios que Compressor.io y más opciones.

A mi me gusta especialmente la posibilidad de comprimir una imagen con sólo la URL de la misma.

TinyPNG

Esta es otra aplicación online con la que podrás subir 20 imágenes al mismo tiempo y de hasta 5 MB cada una.

Además, si usas WordPress, dispones de un plugin con el que podrás comprimir las imágenes desde tu propia web.

En este vídeo verás como usar TinyPNG.

FILEminimizer Pictures

FILEMinimizer Pictures es una pequeña maravilla gratuita que puedes instalar en tu ordenador para reducir tamaño de fotos e imágenes.

Este programa es capaz de reducir cualquier imagen hasta en un 98% y sin pérdida de calidad.

Trabaja con los formatos JPG, BMP, GIF, TIFF, PNG y EMF y con un tamaño máximo de 5 megas.

No es que recomiende FILEminizer Pictures, debería ser obligatorio para cualquier desarrollador o webmaster.

Te dejo un vídeo para que aprendas a usarlo, aunque verás que es extremadamente sencillo:

Conclusión

Creo que ya no tienes ninguna excusa para reducir el tamaño de tus fotos o imágenes en tu web.

Espero que este artículo te ayude a optimizar las imágenes de tu web y, por tanto, optimizar la carga de tu web y así mejorar los resultados de ésta.

¿Conoces otras técnicas para optimizar las imágenes de tu web? ¿Sabes de algún programa que no haya comentado y te buenos resultados?

10 comentarios
  1. sergi masdeu
    sergi masdeu Dice:

    ¿Como es posible que un programa sea capaz de comprimir 98% y no tenga perdida? Hasta que no lo pruebe no me lo creo

    Responder
    • Luis A. Román Mañas
      Luis A. Román Mañas Dice:

      Hola Sergi.
      No es que comprima siempre al 98%, es hasta el 98%.
      Te recomiendo que lo pruebes, los resultados son espectaculares.
      El titulo de cada herramienta está enlazado con su página, así que solo pulsando en el titulo te llevara a la página de descarga.

      Responder

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *