Destacados

Más
Lunes, 21 de enero, 2013

La guía definitiva para optimizar imágenes

24 +40K

Optimizar imágenes JPG/GIF/PNG y consejos técnicos sobre cómo reducir el tamaño de nuestra web o blog para que cargue más rápido.

Publicidad

Si acostumbramos a escribir en un blog o crear sitios web, obviamente, utilizaremos imágenes para decorar o complementar nuestros textos de una forma gráfica y atractiva. Las imágenes son un recurso necesario e imprescindible para conseguir mantener la atención del público y evitar aburrirlos.

Sin embargo, no siempre las utilizamos correctamente, bien por desconocimiento, por descuido (y falta de tiempo) o por no tener la base de conocimiento necesaria para utilizarlas correctamente.

En este artículo veremos una guía para optimizar imágenes en nuestro sitio web, de una forma efectiva, con un buen equilibrio entre calidad de imagen y tamaño de imagen.

Imágenes pesadas = sitio web lento

Una página web contiene varias imágenes. Desde los pequeños iconos que incorpora hasta las grandes imágenes que ilustran las entradas o artículos. Para el usuario, cargar cada imagen es un pequeño retardo en la carga del sitio web.

Esto es algo bastante importante. Una web lenta es sinónimo de pérdida de usuarios (abandonan o buscan otras webs, cansados por la lentitud de carga), pero además ahora sabemos que Google le da importancia a la velocidad de carga de una web, por lo que será algo que influye a la hora de posicionarse en Google.

La suma de todas las imágenes utilizadas en un sitio puede ser considerable.

Cada página de nuestra web, contiene varias imágenes en diferentes formatos (y muchas veces, poco apropiados) que habrá que descargar al acceder a ella. Es por esta razón, que lo ideal sería disminuir lo máximo posible el tamaño de cada una de ellas, para que ocupen menos y se descarguen antes, incluso en usuarios con conexiones lentas.

En el artículo Optimizar el rendimiento web, hago un repaso más detallado y técnico de los aspectos que pueden retrasar la carga de una web: número de peticiones, tipo de servidores, sistemas de caché, descargas paralelas, sistema lazy load, etc...

La decisión: ¿JPG, PNG o GIF?

La primera pregunta que nos podemos plantear es: ¿Qué formato de imagen debo utilizar? Existen multitud de formatos de imagen, algunos nuevos, otros más desconocidos (como por ejemplo: WEBP, JPEG2000, JPEG-XR...). Lo más importante es conocer la diferencia entre los formatos con pérdidas y los formatos sin pérdidas. Puedes saber más en la siguiente guía de formatos de imágenes.

Nosotros nos basaremos en los tres más utilizados: JPG, PNG y GIF. A grandes rasgos, el método más sencillo para saber que formato utilizar, es el siguiente:

  • Formato JPG: Fotografías. Muchas texturas. Detalles complejos. No nos importa perder parte de calidad de la imagen original.
    Ejemplo: Una bonita fotografía de Mordor y el ojo de Sauron.

  • Formato PNG: Capturas de pantalla. Dibujos. Bocetos. Imágenes en las que hay amplias zonas «lisas» con el mismo color.
    Ejemplo: Ilustración del artículo shooters de los 90, con dibujos y zonas de color uniforme.

  • Formato GIF: Similar a PNG, pero actualmente utilizado sólo para imágenes animadas.
    Ejemplo: Una imagen animada de Larry Leisure Suit leyendo el periódico.

¿JPG o PNG? Artefactos de compresión

Es posible que llegado a este punto, no estés seguro si utilizar JPG o PNG para tus imágenes. No hay problema. Vamos a aclararlo.

Ambos formatos son comprimidos internamente para conseguir ocupar menos espacio en disco:

  • Imágenes JPG: Con un valor entre 1 y 100 (más alto, menor compresión y mayor tamaño)
  • Imágenes PNG: Con un valor entre 0 y 9 (más alto, mayor compresión y menor tamaño)

