2 formas de optimizar imágenes sin plugins

77 / 100

Optimizar imágenes para SEO

Uno de los errores más comunes a la hora de construir una web es el de no prestar atención a los factores que ralentizan la misma. Demasiada cantidad de plugins (o algunos muy pesados), código no optimizado, exceso de scripts, exceso de tipografías e imágenes demasiado grandes y muy pesadas.

Éste último factor es el más común y al que menos atención se presta. Es por ello que hoy te voy a mostrar, de una manera sencilla pero efectiva, dos formas de optimizar imágenes.

¿Qué siginifica optimizar?
El diccionario de la RAE define “optimizar” como “Buscar la mejor manera de realizar una actividad.
Estrictamente es correcto, pero no es aplicable a las imágenes, así que ¿qué definición podríamos dar a esta pregunta si nos referimos a imágenes?

Optimizar imágenes es buscar un compromiso entre calidad y tamaño de archivo para el fin al que se destinan.

Efectivamente, un compromiso, ya que se trata de equilibrio entre calidad y velocidad de carga de la imagen.
Es decir, no es lo mismo tener una imagen optimizada para imprimir que para ser vista en un sitio web.

Voy a centrarme únicamente en explicar como optimizar para el segundo fin, publicar en la web.
Y para ello te explico cómo lo hago yo, con una disciplina aprendida de años, ahorrándome un plugin en el camino.

El método offline

Lo primero que tienes que tener en cuenta son las dimensiones de la imagen. ¿A qué tamaño debe ser publicada?
Es cierto que hoy en día hay muchos “themes” o plantillas de WordPress que son responsive, esto es, que se adaptan a todo tipo de dispositivos, pero hay unos límites. Si las imágenes tardan mucho en cargar, sobre todo en dispositivos móviles, el SEO es penalizado.

Lo siguiente a tener en cuenta es que no hay “dietas” mágicas; siempre que se reduce el tamaño de archivo, también lo hace la calidad. Hay ciertos compresores que hacen una reducción llamada “lossless” (sin pérdidas), pero el tamaño final no difiere mucho del original.

Si hay una reducción drástica del tamaño de archivo, hay pérdida de calidad.

Reduciendo tamaño y peso

Una vez hayamos determinado el tamaño final de la imagen antes de ser publicada, la exportaremos con nuestro programa de edición favorito.
Si estás trabajando con imágenes proporcionadas por un profesional, o descargadas desde bancos de imágenes, procura que estén en un formato sin compresión. Es decir, que no sean JPG, o JPEG2000, GIF, etc.
Un formato ideal para trabajar es el TIFF, pues aunque tiene un peso muy grande, al exportar al formato definitivo nos va a dar la mejor calidad.

Truco: si vas a retocar o editar una imagen JPG, antes conviértela a TIFF 16 bits con espacio de color RGB. No vas a ganar calidad por convertirla, pero no vas a perderla al guardar los sucesivos cambios.

Recuerda: cada vez que guardas un JPG pierdes calidad.

Cuando termines la edición conviértela al espacio de color sRGB y expórtala como JPG, PNG o WebP.

Si solo vas a redimensionar la imagen a un tamaño inferior, no es necesario convertirla a otros formatos antes.

El método que yo uso se basa en exportar la imagen desde Capture One, programa de revelado digital profesional (aunque el sistema es similar en Lightroom, Photoshop, Pixelmator, Affinity Photo y demás programas de edición fotográfica) y comprimirla con una aplicación específica que te mostraré más adelante.
Y, por último, solo queda subirla a la web para publicarla.

Pero no nos adelantemos. Prosigo con el ejemplo:
Parto de un archivo RAW de 6000×4000 pixels. Ese tamaño no es que sea grande para la web. Es que es enorme y no nos sirve, así que como ejemplo, lo exportaré a 1090px de lado mayor, para publicarlo en esta misma web.

La imagen original, a tamaño real

En el panel de procesado de C1 hay varias pestañas que nos dan una información muy importante a la hora de establecer la exportación del archivo final.

