17 formas de reducir tamaño y comprimir fotos para tu web

Como reducir tamaño o comprimir fotos para tu web

En más de una ocasión te he hablado de la importancia de que tu sitio web cargue lo más rápido posible para evitar que tus clientes se cansen de esperar y se vayan a la web de la competencia.

Son varios los factores que debes optimizar y que influyen en la velocidad de carga de una web.

Entre ellos, uno que considero muy importante es que todas y cada una de las imágenes de tu sitio web estén correctamente optimizadas.

Hoy quiero enseñarte 17 formas de reducir el tamaño y comprimir fotos para tu web, de tal manera que nunca más tengas el problema de que las imágenes de tu sitio tarden una eternidad en ser mostradas a tus usuarios o posibles clientes (con el consiguiente riesgo de que se larguen igual de rápido que han venido).

¿En qué consiste optimizar imágenes para una web?

El proceso de optimización de imágenes consiste en reducir tanto las dimensiones (el ancho y el alto) como el peso (lo que ocupa en MB o KB) de estas con el objetivo de que el tiempo de carga de tu sitio web sea el menor posible.

Todo ello, por supuesto, sin que la calidad de la imagen se vea afectada (al menos, a simple vista).

De nada te sirve reducir el tamaño o comprimir las fotos para tu web si estas se ven en una calidad paupérrima, empeorando de manera considerable tu imagen o la de tu negocio.

Veamos esto con un ejemplo más práctico.

Imagina que tienes una fotografía de 4000 x 2000 pixeles con un peso de 4 MB y quieres ponerla en tu sitio web.

Ahora imagina también que, en realidad, esa imagen en tu web va a estar en un tamaño de 300 x 150 pixeles.

Como ves, la diferencia de tamaño (y en consecuencia, de peso) es considerable.

Si pones la imagen en tu web con las dimensiones originales, estarías haciendo que el equipo del usuario que la visita tuviera que descargar  4 MB para ver una fotografía en un tamaño de 300 x 150 píxeles.

Un peso y un tiempo de descarga que, por ejemplo, para un usuario que te visita desde un smartphone es una auténtica barbaridad y un consumo de datos prohibitivo.

Incluso puede serlo para otro que entra a tu sitio web desde un ordenador de sobremesa y una línea normal de ADSL.

¿Te suena meterte a una web y que una imagen cargue como “por trozos” y muy lentamente?

Eso sin contar que la imagen, al reducirla tanto de tamaño sin haber sido previamente optimizada, puede llegar a verse distorsionada.

O, lo que es lo mismo, perder calidad visualmente hablando.

Tan malo es poner una imagen muy grande en un tamaño muy pequeño como una imagen muy pequeña en un tamaño muy grande.

Como ves, comprimir tus fotos sin perder calidad es algo necesario y fundamental para el éxito de tu sitio web.

Si con todo esto que te he contado empiezas a darte cuenta del grave problema que supone no reducir el tamaño y el peso de todas las imágenes de tus páginas web estoy seguro que la pregunta  que te estás haciendo  en estos momentos es la siguiente.

¿De qué manera puedo reducir el tamaño de mis imágenes y fotos?

Para optimizar las imágenes o fotografías de tus páginas web cuentas fundamentalmente con tres opciones.

1# Programas de diseño gráfico o retoque de fotografías

Existen varios programas (tanto de pago como gratuitos) con los que puedes optimizar las imágenes para tu sitio web de una manera sencilla y eficaz.

Con ellos podrás establecer las medidas que necesites para cualquier fotografía que quieras insertar en tu proyecto.

En mi caso, por ejemplo, suelo utilizar Photoshop para realizar esta tarea.

Este tipo de programas, por regla general, cuentan con una opción llamada “Guardar para web” (así se llama en Photoshop, puede que en la que tú utilices tenga un nombre distinto pero parecido a este), la cual te permitirá reducir considerablemente el peso de las imágenes sin perder prácticamente calidad en función de las opciones de optimización que desees marcar antes de realizar el guardado.

