Cómo reducir una imagen para publicarla en una web o en un blog

En este artículo me gustaría enseñarte a recortar y reducir una imagen para incluirla en tu blog o en tu web.

El primer problema con el que se encuentran mis clientes, cuando comienzan a trabajar con su web, es que insertan imágenes enormes en la misma. Si bien, la mayor parte de las veces, ellos no son conscientes, esto conlleva una serie de problemas que a la larga terminan dando la cara:

• Lentitud de carga de la web
• Perjuicio en el posicionamiento en buscadores
• Consumo de tráfico web por parte del servidor
• Una peor experiencia de usuarios de dispositivos móviles

Es cierto que los que trabajamos en web tenemos ya completamente interiorizado el concepto de reducción de imágenes para la web (o deberíamos), y a veces no tenemos en cuenta que los demás no tienen por qué entenderlo. Por eso, aunque hay muy buenos artículos escritos sobre este tema, voy a tratar de hacer una comparación de los diferentes métodos existentes, y explicar cómo se utilizan.

Pero antes, es necesario explicar algunos conceptos básicos que nos ayudarán a comprender mejor este proceso.

Conceptos

No es lo mismo resolución que tamaño de imagen, el dimensionamiento de uno y otro afectan claramente en el peso del archivo, y por ello deberemos comprender qué son y cómo funcionan.

1. Resolución de imagen: en fotografía digital, la resolución se refiere a la cantidad de detalles que pueden observarse en una imagen, es decir, para un mismo tamaño de imagen, cuántos píxeles podemos encontrar dentro de la misma. Por tanto, a mayor resolución (manteniendo siempre el mismo tamaño de imagen), obtendremos un mayor detalle, como podemos ver en este ejemplo tomado de Wikipedia.
   

   

   La resolución se expresa generalmente en puntos por pulgada, y habitualmente se utilizan dos cantidades según el ámbito en el que estemos trabajando: si trabajamos en fotografías que se van a imprimir en una imprenta o en nuestra impresora, trabajaremos con 300 ppp; sin embargo, si estamos trabajando con una imagen que se va a publicar en la web, trabajaremos con 72 ppp. Esto afectará al peso de la imagen (el tamaño de archivo de la imagen) enormemente, siendo infinitamente menor en el segundo caso.
2. El tamaño de imagen: cuando hablamos de tamaño de imagen, nos estamos refiriendo a las dimensiones de la misma, que pueden ser en centímetros si estamos trabajando con un poster o con una imagen para un libro, pero que si se trata de una imagen para publicar en la web, se expresará en píxeles. Los píxeles son esos cuadraditos que se encuentran dentro de la pantalla de nuestro ordenador y que, si hay más dentro de ella, ésta tendrá más resolución, mientras que si hay menos píxeles, ésta tendrá menos resolución. Como vemos, hemos vuelto a utilizar el concepto de resolución, pero aplicado a nuestra pantalla.No es la primera vez que me he encontrado con algún cliente que ha querido medir el tamaño de imagen con una regla en centímetros y, claro, las cuentas no le salían. Esto es porque, dependiendo de la resolución de la pantalla, y a igual tamaño de imagen, ésta se verá más pequeña o más grande.No existen tamaños prefijados para publicar en la web, puesto que variarán en función de nuestras necesidades y de las dimensiones que nos imponga la plantilla o theme de nuestra web. No obstante, como orientación, podemos tratar de utilizar imágenes de 250 a 400 px de ancho para las imágenes interiores de nuestro blog, si éstas ocupan el ancho total, no deberán superar los 800 px de ancho; y para sliders (nada recomendables) o imágenes superiores a pantalla completa, podemos trabajar con tamaños de 1.200 a 2.500 px de ancho. Pero teniendo en cuenta siempre que ésto va a afectar al peso o tamaño de archivo de la imagen.
3. Peso o tamaño de archivo: aquí no hay mucho que explicar, básicamente es el espacio que ocupa en disco un archivo de imagen. Éste aumenta de forma exponencial conforme se amplía el tamaño de la imagen, por lo que debemos ser muy cuidadosos a la hora de exportar las imágenes que vamos a insertar en nuestra web, ya que pequeñas variaciones de tamaño (la resolución ya sabemos que siempre va a ser 72 ppp), se traducirán en variaciones de peso considerables,  y esto se traduce a su vez en una mayor o menor velocidad de carga de la web.Si bien tampoco hay unas medidas estándar, sí que se dice que para que el posicionamiento SEO no se vea afectado, una imagen para un slider debería pesar no más de 100 kb aproximadamente, y que las imágenes que van dentro de la web, más pequeñas, tendrían que pesar máximo unos 50 kb. Mi experiencia es que es muy difícil alcanzar estos pesos de archivo, por lo que debemos intentar acercarnos lo más que podamos siempre que consideremos que no se está perdiendo calidad de imagen.

Métodos

A continuación explicaré los diferentes métodos de reducción de imágenes, desde los utilizados por los profesionales del diseño, hasta otros para usuarios más inexpertos. En cualquier caso, siempre hay que tener en cuenta que partimos de un tamaño de imagen en píxeles (por ejemplo 2.000 x 3.500 px), y que podremos reducir, pero jamás ampliar dicha imagen. Es decir, si partimos de una imagen de 200 x 450 px, poco podremos hacer. Y es que, no se puede sacar de donde no hay.

Como he dicho antes, voy a explicar diferentes métodos de reducción de imágenes, en primer lugar voy a comenzar por Photoshop y Gimp. A continuación, después de investigar y ver las recomendaciones de otros profesionales, encontré dos artículos relativamente recientes y que enumeraban una serie de herramientas. El primero, de Hipertextual, y el segundo de José Facchin, donde enumeran algunas herramientas web y de escritorio sencillas para reducir imágenes. El problema es que después de utilizar alguna que no terminó de convencerme, decidí hacer una comparativa para elegir basándome en los números.

Para hacer este test, partí de dos fotografías tomadas por mi con una cámara compacta normal (Canon Powershot SX220 HS). Tal cual las descargué de la cámara, hice las correspondientes reducciones en las diferentes aplicaciones, y saqué el porcentaje de reducción tomando como 100% el tamaño original de estas fotografías. En aquellas aplicaciones en las que se ha podido, se ha realizado un recorte, en las que no se avisa que no permite hacer recorte.

Photoshop

Este método no está al alcance de todo el mundo, aunque Photoshop es uno de los programas que más gente tiene instalado en su ordenador (inexplicablemente). Para mí es el método que yo prefiero utilizar, puesto que es donde más control se tiene sobre la imagen. Aquí no voy a explicar cómo se reducen las imágenes con Photoshop, pero si quieres utilizar este método, te invito a que sigas el siguiente tutorial en este mismo blog, aquí voy a resumir los pasos a seguir conceptualmente.

Cuando queremos reducir una imagen con Photoshop, el proceso es casi siempre el mismo:

1. Abrimos la imagen con Adobe Photoshop
2. En muchas ocasiones necesitaremos establecer unas proporciones determinadas, es decir un ancho por una altura de imagen determinados. Para ello, utilizaremos la herramienta Recortar. Aquí definiremos las proporciones en píxeles de la imagen y recortaremos todo el espacio sobrante de la misma.
3. Una vez recortada la imagen, viene el momento de exportarla reducida al tamaño final que queremos que tenga la misma. Esto lo haremos con dos posibles herramientas, ambas situadas en el menú Archivo de Photoshop: Exportar como…, que es el método actual para hacerlo, y el recomendado por Adobe; y Guardar para web (heredado), que es el método antiguo, aún presente en el programa en la fecha de escritura de este artículo, y que es el que a mi me sigue gustando más.Aquí, tenemos que tener siempre en cuenta que la resolución de salida para web es 72 ppp (puntos por pulgada), mientras que la de documentos para imprimir es mucho mayor, de 300 ppp. Esto hace que las imágenes para imprimir tengan un tamaño inmenso con respecto a las imágenes para web.