En la pestaña “Básico” escogemos formato JPG, espacio de color sRGB, la resolución, que da igual que sea 72, 96 o 300ppp (puntos por pulgada) y el tamaño del borde más largo de la imagen.

En lo que debemos centrarnos es en el deslizador “Calidad”, ya que al moverlo a izquierda o derecha es cuando logramos ese equilibrio entre tamaño y calidad de imagen.
Fíjate en la última línea del panel, “Tamaño de…”
Se refiere al tamaño de salida aproximado, que en este caso nos indica ~138 KB, lo cual es bastante aceptable para una imagen de 1090px de lado mayor.

En este ejemplo yo me he quedado con ese ajuste de calidad del 80%, ya que el tamaño de archivo resultante me parece adecuado. Pero recuerda: el programa nos dice que es un tamaño aproximado (el símbolo “~” así lo indica). El peso real de la imagen vendrá determinado por el contraste y cantidad de detalle en la misma, así como el hecho de aplicar enfoque de salida o no.

Los demás datos que nos da C1 en la pestaña “Archivo” son solo el destino donde se guardará la imagen resultante del procesado.

En la pestaña de ajustes tenemos la posibilidad de añadir enfoque de salida.

Esto, al fin y al cabo, no deja de ser un aumento de contraste local en las zonas de separación de la imagen. Es decir, donde haya líneas y detalle el programa crea la falsa ilusión de aumento de nitidez a base de aumentar el contraste de dichas líneas, por explicarlo a grosso modo.
Y esto supone un aumento del tamaño de archivo, así que mesura, porque también podemos arruinar la imagen con exceso de enfoque.

Pasamos a la pestaña “Metadatos”.
Muy importante tener en cuenta esto, pues si dejamos marcadas las casillas de selección, se añadirán los metadatos de imagen escogidos (etiquetas, datos de GPS de la cámara, modelo de la misma, autoría, etc…)
Si tu foto va destinada a una galería y necesitas que estos datos sean mostrados, debes exportar la imagen con ellos.
Pero si no necesitas mostrar esa información, debes exportar el archivo sin metadatos, ya que añaden peso.
Haz la prueba con y sin metadatos. Puede que pienses que es poca diferencia, pero si tienes muchas imágenes y, teniendo en cuenta que WordPress crea entre 3 y 6 miniaturas de diferente tamaño por cada imagen subida, multiplica y verás que a poco que te descuides, se te agotará el espacio en el servidor.

Segunda dieta de adelgazamiento

Una vez exportada la imagen desde el programa de nuestra elección, ya tenemos el trabajo medio hecho.
En mi ejemplo, el archivo final tiene un peso de 197 KB. Recuerda que la indicación de C1 era aproximada.
En este sentido Lightroom es más preciso a la hora de mostrar el peso final de la imagen, pero mi elección de C1 es por la mayor precisión de color y detalle con los archivos RAW que da mi cámara.

La segunda parte del proceso consiste en comprimir el archivo exportado con ImageOptim, una aplicación disponible solo para Mac. También tiene interfaz web, pero es por suscripción, así que te voy a recomendar una equivalente online gratuita, independiente de sistema operativo.

Al usar ImageOptim podemos establecer varios parámetros que nos permitirán variar el grado de compresión. En mi caso la establezco sin pérdida de calidad. Y como puedes ver en las capturas adjuntas, por si tuviese alguna imagen con datos EXIF (los metadatos de la cámara), uso un ajuste para que éstos sean eliminados del archivo final.

La imagen de 197 KB ha resultado en otra de 181 KB.
Por poco que parezca, hemos logrado reducir aún más el peso del archivo sin sacrificar nada de calidad.
Compara ambas imágenes haciendo clic en ellas para ampliarlas.
Puedes alternar rápidamente entre una y otra con los cursores del teclado o moviendo a izquierda y derecha en dispositivos móviles.

Izquierda: imagen original. Derecha: imagen procesada

Y en las siguientes capturas, te dejo una parte de la imagen ampliada al 400%.
Como puedes observar, no hay diferencias. Los artefactos de compresión son exactamente los mismos en ambas, lo que significa que no ha habido compresión con pérdida, sino todo lo contrario.

Es posible que aprecies una ligera diferencia en el color. Es debido a que las capturas de pantalla tienen el espacio de color RGB y se han publicado tal cual, para no interferir en el resultado.
Además, ImageOptim añade una ligera calidez a las imágenes, casi inapreciable, que a mí no me molesta.

Izquierda: imagen original al 400%. Derecha: imagen procesada al 400%

El método online

Sin contar los plugins para WordPress, en internet hay cientos de aplicaciones online que ofrecen casi cualquier servicio de tratamiento de imagen que podamos necesitar. Desde redimensionado (cambio de tamaño), hasta recortes, compresión con o sin pérdida, eliminación de metadatos, conversión a otros formatos, etc.

No es mi intención hacer una revisión de algunos de ellos, ni tampoco recomendar uno en particular.
Tan solo mostrar los resultados de uno de tantos, que a algunos ha dado buenos resultados y a otros no. El por qué de esta disparidad lo deducirás tú mismo al terminar de leer este post.

Como decía antes, los que no usen Mac pueden aprovechar uno de estos servicios, puesto que no depende de qué plataforma uséis, ya sea Mac, Windows, Linux o cualquier otra. Yo he probado kraken.io Free Online Image Optimizer.
Es gratuito y ofrece algunas prestaciones que otros servicios no tienen, como el de reducir el Chroma Subsampling. Esto también disminuye el tamaño de archivo sin una pérdida apreciable de color para el común de los mortales.

Compresión sin pérdida (Lossless)

Para esta prueba he subido el archivo original, exportado directamente desde C1, con el ajuste Lossless seleccionado. Más que nada por comparar con ImageOptim, a ver si este servicio online es de confianza.
El resultado después del procesado es exactamente igual al obtenido con ImageOptim; 181 KB. Para comprobar que no haya sido casualidad, he repetido la prueba tres veces, con idéntico resultado.
Aquí el desarrollador de kraken.io ha sido fiel a lo que promete: una reducción de peso sin pérdida.

A pesar de ser redundante, te dejo los archivos para que juzgues tú mismo, esta vez sin ampliaciones. De nuevo, puedes alternar de izquierda a derecha con los cursores o con scroll horizontal en tablets y móviles.

Izquierda: imagen original, 197 KB. Derecha: imagen procesada con Kraken, ajuste lossless, 181 KB

Compresión con pérdida (Lossy)

Ahora he subido el mismo archivo original, pero he seleccionado la compresión Lossy, la cual debería comprimir algo la imagen y, por lo tanto, reducir un poco la calidad de la misma. El truco consiste en alcanzar un punto de equilibrio para engañar al ojo humano y que no aprecie esta pérdida de calidad.

Para mi sorpresa, en este ejemplo la imagen ha resultado en 181 KB. Exactamente igual que en la compresión sin pérdidas. No, no es un fallo de Kraken. Es que ya de por sí, al exportarla desde C1 ya estaba bastante optimizada.
Con esto me reafirmo en que si exprimes al máximo tu flujo de trabajo desde el principio, en los pasos finales tendrás menos sorpresas y menos trabajo que hacer.

No te pongo las imágenes, sino la captura de pantalla del proceso y el tamaño de archivo. La diferencia que puedes apreciar entre kraken.io (176,97 KB) y el sistema de archivos de macOS (181 KB) es debido a cómo interpreta este último el espacio en disco.

Izquierda: la interfaz de kraken.io en modo Lossy. Derecha: el tamaño del archivo

El modo del valiente (Expert)

El modo de compresión Expert es algo que no todos los servicios de compresión ofrecen. Y menos aún con la reducción de croma, proceso en principio destinado al vídeo.

Aquí he tratado de reducir el peso de la imagen sin bajar del 80% de calidad, para comprobar cómo afecta el parámetro del croma al tamaño final.

Los ajustes han sido los siguientes:
Calidad 80%, Chroma Sub 4.2.0 - Resultado: 107 KB
Calidad 100%, Chroma Sub 4.2.0 - Resultado: 181 KB
Calidad 80%, Chroma Sub 4.2.2 - Resultado: 139 KB
Calidad 80%, Chroma Sub 4.4.4 - Resultado: 139 KB

Izquierda: la interfaz de kraken.io en modo Expert. Derecha: los tamaños de archivo.

El mejor resultado se obtiene eliminando colores hasta llegar a un sampling 4.2.0 al 80% de calidad.
Es un resultado muy bueno, en realidad. Recomiendo usarlo en aplicaciones no críticas de color. Es decir, cuando uses imágenes que no vayan destinadas a una galería fotográfica o, en general, que necesiten de una fidelidad de color extrema, como una tienda online.
Pero si destinamos las imágenes a este fin, el resultado del ajuste 80% y croma 4.4.4 es excepcional, pues manteniendo la máxima calidad de imagen nos da un peso de archivo de tan solo 139 KB.
Habría que hacer más pruebas con imágenes que tengan degradados suaves, para llegar al punto en que la imagen esté bien optimizada sin que aparezca el efecto de posterización, pero eso te lo dejo como ejercicio para el fin de semana. Si quieres, claro.

Te pongo las muestras y debajo sus ampliaciones al 400%.
Juzga con tus propios ojos.

De izquierda a derecha:
Calidad 80%, Chroma Sub 4.2.0
Calidad 100%, Chroma Sub 4.2.0
Calidad 80%, Chroma Sub 4.2.2
Calidad 80%, Chroma Sub 4.4.4

De izquierda a derecha:
Calidad 80%, Chroma Sub 4.2.0 ampliado al 400%
Calidad 100%, Chroma Sub 4.2.0 ampliado al 400%
Calidad 80%, Chroma Sub 4.2.2 ampliado al 400%
Calidad 80%, Chroma Sub 4.4.4 ampliado al 400%

Conclusiones finales

Existen muchas formas de llegar a un mismo fin, que en el caso que nos ocupa es optimizar imágenes para que tu web cargue rápido y se posicione en los primeros puestos de Google y otros buscadores.

No hay sustancial diferencia entre usar un método u otro, o un plugin u otro.

Ten en cuenta que usar un plugin tiene varios inconvenientes:

  • Es un añadido más a la web, con lo que ello conlleva en el tiempo de carga.
  • Muchos de ellos funcionan con créditos, por lo que puede llegar un momento en que necesites subir muchas imágenes y te quedes sin créditos para optimizar. Y que tengas que comprar créditos o pasar al formato de suscripción. Sigues teniendo un plugin y además pagando por él.
  • Puedes meter la pata con los ajustes y perder calidad de imagen. Y aunque la mayoría de plugins permite hacer una copia de seguridad de las imágenes antes de optimizar, perderás tiempo recuperándolas y volviendo a probar con nuevos ajustes. Eso si no tenías la copia de seguridad del plugin desactivada.
  • Llegará un día en que querrás probar otro plugin y perderás tiempo haciendo pruebas y más pruebas.

También tiene sus ventajas:

  • Funcionando en modo automático te olvidas del peso de la imagen cuando la subas, ya que el plugin la optimiza sobre la marcha.
  • Puedes procesar lotes grandes de imágenes que ya habías subido a tu web y no habías optimizado en su día.

En mi opinión, los plugins y servicios más conocidos, ofrecen una relación peso-calidad de imagen muy similar. Las diferencias son sutiles. Al menos es lo que yo he podido apreciar con los que he probado.

La mala fama que unos pueden atribuir a un servicio de compresión determinado, como el de kraken.io que te mencionaba antes, puede ser debida a que no se establecieron los ajustes correctos al comprimir. A todos nos gustaría que una imagen de 2000px de lado mayor pesase 40 KB. Y es posible. Pero seguramente el resultado sea lo más parecido a las imágenes de 8 bits de los primeros juegos de ordenador.

Con un poco de disciplina, e incluso automatizando procesos, si te gusta Automator en Mac, o te dedicas a programar pequeñas apps en otras plataformas, tendrás un flujo de trabajo rápido y eficaz.

Otro día hablaremos de tamaños máximos de imagen.

Y recuerda que si optimizar imágenes o, en general tu web, se te da mal o no tienes tiempo para ello, yo te ofrezco mi servicio de consultoría para revisar tu sitio web y mejorar su velocidad de carga.

Aviso legal

Finalidad de la recogida y tratamiento de los datos personales: Suscripción al blog de la web y recibir información comercial.
Legitimación: Consentimiento del interesado.
Destinatarios: Hosting: Raiola Networks, SL, empresa de hosting española.
Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en https://volutaestudio.com/solicitud, así como el derecho a presentar una reclamación ante una autoridad de control.
El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios significará que no podré atender la solicitud de contacto.
Información adicional: Puedes consultar la información adicional y detallada sobre Protección de Datos en las siguientes páginas de mi web: Aviso legal, así como consultar mi Política de privacidad.

5 Comentarios

  1. Jose

    Muy interesante y muy bien explicado, tendré que leerlo bien porque es algo que nos salvaría muchas imágenes respetando su calidad.
    Enhorabuena por tu trabajo y explicación¡
    Un saludo¡

    Responder
    • Manolo Santana

      En efecto, amigo Pepe.
      No dejes de probar las diferentes opciones. Te sorprenderás de los resultados.

      ¡Un abrazo!

      Responder
      • Laura

        Lo hago como tú, salvo que para la web no trabajo con Tiff, pues creo que Jpg es más que suficiente. La diferencia es que yo exporto desde Lightroom, pues me parece más sencillo.
        Yo aprendí que, para las webs y, dice todo, rrss, es mejor 72ppp, por muchas razones, sobre todo en tráfico de imágenes. ¿Crees realmente que debería pasar a 300ppp? Ya sabes que yo, con argumentos que me convenzan…
        Por último, desconocía el método del valiente. No tenía ni idea.
        ¡Lo que aprendo leyéndote, mi niño!
        Gracias por toda esta info.
        Besitos.

        Responder
        • Manolo

          Hola Laura,
          Lo de trabajar con tiff era referido a cuando diseñas una composición o retocas una imagen, pues al guardar los cambios no pierdes calidad, como sí ocurre con el jpg y otros formatos.
          Fíjate en que digo trabajar en tiff y exportar a otros formatos.

          En cuanto al mito de los 72 ppp, mira este post en el que te lo explican bien claro:
          https://d.pr/NB6nRX

          Ya ves que en este mundo no todos los “maestros” son lo que parecen 😉

          Un besote y gracias por pasarte.

          Responder
  2. Mina

    Mejor explicado, imposible, Manolo.

    Yo, como Laura dice también, seguiré usando JPG en la web. Uso el formato TIFF siempre, cuando escaneo trabajos que luego exporto a los programas de diseño, es el formato por excelencia e incluso, ahora lo estoy empezando a usar sin fondo para los logotipos.

    Estoy tan aburrida de los plugings que, solo quiero usar los justos y necesarios.

    Desde luego, cada vez me gusta más leerte,

    Muackssss

    Responder

Enviar un comentario

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

Finalidad de la recogida y tratamiento de los datos personales: Responder a los comentarios en el blog.
Legitimación: Consentimiento del interesado.
Destinatarios: Hosting: Raiola Networks, SL, empresa de hosting española.
Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en https://volutaestudio.com/solicitud, así como el derecho a presentar una reclamación ante una autoridad de control.
El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios significará que no podré atender la solicitud de contacto.
Información adicional: Puedes consultar la información adicional y detallada sobre Protección de Datos en las siguientes páginas de mi web: Aviso legal, así como consultar mi Política de privacidad.

Pin It on Pinterest

Abrir chat
📲 Contacta con Voluta Estudio
WhatsApp con Voluta Estudio
Hola 👋🏻
¿Te ayudo?