Optimizar imágenes para la web con PhotoFiltre

Tutoriales Publicado por Claudia en enero 5, 2012

Quienes comienzan con un blog, generalmente omiten un paso fundamental para mejorar el rendimiento y la carga de su blog: la optimización de imágenes para la web. Optimizar las imágenes es especialmente útil para mejorar la usabilidad de nuestro sitio y reducir el porcentaje de rebote de los visitantes. Usualmente, cuando hablamos de optimización para la web, nos referimos a la compresión de imágenes, esto es, la reducción de su tamaño y peso, sin afectar visiblemente la calidad del archivo original.

¿Qué formato usar?

En general, prefiero usar *.PNG para el diseño del blog, y *.JPG para las imágenes de las entradas. Hay quienes prefieren usar *.GIF pero, dependiendo del caso, me quedo sólo con los formatos antes mencionados para garantizar la calidad de las imágenes sin que ello perjudique el tiempo de carga del blog.

PhotoFiltre

Reduciendo el tamaño y peso de tus fotos con PhotoFiltre

Uso Photoshop, y también Gimp para editar imágenes, pero considero que son programas algo complejos (y de lenta carga) para una tarea tan simple como la optimización de imágenes para la web, especialmente para quienes no están familiarizados con este tipo de programas. Por ello, uso PhotoFiltre para este tipo de tareas.

PhotoFiltre es un software de edición de imágenes para Windows del cual podemos obtener una versión completamente gratuita y legal (Descarga PhotoFiltre). La versión en inglés pesa 4MB comprimida, y cuenta con archivos de traducción a distintos idiomas que se ponen en la carpeta de instalación del programa. Por ejemplo, si quieres traducir PhotoFiltre al español, deberás copiar el archivo TranslationES.plg en C:\Archivos de programa\PhotoFiltre, quitando el archivo de traducción al inglés. También hay una versión portable para que lleves en tu memoria USB a todas partes.

Podrás notar que el programa se abre inmediatamente, sin tiempos de espera, y que es muy sencillo de usar. En él, hay cuatro herramientas que uso frecuentemente: Tamaño de Imagen y Tamaño de Lienzo (ambos en el menú Imagen); Cortar, que aparece al presionar el botón derecho del mouse luego de seleccionar una porción de la imagen ;y Compresión, que aparece al momento de guardar las imágenes.

Ejemplo de optimización con PhotoFiltre

Tomé una imagen de Sxc.hu (beautiful woman with sunflowers) de 3888×2592 píxeles y 6,36MB de peso. Sería una locura subirla tal cual y redimensionarla desde el editor de la entrada. Lo ideal es reducir su tamaño desde Tamaño de Imagen, hasta lograr el tamaño que efectivamente vayamos a usar en nuestro blog. Si la columna principal de mi blog tiene 600 píxeles de ancho, ese será el tamaño de referencia al momento de redimensionar.

Personalmente, prefiero usar siempre imágenes de no más de 500px de ancho. Por ello, cambié el tamaño original de la mujer con girasoles a 500×333 píxeles, con un peso de 200kb. Como 200kb aún es mucho, vamos a Archivo/Guardar como y bajamos la Compresión de 100 a 80 o menos, dejando las demás opciones por defecto (el formato a guardar debe ser *.JPG). La misma imagen, con un 75% de compresión, pesará 62kb en vez de 200kb, y la diferencia será apenas perceptible.

PhotoFiltre

A modo de experimento, podemos seguir comprimiendo para probar cuál es el mínimo peso al que podemos llegar sin perder calidad de imagen.

Consideraciones finales

  • PhotoFiltre tiene un montón de herramientas que podrás probar para mejorar tus imágenes (filtros y marcos, por ejemplo): ofrece lo esencial para quienes comienzan en el mundo del retoque fotográfico.
  • Para ahorrar tiempo, prefiere comprimir las imágenes JPG en PhotoFiltre a un 80%, y sólo evaluando si la calidad y el peso son los adecuados, considera comprimir más o menos.
  • Cabe preguntarse cuál es el peso ideal para una imagen de una entrada de blog. David Cantone piensa que lo ideal es que las imágenes pesen entre 20 y 40kb, pero buscando siempre el equilibrio entre peso y calidad.
Compártelo!
3 Comentarios en Optimizar imágenes para la web con PhotoFiltre
  1. MontoGeek dice:

    Muchas Gracias ppor el post! De verdad al principio es muy complicado mantener a los usuarios justamente por eso, el sitio es lento.
    Gracias por la recomendación.

  2. Patricianabhen dice:

    muchas gracias, me ha gustado pero querria saber como mides una imagen de fondo?? si quieres que tu fondo sea como un slvapantallas.

  3. Pablo dice:

    Muchas Gracias, llevaba tiempo buscando esta información, porque era la único que me quedaba de resolver de los parámetros de gtmetrix.

Deja tu comentario
Tu Comentario