Ojo, es muy importante que no nos confundamos, ya que si bien en el paso 2 hablábamos de definir las proporciones en píxeles, lo que estamos definiendo son precisamente eso, proporciones. Es decir, la relación de la anchura con respecto a la altura de la imagen, que definimos con el tamaño en píxeles final, pero que se hará efectiva en el tamaño original de la imagen. Esto se entenderá mejor viendo el tutorial de cómo reducir imágenes con Photoshop.

Y ya está, estos son los pasos que hay que seguir para reducir el tamaño de una imagen para web con Photoshop. ¿Cuál fue el resultado? Partimos de la Foto 1, con un peso original de 2.326.854 bytes (2,22 Mb), y de la Foto 2, con un peso original de 3.919.094 bytes (3,74 Mb).

Como hemos comentado antes, en Photoshop hay dos formas de hacer la exportación final, la primera con Exportar como…, y la segunda con Guardar para web. El resultado no es el mismo, por lo que a continuación muestro los pesos y el porcentaje del peso que se ha conseguido reducir la imagen a diferentes niveles de calidad.

Como podemos ver en las gráficas, en las que comparamos los tamaños obtenidos para la Foto 1 y la Foto 2 con los dos métodos de Photoshop en las diferentes calidades, vemos que el método «Guardar para web» es más efectivo y proporciona una imagen un poco más reducida (salvando la extraña excepción que se produce en el improbable caso de calidad 100).

La calidad a elegir depende un poco del resultado final que obtengas, quizá conviene que realices un par de pruebas y te quedes con la que no afecte el aspecto visual de la fotografía exportada.

GIMP

GIMP 2 es como el Photoshop gratuito, es decir, se trata de un software de tratamiento de imágenes de código libre, completamente gratis. Éste sí que está al alcance de todo el mundo y no tiene nada que envidiarle a Photoshop (al menos para hacer tratamientos básicos de la imagen como el que aquí estamos tratando).

Si quieres seguir un tutorial en el que explico en detalle cómo reducir una imagen para web con GIMP, lo puedes ver aquí. En cualquier caso, el proceso es exactamente igual que en Adobe Photoshop, pero con una ligera variante:

1. Abrir la imagen con GIMP.
2.  Establecemos las proporciones de la imagen en píxeles con la herramienta de recorte (en este caso simbolizada con un cutter).
3. Escalamos la imagen (Imagen –> Escalar imagen). Ésta es la pequeña variación con respecto a Photoshop, donde este paso lo hacíamos durante el proceso de exportación, y en GIMP lo hacemos antes de exportar.
4. Exportamos la imagen (Archivo –> Exportar cómo) en la ubicación donde queramos disponer de ella para subirla a nuestra web.

Algunos de los aspectos a tener en cuenta son siempre los mismos:

• podemos reducir pero no podemos ampliar una imagen sin perder calidad.
• No debemos confundirnos nunca y exportar con resolución de imagen para impresión (300 ppp), puesto que el tamaño de la imagen será inmenso. Por tanto, debemos cuidar que la resolución sea de 72 ppp.

Como vemos, los resultados de reducir el tamaño de los archivos con GIMP ha sido bastante bueno. Obviamente, vemos que llega un momento en que bajar la calidad más no nos lleva a reducir mucho más el tamaño del archivo por lo que, como siempre, conviene equilibrar entre la reducción y la calidad obtenida.

Webs para reducir imágenes

En el caso de las webs y aplicaciones pequeñas de escritorio estudiadas y enumeradas en los artículos antes mencionados, vamos a contar brevemente en qué consiste este proceso de reducción, comentaremos impresiones, y mostraremos números, que al final es lo más objetivo.