Antes de continuar, seguro que conoces un desagradable efecto producido en los archivos JPEG (con alto grado de compresión): unas feas marcas alrededor de ciertos objetos en imágenes:

Una imagen PNG y una imagen JPG del mismo tamaño (19KB).

Estas marcas se denominan artefactos de compresión, y se producen debido a que las imágenes JPG son un formato de imagen con pérdidas: para conseguir que ocupen menos, reducimos la calidad de la imagen (perdiendo nitidez).

En contraposición, las imágenes PNG son un formato de imagen sin pérdidas: para conseguir que ocupen menos, se utilizan algoritmos de compresión «reversibles», que no reducen tanto el tamaño, pero consiguen no introducir artefactos.

Obviamente, cada formato es útil para cada caso concreto. Simplificando, la norma general suele ser; utilizar imágenes JPG para fotografías y utilizar imágenes PNG para imágenes que contengan zonas de color uniformes.

Optimizar imágenes con RIOT

Para optimizar las imágenes de forma sencilla y cómoda, existe un programa gratuito ideal: RIOT: Radical Image Optimization Tool, que incluso puede utilizarse a modo de plugin si utilizas algún programa como IrfanView, GIMP o XnView.

Este programa permite optimizar imágenes mediante un panel donde podemos ver la diferencia de tamaño de la imagen original y optimizada, la calidad de la imagen, un selector del tipo de formato gráfico que queremos utilizar, así como algunas opciones comunes: rotar, invertir, redimensionar y comprimir imagen a un tamaño en KB concreto.

Para cada formato distinto (JPG, GIF o PNG) tendremos un panel diferente en la parte baja, donde elegir el tipo de compresión, así como ajustes de imagen (brillo, contraste, etc...).

RIOT también incorpora un plugin RAW-HDR (colocar en carpeta plugins) para permitir abrir archivos HDR como EXR o HDR, o archivos RAW de cámaras digitales como NEF, RAW, RAF, CRW, CR2, entre muchos otros.

Algoritmos de redimensionado

Ya en la guía de productividad con Irfan View (punto 5) hable de los algoritmos de redimensionado. De la misma forma, RIOT permite ampliar o reducir las imágenes utilizando un algoritmo concreto de la siguiente lista:

Si esta forma se te queda grande, prueba con Cómo reducir una imagen.

Cada uno de ellos proporciona un resultado distinto, lo que lo hace ideal para diferentes situaciones. Por ejemplo, el algoritmo Box es ideal para ampliaciones de imágenes de 8 bits (conservando bordes definidos), mientras que Lanczos3 es ideal para ampliar fotografías (interpolación de imágenes).

Optimizando PNG (obsesivamente)

Uno de los trucos para optimizar imágenes PNG es la de «contabilizar los colores» que utiliza una imagen. Como hacerlo a mano sería muy tedioso y una tarea bastante repetitiva, podemos hacer uso de IrfanView, accediendo a la opción Image / Information, o pulsando la tecla I.

Veremos que en la linea Number of unique colors nos indicará el número de colores (únicos) que utiliza la imagen.

House y Wilson, a 8 bits.

Otra forma sencilla de contabilizar los colores, es utilizando ImageMagick, escribiendo en una terminal de Windows o Linux la línea identify -format "%k" imagen.png.

Debemos saber que los archivos PNG se suelen categorizar en varios tipos (PNG8 es un concepto introducido por Adobe):

  • PNG24: También llamado PNG (True color). Se trata de la imagen a alta calidad. Es equivalente en calidad (o incluso superior) a una imagen JPG con 100 de nivel de compresión, pero también es considerablemente más grande en tamaño.
  • PNG8: Se trata del mismo formato PNG pero con una paleta de colores indexada. Esto significa que, en imágenes que utilicen pocos colores (alrededor de 256 colores, o menos) podemos optimizarla para que ocupe un tamaño menor. Opción muy útil.

Reduciendo colores

Teniendo en cuenta lo anterior, podemos utilizar RIOT para ajustar el número de colores de una imagen PNG (y así su tamaño). En la zona inferior izquierda, ponemos seleccionar entre True color y Optimal 256 Colors Palette (o inferiores) para ir limitando el número de colores de la imagen.

También podemos hacerlo de forma manual, estableciendo el número de colores en la barra de desplazamiento inferior (Reduce colors to) y observando los cambios en la imagen de la derecha (Optimized image).

Marcando la casilla Best compression (slow), conseguiremos una mejor compresión a un precio muy bajo (lentitud al comprimir la imagen), por lo que es recomendable mantenerla activa.

Más a la derecha, nos encontraremos con un panel denominado Color quantization algorithm. En el caso de haber elegido realizar una optimización de una imagen PNG con paleta indexada (256 colores o menos) debemos elegir un algoritmo de cuantificación.

Este algoritmo se encargará de reducir los colores de la imagen (en el caso de tener más de 256) y elegir colores similares alternativos para convertirlos a un único color. Disponemos de dos algoritmos:

  • Xiaolin Wu color: El método por defecto y recomendado (ya que es el más rápido de los dos).

  • NeuQuant neutral-net: Otro método alternativo, basado en redes neuronales de Kohonen. Es más lento, pero puede ser útil en algunas ocasiones para reducir el efecto de «círculos concéntricos» generado en algunos gradientes.

PNG Entrelazado (Carga progresiva)

Si nos fijamos bien, en la zona inferior izquierda, hay una casilla denominada Interlaced. Esta casilla permite crear una imagen PNG entrelazada.

Estableciendo nuestra imagen como un PNG entrelazado, la imagen podrá ser cargada mediante el Algoritmo Adam7 (en el enlace se ve claramente como realiza la carga), mostrando una versión de baja resolución que se irá volviendo nítida de forma progresiva, en 7 pasadas.

Esto consigue una sensación de carga más rápida, sin embargo, todo tiene un precio: el tamaño de la imagen se eleva un pequeño porcentaje al activar esta característica.

Optimizadores externos

Finalmente, en el panel External optimizers se pueden configurar aplicaciones externas para optimizar (aún más) nuestra imagen. Por defecto se incorporan tres optimizadores (al pulsar sobre ellos, se descargan automáticamente): AdvPNG, OptiPNG y PNGout.

Sin embargo, podemos añadir nuestros propios optimizadores, ampliando la lista (pulsando en el símbolo de suma en fondo verde) y haciendo nuestras propias pruebas. A continuación, una lista de optimizadores externos que podemos utilizar:

Tool Name Tool Path Parameters
AdvPNG Insane (fast) advpng.exe -4 {IMAGE_FILE}
OptiPNG o3 optipng.exe -o3 {IMAGE_FILE}
PNGout Xtreme (very slow) pngout.exe /s0 {IMAGE_FILE}
ImageMagick PNG8 convert.exe {IMAGE_FILE} -type Palette {IMAGE_FILE}
PNGcrush (brute force) pngcrush.exe -reduce -brute {IMAGE_FILE} {IMAGE_FILE}
PNGquant PNG8 pngquant.exe --force --verbose 256 {IMAGE_FILE}
DeflOpt DeflOpt.exe {IMAGE_FILE}
pngnq-s9 pngnq.exe {IMAGE_FILE}
PNGrewrite PNG8 pngrewrite.exe {IMAGE_FILE} {IMAGE_FILE}
PngOptimizerCL PngOptimizerCL.exe -file:"{IMAGE_FILE}"

Si conoces más optimizadores de archivos PNG que no estén en la lista, puedes compartirlos con nosotros en los comentarios del artículo. Por otra parte, si buscas más aplicaciones para optimizar imágenes (con interfaz gráfico o incluso alternativas online) puedes consultar esta lista de 12 aplicaciones para optimizar imágenes, tanto para imágenes PNG, como imágenes JPG o GIF.

Comparte este artículo
Sobre el autor de Emezeta

Escrito por , más conocido como Manz. Es Ingeniero-Técnico en Informática de Gestión por la Universidad de La Laguna y residente en Santa Cruz de Tenerife.

24 comentarios de lectores
rubentnf rubentnf Martes, 22 de enero de 2013, 01:19
1
Muy buen aporte Manz, la verdad es que esto ayuda muchísimo a mejorar el tiempo de carga de una página web y así ganar en optimización. Saludos!
Responder Permalink URL · Chrome 24.0.1312.52 · Windows 7 ·
Marinense Marinense Martes, 22 de enero de 2013, 10:05
2
Como siempre un artículo muy útil e interesante. Gracias por compartir tus conocimientos.
Responder Permalink Chrome 24.0.1312.52 · Windows 7 ·
Noxbru Noxbru Martes, 22 de enero de 2013, 10:54
3
Buenas, Voy a añadir a la lista el plug-in para GIMP "Save for web", que también permite trastear y optimizar imágenes. http://registry.gimp.org/node/33
Responder Permalink Mozilla Firefox 18.0 · Linux ·
alejo alejo Martes, 22 de enero de 2013, 18:03
4
Soy novato en esto de los Blogs, y con las imágenes trabajo con el Gimp pero el proceso optimizar las imágenes para el sitio se hace lento, viendo tu articulo, por cierto muy útil, pondré en practica tus recomendaciones. Gracias.
Responder Permalink URL · Mozilla Firefox 16.0 · Windows 8 ·
Héctor Mx Héctor Mx Domingo, 27 de enero de 2013, 06:46
5
Al fin descubri la diferencia de cada formato, para mi todo era JPG. Muchas gracias por la información.
Responder Permalink Mozilla Firefox 18.0 · Windows 7 ·
etbsoft etbsoft Lunes, 4 de febrero de 2013, 08:34
6
Yo uso PNG Gauntlet, aunque no sé si es mejor o peor que todas las que se encuentra uno por internet.
Responder Permalink Chrome 24.0.1312.57 · Windows 7 ·
Manz Manz Lunes, 4 de febrero de 2013, 14:57
7
@etbsoft: PNGGauntlet es un front-end de PNGout, por lo que sus resultados son similares a utilizar directamente este último. Saludos
Responder Permalink URL · Chrome 23.0.1271.97 · Windows 7 ·
Paco Paco Martes, 5 de febrero de 2013, 23:30
8
Muy buen artículo, gracias, me estoy iniciando en el mundillo web, he comenzado con un blog. asi que este artículo me resulta muy útil En cuanto a "Redimensionadores tengo uno que no lo cambio por nada (se que hay varios) el de mi elección es "FastStone photo Resizer", lo recomiendo aunque claro... sobre gustos y colores ya sabemos... Saludos Paco
Responder Permalink Mozilla Firefox 18.0 · Windows 7 ·
edirty edirty Domingo, 10 de febrero de 2013, 09:18
9
José Roman hola, decirte que tu artículo es excelente es decirte bien poco, pero una duda me acucia, puesto que precisamente estoy teniendo un problema en mi blog, estoy en pruebas cuando sea el momento adecuado no tengas dudas de que te invitare a darte una vuelta por el si acaso te interesa. Volviendo a la duda que te comentaba, si yo subo mis imagenes a Picasa, por ejemplo, de ahí a mi blog ¿ como queda la cuestión del peso ? ¿ aún así sería vital pasarlas por el RIOT o por SMUSH.IT ? En otro orden de cosas, ya puesto a preguntar, he entrado a tu página de Facebook ( sin estar logeado ) y he quedado fascinado, ¿ como se logra tener este tipo de páginas ? : http://img90.imageshack.us/img90/69/facebookrb.jpg Espero tu respuesta, como se espera una gota de agua en el desierto.:D Eduardo.
Responder Permalink Mozilla Firefox 18.0 · Windows 7 ·
Nick Nick Domingo, 3 de marzo de 2013, 14:50
10
Hay una buena herramienta en línea http://compresspng.com
Responder Permalink Mozilla Firefox 19.0 · Ubuntu Linux ·
sergio sergio Lunes, 1 de julio de 2013, 08:02
11
excelente y util articulo...gracias x compartirlo. Saludos.
Responder Permalink Chrome 27.0.1453.116 · Windows 7 ·
CrafterSama CrafterSama Martes, 13 de agosto de 2013, 11:58
12
Pienso que introducir imágenes para iconos con fuentes, también ayuda, seria bueno si logras hacer un tutorial para usar herramientas como la de icomoon.io/app sirve para iconos de la webapp y también para iconos sociales, trabajando con CSS colores y tamaños que seria la libertad absoluta para hacer iconos unicolores, sin necesidad de editarlo en gimp o photoshop para cambiar colores y tamaños y ya nada mas usas imágenes cuando es obviamente necesario y aplicando los métodos aprendidos en este post.
Responder Permalink URL · Chrome 25.0.1364.97 · Windows 7 ·
Velocidadweb Velocidadweb Martes, 13 de agosto de 2013, 12:11
13
Buenas, Destacar también el uso de los JPG progresivos, en lugar de baseline. Este tipo de JPG se descargan mucho más rápido en aquellos navegadores que lo permiten (los más modernos), y aunque consume mayor CPU la diferencia es notable. Buen artículo y muy buenas sugerencias de software, aunque si usas mac lo tienes un poco más complicado ya que todos son de windows salvo algunos de linux. Saludos!!
Responder Permalink URL · Chrome 28.0.1500.71 · Macintosh ·
Erickson Erickson Domingo, 1 de septiembre de 2013, 16:52
14
Excelente articulo, buenísimo como siempre.
Responder Permalink URL · Chrome 29.0.1547.62 · Windows 7 ·
Miguel Miguel Domingo, 13 de octubre de 2013, 19:23
15
Me sirvió de mucho, gracias de veras ;)
Responder Permalink URL · Chrome 30.0.1599.69 · Windows Vista ·
Pedro Pedro Martes, 5 de noviembre de 2013, 03:45
16
Un tutorial muy completo, yo utilizo Riot para mis dos blog, pero he tenido un problema cuando la imagen es grande y quiero reducirla de tamaño. Cuando realizado el proceso en cualquier programa, automáticamente se aumenta el peso y la optimización no me ayuda mucho para reducirlo ¿algun sugerencias? gracias
Responder Permalink URL · Chrome 30.0.1599.101 · Windows 7 ·
YURI YURI Sábado, 9 de noviembre de 2013, 14:02
17
Guste de la explicación de como optimizar las imagenes, descargue el programa que sugeriste, voy a probarlo. Gracias por compartir la información.
Responder Permalink URL · Chrome 26.0.1410.43 · Windows 7 ·
David Richardson David Richardson Martes, 19 de noviembre de 2013, 14:55
18
Recibe muchas bendiciones del trono de Dios, ha sido muy útil para mi su articulo, porque es muy apegado a la VERDAD, escrito con INTEGRIDAD, en mi caso particular lo puse en práctica los consejos dado por Usted, por medio del programa RIOT, ya me google me sugirió que debia comprimir las imágenes para hacerlo más rápido, Ver la página aquí, utilizaré el mismo método para corregir las demás. Muy atentamente, David Richardson
Responder Permalink URL · Chrome 31.0.1650.57 · Windows XP ·
Estela Silva Estela Silva Lunes, 25 de noviembre de 2013, 13:26
19
Saludos cordiales Solo quiero dar a conocer una herramienta seo gratuita para comprobar que nuestras imagenes cumplen o no con las directrices de Google en cuanto a dimensiones y uso de la etiqueta ALT http://goo.gl/A4I9Zz
Responder Permalink URL · Chrome 31.0.1650.57 · Windows 7 ·
Pablo P Pablo P Martes, 26 de noviembre de 2013, 01:57
20
Estaba buscando un programa para procesar imágenes por lotes para mis webs y optimizarlas en jpg progresivo ya que tiene grandes ventajas y llegué como no a la página de mi compatriota tinerfeño jaja (soy canario). Pues probando el Riot y haciendo varias pruebas no me convenció del todo no se si sera por el Submuestreo de la crominancia que por defecto está 4:2:2 o por alguna opción marcada que reduce las imágenes a menos de 1MB o algo así, la verdad que no me entero mucho con este programa, para colmo no distingue entre jpg y png y me guarda todo lo de subdirectorios en una carpeta, si dijeramos que al menos la calidad de salida es buena me quedaba contento y a mano las movía que no tardaba tanto pero no me convence. No se si puedes iluminarme un poco en la configuración optima o un programa un poco mejor, la idea sería sacar jpg progresivos a compresión máxima sin perdida de calidad (no se si 90%) de imágenes tipo fotografías con bastantes colores (es lo que prevalece en mi web) y si tal los pngs entrelezados que creo que es lo que se lleva. Procesamiento por lotes ya poder ser que respete la organización de subdirectorios en la salida.
Responder Permalink URL · Chrome 31.0.1650.57 · Windows 8 ·
Apostol Pwnal Apostol Pwnal Martes, 31 de diciembre de 2013, 03:21
21
Te dejo un enlace que también puede ser útil, es similar al del elefante que han puesto aquí: https://tinypng.com/ Lo que hace es reducir el número de colores en la imagen a 256 o menos preservando la transparencia. Es útil para imágenes que deben ser semitransparentes, cuando queremos que esta semitransparencia se preserve, y no nos importa que la imagen tenga algunos colores menos (en según que casos se nota poco o nada). Es útil especialmente con iconos. Eso si, el resultado tiene dos características: - No se puede editar con GIMP manteniendo esa semintransparencia (si cambias el modo de imagen a 24 bits, la recuperas, pero pierdes la compresión que da tener la imagen en paleta). - La imagen puede ser recomprimida con PNG out, a menudo se puede sacar un 5-15%.
Responder Permalink Mozilla Firefox 26.0 · Windows 7 ·
Apostol Pwnal Apostol Pwnal Martes, 31 de diciembre de 2013, 03:24
22
@Pablo P: Si quieres guardar en JPEG y preservar bien los colores, desactiva el submuestreo de color. La imagen te ocupará más, pero tendrá un aumento notable de calidad, incluso más que subiendo el factor de calidad. PD: el formato se llama JPEG, y la extensión es JPG. No es que quiera trolear, pero es que es así. :-p
Responder Permalink Mozilla Firefox 26.0 · Windows 7 ·
Fitness Fitness Jueves, 29 de mayo de 2014, 18:54
23
Pues un articulo genial no tengo nada mas que contar, solo compartirlo Un saludo
Responder Permalink URL · Chrome 34.0.1847.137 · Windows 7 ·
Votar Profesor Votar Profesor Miércoles, 6 de agosto de 2014, 14:06
24
Gracias! llevaba tiempo buscando algo así, edite el template de mi web y al pasarle un checkeador me decía que algunos fotos se podían optimizar y sinceramente, no tenía ni idea de como. Un saludo, buen trabajo!
Responder Permalink URL · Chrome 36.0.1985.125 · Windows 7 ·
Publica tu opinión



Acepto las condiciones y políticas de privacidad de este sitio web.
Suscribirme a través de FeedBurner a los nuevos artículos del blog por email.

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.