2# Herramientas online para comprimir fotos o imágenes

Esta solución es ofrecida por muchos y variados sitios que puedes encontrar por internet y en los que puedes realizar esta tarea sin necesidad de instalar ningún tipo de software en tu ordenador.

Algunos de ellos son muy completos y ofrecen una amplia gama de opciones para realizar la optimización de tus imágenes o fotografías de una manera muy intuitiva, práctica y simple.

Por supuesto, casi todas ellas enfocadas a ser utilizadas por cualquier tipo de usuario independientemente de los conocimientos que disponga en este tipo de tareas de diseño gráfico o retoque fotográfico.

3# Plugins para optimizar imágenes en WordPress

Una vez más, WordPress aparece en nuestra ayuda para realizar una tarea necesaria para prácticamente todas las páginas web del mundo.

A través de la instalación de ciertos plugins programados para este maravilloso gestor de contenidos puedes optimizar tus imágenes para reducir su tamaño y mejorar el tiempo de carga de tu web.

“Vale José. Pero necesito algo más concreto que esta clasificación tan generalizada”.

Tranquilo, que no pienso dejarte con la miel en los labios.

Sigue leyendo y descubrirás varias herramientas (algunas de pago y otras gratis) para poder comprimir las dimensiones y el peso de tus imágenes.

Aparte de las herramientas que encontrarás más abajo, te dejo un vídeo explicativo de cómo puedes redimensionar imágenes y comprimir fotos para reducir tanto su tamaño como su peso y que estén perfectas para tu sitio web.

El vídeo incluye la posibilidad de hacerlo tanto con Photoshop como con una de las herramientas mencionadas abajo que es online y totalmente gratuita. ¡Empieza desde hoy y no lo dejes para mañana!

Del mismo modo, un poco más abajo tienes otro vídeo aún más interesante en el que te muestro cómo optimizar imágenes para web en masa (o en lote, llámalo como quieras).

Con ello, vas a ahorrar muchísimo tiempo a la hora de optimizar imágenes para tu web que tengan que contar con unas dimensiones similares (como pueden ser las imágenes de una tienda online, de un portfolio de trabajo o de una galería de imágenes cuyas fotos tengan el mismo formato horizontal o vertical y tamaño).

Eso sí, para seguir este tutorial es imprescindible que tengas Photoshop.

Programas, herramientas online gratuitas y plugins con los que puedes comprimir fotos para tus páginas web

1# Photoshop

El programa líder en todo el mundo de edición fotográfica no podía faltar en esta lista.

Con Adobe Photoshop podemos reducir el tamaño de cualquier instantánea o ilustración que queramos introducir en nuestro sitio web mediante la opción Imagen – Tamaño de imagen.

Una vez configurado el tamaño y para optimizar tanto el peso como la calidad de la imagen que vamos a subir a nuestra web, sólo tenemos que pulsar en Archivo – Guardar para web para elegir el formato en el que se guardará nuestro archivo optimizado o la calidad deseada en función de nuestros intereses.

No sé si te gustaría que realizase un tutorial paso por paso de cómo realizar esto y profundizar en las opciones que te ofrece la opción “Guardar para web”. Si es así, déjame un comentario en este mismo post y lo tendré en cuenta para el futuro. 😉

Lógicamente, el «pero» de este software es que es de pago. Pero si no quieres gastarte ni un euro en un programa de este tipo puede que te sirva la siguiente solución que te traigo.

Comprimir fotos con Photoshop

2# Gimp

Otro programa parecido a Photoshop con la diferencia que puedes descargarlo desde su web de manera totalmente gratuita.

Cuenta exactamente con las mismas opciones mencionadas anteriormente en el programa de Adobe, con lo que sólo tienes que seguir los mismos pasos que con Photoshop para tener tus imágenes perfectamente optimizadas.

Comprimir fotos con Gimp