• Webresizer.com: Se trata de una web que permite hacer varios procesos, entre ellos recortar la imagen, además de optimizarla. Básicamente lo único que hay que hacer es subir un archivo a la web (máximo 10mb). A continuación se puede establecer la proporción de recorte si queremos, y después el nuevo tamaño en anchura o en altura. Se pueden añadir algunos parámetros más como la calidad de imagen, e incluso se le pueden hacer algunas modificaciones a ésta.
  

  

  

  
  

   

  
  

  

  

  

  ¿Y qué rendimiento ha dado Web Resizer a la hora de reducir las imágenes? Pues veamos.
  El resultado final de webresizer es también bastante óptimo, sin demasiada diferencia entre las calidades 80 y 60.

  
  

• 

  Image Optimizer: Esta aplicación me ha dejado un poco perplejo. No sé si esto me sucede a mi nada más, pero le ponga el tamaño que le ponga, siempre me da el mismo archivo de 591 Kb. Supongo que el servicio web tiene algún problema para que esto ocurra.
  Existe una versión de escritorio para descargar en el ordenador, pero en el momento en que me pidieron el correo y, dado el pésimo resultado de la versión web, se me quitaron las ganas de descargarla. Si alguien en la sala detecta qué es lo que me falla y me lo dice, estaré encantado de corregir esta parte del artículo.
• Kraken.io: Esta aplicación requiere registrarse. Una vez que tenemos nuestra cuenta, podemos probar la Interfaz Web PRO, a continuación seleccionamos el modo de optimización (Lossy, Lossless o Expert) de imagen
  En cualquier caso, esta aplicación nos permite tres niveles de reducción: Lossy, Lossless y Expert, según queramos reducir más nuestra imagen, perder menos calidad o tomar el control total del proceso manejando diferentes parámetros. Por último, podemos introducir el tamaño de imagen (en el ejemplo que estamos tratando aquí ha sido de 1.200 x 674 px, que es el tamaño que hemos utilizado en todos los ejemplos anteriores).

  

  

  

  

  Kraken.io arroja un resultado también bastante óptimo, a tenor de los números. Aunque en cualquier caso, la conclusión clara es que conviene utilizar el modo experto, ya que es bastante más eficiente que los modos prefijados.

• ImageOptim: solamente funciona para usuarios de Mac, por lo que he preferido no incluirla en la comparativa al no estar disponible para todo el mundo. Se trata de una pequeña aplicación de escritorio que, según el artículo de hipertextual, además de comprimir las imágenes, elimina los metadatos de las imágenes y permite comprimir varias imágenes a la vez. Si quieres hacer tú la prueba y contarme los resultados, al final del artículo podrás descargarte las fotografías originales y la hoja de cálculo en la que he apuntado los resultados.
• Optimizilla: Otro monstruito que hace algo en el mundo de la web, en este caso reducir imágenes. El único problema es que es algo limitado, ya que sólo las reduce, no se pueden establecer las dimensiones como en otras aplicaciones. Quizá por ello, los resultados obtenidos hayan sido bastante limitados.
  Su funcionamiento es muy simple, solamente hay que subir las imágenes a la web y seleccionar la calidad que quieres obtener.
  

  

  

  

  

  
  Debido al hecho de que no hemos podido redimensionar las imágenes, el resultado es mucho menos óptimo que con los métodos anteriores, aunque habría que probarlo introduciendo una imagen de las dimensiones finales que queremos obtener. Igual nos llevábamos una sorpresa.
• TinyJPG o TinyPNG (según necesites): Otra aplicación web extremadamente simple, que consiste en arrastrar y obtener la imagen reducida. De nuevo se plantea el mismo problema que en la anterior, y es que no permite cambiar las dimensiones de la imagen

  

  

  

  

  
  En este caso, las imágenes obtenidas están un poco menos comprimidas que con el método anterior, por lo que parece que Optimizilla sigue en cabeza en este caso de aplicaciones que no redimensionan.
• Compressor.io: Esta aplicación web únicamente ofrece dos posibilidades, que es Lossy y Lossless, pero no permite redimensionar la imagen, por lo que en la mayor parte de los casos se puede quedar corta.

  

  
  

  

  

  

  El resultado ha sido también un poco raro, puesto que una de las opciones (Losless) directamente ha dejado la imagen tal cual estaba.
  
  El caso de compressor.io no ha sido nada satisfactorio. Por un lado, no ha hecho nada en el modo lossless, mientras que en el modo lossy ha comprimido la imagen en torno al 50%.

  
  
• Compressnow: Otra web de «arrastra-reduce-descarga», pero nuévamente nos encontramos con el problema de no poder reducir las dimensiones de las imágenes. La interfaz es muy sencilla, se elige el nivel de compresión con un deslizador, se arrastra la imagen a la ventana o se sube el archivo, y se obtiene el archivo comprimido.
  

  

  
  

   

  
  

  

  

  

  En cuanto a los resultados, vamos a echarle un vistazo. Los resultados han sido bastante dispares en función de la calidad elegida, pero parece que este programa ha sido algo más eficiente que el anterior.

  
  

Conclusiones

Llegados a este punto, y con este lío de números y comparativas, creo que merece la pena hacer un resumen que nos permita seleccionar un programa. Para ello, como no sería justo hacerlo de otra manera, vamos a comparar primero aquellos programas que permiten redimensionar, y a continuación los que sí permiten redimensionar la imagen. Obviamente los primeros dan lugar a un mejor resultado, por lo que son los que yo recomiendo. Los segundos pueden ser interesantes si nosotros redimensionamos antes la imagen, o si ésta tiene ya el tamaño final que va a mostrar en la web. En ese caso, también podemos elegir alguno de los aquí analizados.

Aplicaciones que permiten redimensionar

Como hemos dicho, en esta comparativa hemos introducido aquellas aplicaciones que permiten redimensionar la imagen, paso indispensable si tenemos una imagen de 4000 px de ancho (como es el caso del ejemplo que hemos utilizado para esta comparativa).

La conclusión es bastante curiosa, pero parece que de los programas de escritorio, GIMP se lleva la palma comprimiendo, y gana a su competidor de pago Photoshop. Pero lo mejor es que Kraken.io ha superado todas las espectativas, por lo que se lleva la palma, y les gana a todos. A mí personalmente me gusta más webresizer, y probablemente sea el que recomiende a mis clientes, pero kraken.io está muy cerca y da un resultado muy bueno.

Aplicaciones que no permiten redimensionar

Por otro lado, veamos cuál ha sido el resultado con aquellas aplicaciones que no permiten redimensionar la imagen. Puesto que no podemos redimensionar, para mi estas aplicaciones quedan descartadas a la hora de recomendárselas a mis clientes. No obstante, les vamos a echar un vistazo por si acaso.

A raíz de estos resultados, parece claro que optimizilla se lleva el gato al agua, mientras que compressor.io ha dado un resultado bastante desilusionante. Esto, junto con su sencillez lo hacen un buen candidato para reducir imágenes, siempre que no tengamos que redimensionarlas.

Por tanto, GIMP para escritorio, webresizer o kraken.io han sido las aplicaciones ganadoras de esta comparativa.

Otras consideraciones

Aquí me gustaría dar un par de consejos que creo que pueden ser de interés:

1. Por favor, no introduzcamos las imágenes con el nombre que le asigna directamente la cámara de fotos o que viene de internet. Es muy común ver imágenes con el nombre de archivo IMG_415.jpg. Esto no dice nada a nadie, y menos a Google, que es el que más nos tiene que importar, junto a nuestro usuario.
2. Nos debemos acostumbrar a rellenar siempre el texto alternativo (Alt) de nuestras imágenes. Este texto ayuda a que nos encuentren también en los buscadores. Aquí deberemos introducir siempre una pequeña descripción de la imagen, ya que está destinado a que lo lean aquellas personas con dificultades visuales, que navegan por nuestra web por medio de un dispositivo adaptado.

Por último, si quieres descargarte las fotografías originales que he utilizado y repetir los tests, puedes hacerlo desde el siguiente enlace.

Descargar