Cómo reducir el tamaño de las fotos y optimizar imágenes

Después de sentar las bases para entender el trabajo con fotos e imágenes en los anteriores artículos, este artículo inicia la parte que se centra su tratamiento, cosas como la reducción de su tamaño con el fin de que se encuentren optimizadas para ser utilizadas en la Web o para ser compartidas por otros medios como, por ejemplo, el correo electrónico.

Reducir el tamaño de las fotos (las dimensiones de las imágenes)

Como se ha comentado en los artículos previos, uno de los principales problemas a la hora de trabajar con fotos e imágenes lo suponen en la actualidad las enormes resoluciones con las que trabajan por defecto las cámaras digitales. Resultan enormemente exageradas usos normales en la Web penalizando innecesariamente mucho los tiempos de carga/descarga, envíos por correo electrónico, provocando rechazos de los correos que las adjuntan, etc.

imagen jpg sin reducir

Imagen JPG sin reducir: 1734×1151 puntos, 421Kbytes. Hacer clic para ver la imagen.

Por tanto hay que examinar si las dimensiones de la imagen se ajustan a un valor razonable, como regla general se puede asumir un tamaño máximo en torno a 1 millón de puntos o lo que es lo mismo 1 megapixels, cifra que nace del hecho de que los formatos entre 1024×768 y 1440×900 puntos son los formatos de pantalla de ordenador más habituales en la actualidad, de modo que las imágenes que se vayan a utilizar en la Web deberían tomar estos valores máximos como referencia.

En torno a estos valores ya suele ser relativamente fácil mantener tamaños menores de 200kbytes, aunque esto es una orientación muy a groso modo ya que según la complejidad de la imagen puede variar mucho. En cualquier caso, un tamaño en torno a este valor empieza a ser bastante razonable para su uso en Web.

Ajustar el nivel de calidad de la imagen

El siguiente paso es la revisión del nivel de calidad de las imágenes, para ello se puede trabajar fundamentalmente en dos líneas: en formatos con compresión con pérdidas como JPG, aumentar la compresión a cambio de pérdida de calidad y la reducción de colores.

Las primeras veces puede resultar tedioso porque hay que probar hasta dónde se puede llegar a reducir la calidad para mantener un resultado aceptable y en qué medida se consigue reducir el tamaño de una imagen, pero después de unas cuantas veces se intuye fácilmente y ya se convierte en una tarea fluida.

imagen jpg reducida

Imagen JPG reducida en tamaño y calidad: 1000×664 puntos, calidad muy reducida (25%), 51Kbytes. Se aprecia claramente una pérdida de calidad excesiva. Hacer clic para ver la imagen.

Un caso especial es la reducción del número de colores, esto es útil, sobre todo, para casos especiales la creación de un logotipo.

Una imagen así puede que tenga suficiente, por ejemplo, con 3 o 4 colores. En un formato GIF supone utilizar solamente 2 bits frente a los 8 bits que utilizaría normalmente, reduciendo así el tamaño 4 veces más.

La reducción de colores ya entra en el tratamiento avanzado de imágenes, requiere herramientas avanzadas y se sale del alcance de este artículo, en este enlace y en éste se aborda más a fondo.

Ejemplo práctico

En la práctica suele ser suficiente con reducir el tamaño y un poco la calidad para conseguir buenos resultados. Para hacerlo vamos a ver dos vías: una herramienta generalista, Picasa de Google, y una herramienta especializada, FastStone Photo Resizer. Ambas herramientas son gratuitas y de muy buena calidad.

Picasa está muy pensada para las necesidades de los usuarios “normales” de la Web que quieren hacer un poco de todo como lo son las tareas aquí discutidas o cosas como corregir el efecto de “ojos rojos” (se tratará en los artículos siguientes) en las fotos, pero sin llegar a realizar tratamientos profesionales a sus imágenes.

FastStone Photo Resizer es un ejemplo de una herramienta especializada que tiene muchas más posibilidades y matices para la reducción y optimización de imágenes, pero, por otro lado, no su funcionalidad se limita estrictamente a esto.

Multiplica el Nº de gente que lee tu blog

Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos:

  • 77 Plantillas de títulos probadas que multiplicarán los clics.
  • Sacaras infinitas ideas crear tus propios títulos.
  • Con las palabras "mágicas" redactarás textos irresistibles.
¡Buenas! ¿Me dices tu nombre?

¡Un placer conocerte!

Apuntáte aquí y recibirás gratis una copia del eBook.

Algunos vídeos prácticos

Y ahora, para pasar de la teoría a la práctica, te dejamos algunos vídeo-tutoriales de Ciudadano 2.0 que te enseñan como reducir el tamaño de las fotos o cualquier otra imagen digital y alguna cosa más como una manera de eliminar de forma totalmente automática y en segundos el efecto de los ojos rojos en las fotos.

En el vídeo que viene a continuación se explica se explica cómo reducir el tamaño de una imagen sin tener que instalar ningún programa gracias a la herramienta de edición de imágenes digitales online Pixlr:

En este otro vídeo te enseña cómo hacerlo con Picasa, que además, a diferencia de Pixlr, permite la reducción del tamaño de imágenes por lotes de una sola tacada. Pero a cambio, te tienes que instalar el programa:

Y en este último vídeo, te enseñamos cómo puedes corregir  de manera automática el efecto tan feo de los ojos rojos en las fotos tanto en Picasa como Pixlr:

Colección de herramientas

Terminamos este artículo con una colección de herramientas para acometer las tareas anteriores. Las tareas básicas de reducir las dimensiones de una imagen individual o cambiar su formato se pueden realizar normalmente con las herramientas que trae el propio sistema operativo como lo pueden ser Paint en el caso de Windows o iPhoto en el caso de Mac OS X.

En los siguientes enlaces se pueden ver dos vídeos con un ejemplo de cómo utilizar el programa Paint para ello y otro vídeo de iPhoto que permite hacer lo mismo de una manera similar a Paint.

captura programa riot

La herramienta RIOT (Radical Image Optimization Tool) – hacer clic para agrandar

Por otra parte hay una enorme cantidad de herramientas libres de edición de imágenes y gratuitas muy buenas, tanto para el sistema operativo Windows, como para Mac OS X y para Linux. El ejemplo clásico es GIMP, una herramienta que se lleva posicionando desde hace tiempo como alternativa profesional a Photoshop.

En el caso de querer centrarse solamente en la reducción y optimización de imágenes, la mejor opción y la más sencilla para el usuario son las herramientas especializadas.

En este sentido, ya hemos hablando un poco más arriba en este post de la aplicación FastStone Photo Resizer que permite hacer todo lo que se ha mencionado en este artículo, incluida la reducción de la profundidad del color y más cosas, y lo permite hacer todo por lotes.

Otra opción recomendable, centrada en la optimización de las imágenes, es la herramienta Radical Image Optimization Tool. Aunque esta herramienta también puede trabajar con lotes de imágenes destaca por lo práctico que resulta que visualiza sobre la marcha el nuevo tamaño de fichero de la imagen mientras que se van ajustando los parámetros de optimización.

Herramientas en la nube

Existen también herramientas en la nube (es decir, que se usan desde un navegador) como ésta que son extremadamente sencillas y cómodas de utilizar, dan buenos resultados y evitan al usuario la instalación de un programa. También las hay que permiten trabajar con lotes de imágenes y descargar las imágenes modificadas como fichero comprimido como ésta. En este enlace y en este otro se puede encontrar una lista de este tipo de herramientas en la nube.

De hecho, en la actualidad son las herramientas que mas utilizamos, concretamente estas dos:

  1. Picresize: Es una herramienta online que permite cambiar las dimensiones en pixeles de las imágenes. Fundamental para bloggers y cualquier autor de una web porque la gente sigue pecando de subir imágenes excesivamente grandes a sus webs con los consiguientes problemas de consumo de espacio, lentitud de la página, etc.
  2. TinyPNG: Esta herramienta online reduce el tamaño de fichero de imágenes JPG y PNG optimizándolos, sin reducir las dimensiones en pixeles de la imagen. Funciona muy bien y consigue reducciones realmente muy importantes, no son pocas las veces que nos ha permitido reducir el tamaño de fichero una cuarta parte sin ninguna pérdida de calidad apreciable.

Acerca del autor: Berto López

Soy autor y cofundador de este blog, actividad que realizo como hobby ya que las nuevas tecnologías siempre me han atraído mucho.

Ahora trabajo por cuenta ajena, pero he sido empresario durante casi una década trabajando en la implantación de proyectos tecnológicos en sectores con carencias en conocimiento de las nuevas tecnologías, como Retail y Pymes.

De hecho, esta experiencia ha sido la inspiración para el blog: ayudar a profesionales y pequeños empresarios a conocer y aprovechar el potencial de las nuevas tecnologías y la web 2.0.


Comentarios

  1. Hola Berto,

    Muy buen artículo. Hubiera estado ya rematadamente bien si hubiérais incluido algunos plugins para WordPress con funcionalidades parecidas pero entiendo que eso serviría sólo para aquellos usuarios que utilicen esa plataforma como CMS.

    Un abrazo

    • Berto López dice:

      Hola Pedro,

      Éste es uno de los primeros posts del blog y no estaba orientado a WordPress, en su momento lo actualizaremos y lo pondremos totalmente al día, incluido plugins para WordPress.

      ¡Un saludo!
      Berto

  2. Muchas gracias Berto por todos tus consejos. Yo estoy preparando para iniciar un blog y estoy más que perdida, pero tus post parecen facilitarlo todo. Aunque voy digiriendo poco a poco pues soy nuevísima es esto.
    Elsa.

  3. Hola, estoy empezando mi nuevo blog y estoy aprendiendo un poco de todo para desarrollarlo lo mejor posible desde el principio.

    Me parece fundamental el detalle que no debe de pasarse de reducir el tamaño de imagen; he visto el video de Pixlr; me parece muy parecido a lo que he hecho alguna vez en iPhoto. Si tengo este programa, ¿no hace falta que haga este proceso en Pixlr sino en iPhoto?

    Muchas gracias por su respuesta 🙂

  4. Hola Berto. Te leo desde hace tiempo ya. Sé que este artículo es antiguo pero me he animado a comentar porque quisiera contar que he tenido muy buenas experiencias con un software llamado Shrink O’Matic para optimizar las imágenes de mi web. Es muy intuitivo y obtengo buenos resultados de peso y calidad.
    Por otra parte, quisiera preguntarte qué tan efectivo es el optimizador de imágenes por defecto que utiliza Webempresa. ¿Al utilizarlo hace innecesario el uso de otras herramientas o tiene margen de mejora?
    Saludos.

  5. Excelente post con sugerencias muy útiles para optimizar las imágenes. Un problema recurrente y de difícil solución si se busca un tamaño “grande” full screen.
    Has proporcionado herramientas muy útiles que no conocía, tus enlaces a otros posts también son relevantes.
    Resultado: Artículo genial para todos los blogueros y diseñadores online.

  6. Genial, la verdad que necesitaba convertir varias imágenes por lotes y photoshop no acababa de cumplir con los requisitos que quería.

    Gracias por compartir la info!

Deja un comentario

Para ello, por favor, sigue estas pautas, por respeto a nuestra comunidad (y a nosotros):

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

*

 

Rellena el formulario y accede a nuestro training rápido de pro-blogging

Aprenderás paso a paso y desde cero cómo usar las mejores técnicas, trucos y secretos de los top bloggers para dar el salto al siguiente nivel

Y todo 100% gratis :)