3# Web Resizer

Web Photo Resizer nos ofrece un completo servicio de optimización de imágenes para nuestra página web… y algo más.

Desde esta herramienta online no sólo puedes comprimir las fotos para reducir el tiempo de carga de tu web, sino que también cuenta con otras opciones adicionales como rotar la imagen, cambiar la exposición, contraste o saturación de estas  e incluso añadir bordes del color que tu quieras.

Sin duda, es una herramienta para reducir tamaño o comprimir fotos muy completa.

Reducir tamaño de fotos con Web Resizer

4# ReducirFotos.com

Otra herramienta online muy útil con la que comprimir fotos y reducir su tamaño con la posibilidad de exportar en diferentes formatos tales como JPG, PNG e, incluso, PDF.

Cuenta también con un buen número de opciones adicionales tales como recortar, redimensionar, rotar, voltear, dibujar figuras geométricas o añadir textos en nuestras imágenes.

Reducir tamaño de fotos con Reducirfotos.com

5# Image Optimizer

Extremadamente fácil de utilizar. Así puede definirse esta otra utilidad online para reducir el tamaño de las imágenes de tu web.

Lo único que tienes que hacer es cargar la foto, seleccionar la calidad deseada, una anchura y altura máxima y pulsar sobre el botón para optimizar la imagen para poder descargarla en tu ordenador.

Muy sencillo, ¿verdad?

Comprimir fotos con Image Optimizer

6# TinyPNG

Esta herramienta nos permite desde su sitio web subir hasta 20 archivos a la vez de un máximo de 5 MB cada uno y comprimir su peso (no sus dimensiones).

Aunque a primera vista puede parecer algo limitado, lo cierto es que seguramente es uno de las más potentes que existen en la actualidad.

Esto es debido a que reduce selectivamente la cantidad de colores de la imagen sin modificar sus dimensiones con un tipo de compresión denominado “lossy”.

Además, TinyPNG te ofrece la posibilidad de poder descargar un plugin gratuito para WordPress y otro de pago para Photoshop.

¿Qué más necesitas que tenga para empezar a utilizarlo?

Eso sí, está mas enfocada a ficheros PNG. Para los JPEG mira la siguiente.

Reducir el tamaño de fotos con TinyPNG

7# TinyJPEG

De los mismos creadores que la herramienta anterior, con las mismas posibilidades y con tan sólo una diferencia: enfocado a ficheros JPEG.

Comprimir fotos con TinyJPEG

8# Compressor.io

Otra herramienta para comprimir fotos e imágenes de una manera súper sencilla, profesional y desde su web sin necesidad de descargar o instalar ningún programa en tu ordenador.

Tienes la posibilidad de exportar hasta en 4 formatos (JPEG, PNG, GIF y SVG) y 2 tipos de compresión llamados Lossless y Lossy.

La diferencia entre uno y otro radica en que el primer tipo da preferencia a optimizar la calidad de la imagen aunque el archivo resultante sea de un mayor tamaño, mientras que la segunda te permite reducir hasta un 90% las dimensiones a costa de que la calidad de la imagen disminuya un poco más.

Reducir tamaño de fotos con Compressor.io

 9# Smush.it

De esta herramienta ya te he hablado anteriormente… ¿recuerdas?

Smush.it (o WP-Smush) es un plugin para reducir el tamaño o comprimir fotos en WordPress. Seguramente uno de los más conocidos y utilizados para esta tarea en la actualidad.

Lo bueno de este plugin es que lo único que tendremos que hacer será instalarlo en nuestro sitio web y él solito se encargará de hacer todo el trabajo de optimización cada vez que carguemos una imagen en nuestro sitio web.

Eso sí: sólo disminuye el peso de la foto en cuestión, no las dimensiones.

Comprimir fotos con Smush.it

10# Kraken.io

Al igual que Compressor.io, Kraken te permite comprimir tus fotografías entre los tipos de compresión Lossless y Lossy.

Kraken.io te facilita un poco más esta tarea con sus diferentes estrategias para redimensionar las imágenes que cargues así como permitiéndote establecer un ancho y un alto fijo para que la optimización sea perfecta.

Reducir tamaño de fotos con Kraken.io

11# ImageOptim

Este es un programa descargable para usuarios de Mac y para utilizarlo es necesario que lo instales en tu ordenador.

Personalmente, no lo he probado ya que no dispongo (aún) de ningún equipo de Apple. Pero por lo que he podido ver por internet, es una herramienta para comprimir fotos muy simple y potente.

Además, es totalmente gratuita. ¿Qué más se puede pedir?

Comprimir fotos con ImageOptim

12# Shrink O’Matic

Otro programa descargable de gran calidad para reducir el tamaño y el peso de las imágenes de tu web.

Decir que esta aplicación es de Adobe AIR ya nos dice bastante sobre ella.

Puedes redimensionar fotos de tipo JPG, PNG y GIF además de contar con opciones para rotar nombrar o, incluso, poner marca de agua a las imágenes que optimices.

Reducir tamaño de fotos con Shrink O'Matic

13# Dynamic Drive Optimizer

Esta es una herramienta online extremadamente sencilla pero también carente de varias opciones de las que sí disponemos en otras aplicaciones.

Con Dynamic Drive Optimizer puedes comprimir tus fotos de hasta 2.86 MB de peso. Sólo tienes que cargar la imagen en cuestión y seleccionar si quieres exportarla en formato GIF, PNG o JPG.

Una vez pulsado el botón de optimizar, la herramienta te dará la imagen comprimida en diferentes calidades.

Lo malo es que no puedes decidir el ancho y alto al comprimir la foto y tendrás que adaptarte a lo que Dynamic Optimizer decida en este sentido.

Comprimir fotos con Dynamic Drive Optimizer

14# ConvertImage

Otra manera muy simple de comprimir tus imágenes.

Con ConvertImage sólo tendrás que cargar la foto en su aplicación online para después seleccionar el porcentaje de compresión que deseas para la misma.

Como inconvenientes, te diré que no puedes elegir las dimensiones de la imagen optimizada ni el formato, ya que ConvertImage sólo exportará tus archivos resultantes en formato JPG.

Reducir tamaño de fotos con Convert Image

15# PunyPNG

Si bien PunyPNG realiza una muy buena compresión de tus imágenes JPG, PNG o GIF, lo cierto es que personalmente es de las que menos me gusta debido a una de sus restricciones.

Este compresor de imágenes online, en su versión gratuita y sin registro, sólo nos permite comprimir imágenes de un máximo de… ¡500 KB!

Sin duda, esto es algo que lo hace estar muy por detrás de otras opciones que ya te he mencionado en este artículo. Aunque también es cierto que cuenta con una versión Pro que amplía sus funcionalidades.

Comprimir fotos con PunyPNG

16# CompressNow

Esta es una herramienta para comprimir fotos tan sencilla como útil y práctica.

Lo único que tendremos que hacer es cargar nuestra foto de hasta 9 MB de peso, elegir el porcentaje de nivel de compresión deseado y pulsar sobre el botón “Comprimir”.

Este servicio online automáticamente generará la imagen totalmente optimizada con el tamaño máximo permitido en función del tanto por ciento que hayas indicado y guardando las proporciones.

Reducir tamaño de fotos con CompressNow

17# Shrink Pictures

Completa herramienta online que te permite reducir el tamaño de tus fotos con muy poca pérdida de calidad.

Cuenta con numerosas opciones para comprimir fotos que se adapten totalmente a tus necesidades.

Entre estas opciones caben destacar las siguientes: elegir el ancho máximo de la fotografía en píxeles o en porcentaje, posibilidad de aplicar efectos especiales al archivo resultante o definir el grado de calidad final de la fotografía comprimida.

Comprimir fotos con Shrink Pictures

