Top

Cargando cosas bonitas...

Recargar...

Cómo reducir el tamaño de las imágenes para que nuestra web cargue rápido


Si escribes en una web o blog probablemente estés acostumbrado a acompañar y decorar los textos de una forma gráfica y más llamativa. Vivimos en una época en la que el tiempo es vital y cada vez tendemos a ser más reacios a leer artículos con demasiado texto. Podríamos decir que las imágenes llegan a ser imprescindibles para conseguir la atención del público y evitar aburrirlos.

Sin embargo, no siempre las utilizamos correctamente, a veces por desconocimiento, por descuido o falta de tiempo o por no tener la base de conocimiento adecuada que nos permita utilizarlas eficazmente.

En este artículo te presentaré el manual definitivo para optimizar las imágenes de nuestro sitio web o blog, de una forma efectiva, manteniendo un equilibrio entre tamaño de imagen y calidad de imagen.

Imágenes pesadas es igual a sitio lento

Una página web contiene bastantes imágenes. Desde los “insignificantes” iconos que configuran el diseño del sitio hasta las grandes y a veces pesadas imágenes que ilustran los artículos o entradas. Para el visitante, cada imagen es un pequeño retardo o “delay” en la carga del sitio.

Esto es algo muy importante. Una web lenta y pesada es sinónimo de pérdida de usuarios potenciales (muchos usuarios cansados abandonarán el sitio y se irán en búsqueda de otro, cansados por la lentitud de carga). Pero ahora aún más importante a la hora de posicionarse en buscadores, sabemos que Google da prioridad a las webs con menor tiempo de carga, las posiciona mejor.

Cada página web tiene varias imágenes en diferentes formatos (no siempre son los más apropiados) que habrá que descargar para acceder a ella. Es por está razón, que lo mejor sería optimizarlas y disminuir al máximo posible el tamaño de cada una de ellas, para que pesen menos y se descarguen en el menor tiempo posible, incluso en usuarios con conexiones lentas.

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

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

En el artículo de Emezeta: Optimizar el rendimiento web, hace 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…

El formato: ¿JPG, PNG o GIF?

La primera pregunta que nos solemos plantear es: ¿Qué formato de imagen debo utilizar? Existen muchísimos formatos de imagen, algunos más actuales, otros bastante desconocidos (por ejemplo: WEBP, JPEG2000, JPEG-XR…). Lo más importante es conocer las diferencias que hay entre ellos, y conocer qué conlleva utilizar un formato con pérdidas y un formato sin pérdidas. Puedes saber más en la siguiente guía de formatos de imágenes.

Aquí nos vamos a centrar en los más utilizados: JPG, PNG y GIF. Muy por encima, para diferenciar de forma sencilla el formato que vamos a utilizar es el siguiente:

jpeg-png-gif

  • 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 la Gran Vía de Madrid.
  • Formato PNG: Capturas de pantalla. Dibujos. Bocetos. Imágenes en las que hay amplias zonas «lisas» con el mismo color.
    Ejemplo: Nuestro “frankstein geek” que aparece en el logo de mi web.
  • Formato GIF: Similar a PNG, pero actualmente utilizado sólo para imágenes animadas.
    Ejemplo: Una imagen animada como la de error 404 que aparece en DAVIDSTREAMS.com.

Artefactos de compresión. ¿JPG o PNG?

Es posible que llegados a este momento no sepas muy bien qué formato elegir. JPG o PNG. No hay ningún problema. Voy a explicártelo.

Los dos formatos son comprimidos de forma interna para reducir su tamaño y que ocupen 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).

A veces ocurre un desagradable efecto en los archivos JPG que son altamente comprimidos. Unas horribles marcas que rodean a los objetos en las imágenes.

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

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

Estas marcas se conocen como 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 algo de nitidez).

De otra forma, 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.

Reducir las imágenes con RIOT

Para reducir las imágenes de forma fácil 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 reducir las imágenes mediante un panel donde podemos ver la diferencia de tamaño de la imagen original y reducida, la calidad de la imagen, un selector del tipo de formato gráfico que queremos utilizar, así también como algunas opciones útiles: 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 inferior, 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

RIOT también permite ampliar o reducir las imágenes utilizando un algoritmo concreto de la siguiente lista:

redimensionar-imagenes-riot

Cada uno de ellos permite obtener 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 (aún más)

Una de las posibilidades para optimizar imágenes PNG es la de «contabilizar los colores» que utiliza una imagen. Como hacerlo a mano sería muy aburrido 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.

count-colors-irfanview

Otra forma útil 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 diferenciar 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 los colores

Tomando en cuenta lo anterior, podemos hacer uso de 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.

En la parte derecha, tenemos un panel denominado Color quantization algorithm. En el caso de haber seleccionado realizar una optimización de una imagen PNG con paleta indexada (256 colores o menos) debemos elegir un algoritmo de cuantificación.

Este algoritmo tendrá la misión 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. Tenemos a nuestra disposición 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 prestamos la suficiente atención, en la zona inferior izquierda, hay una casilla llamada Interlaced. Esta casilla permite crear una imagen PNG entrelazada.

Estableciendo nuestra imagen como un PNG entrelazado, la imagen 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.

png-entrelazado-o-no

Esto revierte en una sensación de carga más rápida, sin embargo, todo pasa factura: el tamaño de la imagen aumenta un poco al activar esta característica.

Optimizadores externos

Por último, 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.

optimizadores-externos.-advpngpng

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}”

Fuente | Emezeta.com


1 Comentario

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *