Seguro que os ha pasado alguna vez, estáis trabajando en Photoshop, o incluso Paint, y tenéis una imagen, una foto, que queréis guardar en la mejor calidad posible para que “se vea bien”. Claro, tenemos que tener en cuenta varias cosas, pero para empezar lo más importante es saber para qué se va a utilizar esa imagen, no es lo mismo una imagen para un slider de anchura completa que la imagen destacada de una entrada o imágenes para la sidebar.

¿Por qué importa el peso de las imágenes de una web?

El peso de las imágenes de nuestra web es algo importante desde el momento en el que se comenzaron a incrustar imágenes en páginas webs, con las conexiones que permiten acceder a las webs siempre existe un problema importante: la velocidad de carga, y esta, entre otras cosas, dependen del peso de las imágenes que hará que una página cargue antes o después.

Es decir, si utilizáis unas maravillosas imágenes de 300 pixeles por pulgada y una anchura de 3000 pixeles, sí, tendréis una gran calidad de visionado en vuestras imágenes, sí, cualquiera que las coja de vuestra web podrá imprimirlas y obtener un resultado fidedigno y sí, seguramente vuestra página web sea lenta, muy lenta, a la hora de cargar su contenido y, llegados a un punto, NO SEA NECESARIO semejante “peso” de las imágenes ya que las pantallas no dan más de sí superados los 100 pixeles por pulgada.

Entonces, ¿cómo podemos rebajar el peso de nuestras imágenes SIN perder calidad?

Para responder a esta pregunta tenemos varias respuestas posibles:

  1. Adobe Photoshop nos permite “Guardar para web” y manejar el formato y la calidad de la imagen.
  2. Existen numerosos plugins que nos permiten reducir de tamaño automáticamente las imágenes que subimos a la web.
  3. Algunos servidores como Webempresa ofrecen una herramienta que redimensiona las imágenes de tu alojamiento con un solo clic.
  4. Herramientas online, existen páginas webs donde puedes reducir el tamaño de las imágenes para facilitar su descarga durante la navegación.

Antes de nada habría que dimensionar las imágenes de acuerdo a dónde se van a utilizar, sí, WordPress redimensiona las imágenes en 3 formatos, pero si nosotros ya vamos con los deberes hechos, eso que nos ahorramos. Así que si queremos una imagen para un slider deberá contemplarse el tamaño que deben tener las imágenes del slider, lo mismo si es una imagen destacada de una entrada o si es una imagen de widget o sidebar.

Por cierto, no voy a hablar de cómo mejorar la saturación, brillo o contraste de las imágenes, eso ya es otra historia.

Una vez que hemos redimensionado las imágenes tenemos que tener en cuenta la resolución de las imágenes, para que os hagáis una idea los monitores actuales trabajan a 72 pixeles por pulgada, los monitores actuales de calidad ya lo hacen a 96 pixeles por pulgada y los monitores retina lo hacen a 150 pixeles por pulgada. La calidad de impresión es de 300 pixeles por pulgada, incluso 150 pixeles, cualquier imagen que supere los 96 pixeles por pulgada NO va a ser apreciada salvo en monitores retina, que los tienen 4 gatos, que llegarán sólo hasta los 150 pixeles por pulgada, el resto sólo representa mayor peso de las imágenes y una lentitud de carga de nuestra web menor.

¿Qué formato usar?

Existen diferentes formatos, pero si vamos a lo básico tendríamos que tener en cuenta estos:

  • JPG, es el formato para fotografías e imágenes grandes.
  • GIF o PNG-8, imágenes de pocos colores y transparencia.
  • PNG-24, formato para imágenes y fotografías con transparencias, cuidado porque pesa mucho, pero si tenemos una fotografía con transparencia será el recomendado.

Una vez que tenemos preparadas las imágenes nos toca el proceso de reducirlas de tamaño. Estos últimos días he dejado de utilizar el plugin de Smush.it con el que, automáticamente, reducía el tamaño de todas las imágenes que subía a la web y ahora utilizo Compressor.io, una web que reduce archivos jpg y png y que me está dando unos grandes resultados, aunque me toque trabajar imagen a imagen.

Existen alternativas a Compressor.io, webs como TinyPNG que permiten enviar varias imágenes de golpe para ser reducidas y después descargadas en un zip, con lo que están ya perfectamente preparadas para subirlas a nuestra web sin entorpecer la navegación.

¿Y vosotros? ¿Qué herramientas utilizáis para mejorar el tamaño de vuestras imágenes?