Para finalizar…

Estas son sólo algunas de las muchísimas herramientas para reducir el tamaño de las fotos o comprimir fotografías sin perder prácticamente nada de calidad.

Te he hablado de las que yo conozco, pero estoy seguro que si buscas por Google encontrarás muchas más que se ajustarán perfectamente a cualquier necesidad que puedas tener.

Después de leer este artículo, estoy seguro que ya nunca más las imágenes o fotos de tu web tardarán una eternidad en cargar.

¿Conoces alguna herramienta más que consideres que debería aparecer en esta lista?

Anímate a dejarme tu comentario un poco más abajo y seguimos hablando.

Imagen | Flickr

¿NECESITAS AYUDA PARA CREAR UNA WEB QUE TE GENERE NEGOCIO?
Si estás buscando un diseñador web profesional que, además de una web bonita y con personalidad, te haga una web que capte clientes y ventas por internet, cuéntame que es lo que necesitas y definamos un plan a medida para tu caso.

27 comentarios en «17 formas de reducir tamaño y comprimir fotos para tu web»

  1. Muy bien abordado este tema. Para mí es un problema bastante recurrente, no solo en web, sino también a la hora de hacer catálogos o material publicitario. El trabajar con estas cosas me vino un poco de sopetón, y he tenido que aprender mucho sobre la marcha, y aún así hago un poco lo que puedo con los conocimientos y herramientas a mi alcance. Por mi parte si estaría interesada en el tutorial de reducción de imágenes. Normalmente uso Photoshop (y alguna vez Gimp), pero seguro que tú me descubres alguna cosa que no había tenido en cuenta antes.

    Responder
    • Hola Amelia,

      Tienes razón en lo de que también es un problema en cuanto al diseño de imagen corporativa cuando el cliente te manda un material que no es apto visualmente hablando ni por tamaño para realizar un trabajo de este tipo.

      Sin embargo, optimizar bien las imágenes para una web cobra aún más importancia por el hecho de que al no hacerlo estamos consumiendo más recursos de nuestro servidor y empeorando la experiencia de usuario en nuestros sitios web.

      Muchas gracias por tu comentario.Me apunto tu interés para ese tutorial sobre optimización de imágenes en Photoshop.. 😉

      ¡Saludos!

      Responder
  2. Respecto al plugin, cual es la diferencia entre reducir el peso y no las dimensiones, me explico, como afecta esto a tu post en el SEO?..

    Es una duda muy tonta lo sé, pero no me entero muy bien.

    Muy completo el post.

    Responder
    • Hola Adela,

      Buena pregunta la que planteas.

      El peso es lo que ocupa la imagen en tu servidor (por ejemplo, 200 kilobytes) y las dimensiones es el tamaño de la imagen (por ejemplo 2000px de alto por 1000px de ancho).

      Si mantienes unas dimensiones grandes, aunque el plugin reduzca su peso, no lo reducirá nunca tanto como si primero reduces la dimensión al tamaño que te interesa y luego usas el plugin para reducir su peso.

      Espero haber aclarado tu duda con esta explicación. Gracias por tu comentario. 😀

      Responder
  3. Hola José Antonio.
    Al igual q las personas anteriores, también consideró q ha sido un post muy interesante. Yo uso para trabajar las imágenes fireworks, imagino que lo conoceras, aunque me parecería muy positivo realizar el tutorial del que hablas, seguro q será interesante al igual q toda la información que nos das
    Un saludo

    Responder
  4. Hola José Antonio. Al igual que el anterior comentarista, me ha parecido un post interesantísimo y me.encantaria poder hacer un.tutorial contigo de photoshop. Con lo bien que explicas todo, estoy convencida q sería genial.
    Un saludo

    Responder
  5. Hola a todos. Felicidades por el contenido del post. Interesante y útil. El tiempo de carga siempre es un quebradero de cabeza y, evidentemente, el espacio que ocupan esas imágenes en el servidor tampoco ha de olvidarse. Soy aficionado a la fotografía y la informática y, fruto de esa mezcla, estoy desarrollando en wordpress mi sencilla página web sin más aspiraciones que el mero entretenimiento. No obstante, con el paso del tiempo he dedicado más atención al asunto del tamaño de las imágenes. Uso la opción de exportar para web de Photoshop; muy interesante porque permite comparar la calidad en función del formato (GIF, PNG, JPEG), y dentro de este último a distintos niveles. Concretamente trabajo con los siguientes parámetros: formato JPEG, 72 ppp, calidad 80/100 y dimensión máxima de 960 px en el lado largo de la foto. Estas imágenes las dispongo en galerías para que puedan ser visionadas individualmente en un Lightbox que gestiono con el plugin Photogallery. Este plugin me realiza una sola copia en menor tamaño a diferencia de las que incorporo a través de la biblioteca de medios que genera, creo, cinco copias. No sé si mi sistema es el óptimo; lo que si puedo asegurar que el rendimiento de la página mejora si le prestamos una mínima atención al tamaño y calidad de nuestras imágenes. Saludos a todos.

    Responder
    • Fantástico aporte el tuyo Miguel Ángel. Seguro que con los datos que has aportado ayudas a más de una persona con este tema. Como bien dices, de lo que no se puede dudar es que prestándole un poco de atención a este tema se notan cambios importantes en lo que es el rendimiento de tu plataforma digital. 😉 Saludos!

      Responder
      • Unos días José Antonio, myo creo que la lista es más que suficiente, pero una de las opciones que se nos olvida también, es que en nuestra cámara tenemos la poso ilidad también de hacer fotos a distintos tamaños y la imagen te comprimir mejor, ya que a veces bajar el peso de un imágenes influye también en como se a tomado el original.
        Un saludo

        Responder
    • ¡Cuanto tiempo lleva sin responder este comentario! Perdón por ello José, a veces se me pasan!

      Si las has probado, me gustaría que dejases tu opinión por aquí para que cualquiera que lea los comentarios pueda conocer varios puntos de vista. Estás invitado a ello!

      Saludos!

      Responder
    • Hola Mónica,

      Con el único programa que yo he hecho esto (no sé si habrá alguno más, lo desconozco) es con Photoshop, ya que puedes generar y guardar una especie de «secuencia automática» que repita los pasos que has hecho una vez para que los ejecute las veces que tú necesites con las imágenes que tú necesites. Desgraciadamente, no tengo ningún artículo ni vídeo actualmente que te muestre el procedimiento exacto para realizarlo, lo siento.

      Saludos.

      Responder
  6. Tengo en mente una galería fotográfica y me parece un tema muy interesante a tratar para intentar evitar que la página cargue demasiado lenta. ¿Me podrías orientar en un formato, tamaño y peso estándar de imagen para que no pierda demasiada calidad?

    Responder
  7. José Antonio, muchas gracias excelente video, muy claro y práctico. Respecto de la optimización de las imágenes para la web, para ajustar la imagen al tamaño exacto del espacio que ocupará en la página, de qué forma o qué herramienta puedes sugerir para determinar el tamaño en pixels al que ajustarías tu imagen.

    Responder
  8. Excelente artículo. Nos facilitas la labor a los que somos novatos en temas de informática,
    Muy buenas las descripciones de los diferentes programas de descarga o bien on-line.
    Redactas bien y la lectura es amena.
    Se nota que te dedicas a temas que te apasionan.
    A mí me has ayudado mucho.
    MIL GRACIAS.

    Responder
Deja un comentario

Responsable: José Antonio Carreño Finalidad: Gestionar los comentarios Legitimación: Consentimiento del interesado Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. En todo caso, los datos que nos facilitas están ubicados en servidores cuya sede se encuentra dentro del territorio de la UE o gestionados por Encargados de Tratamiento acogidos al acuerdo “Privacy Shield”. Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos.