Si tú, querido lector, no eres diseñador/a web y en algún momento te has visto en la necesidad de subir una imagen a una página web, lo más probable es que lo hayas hecho mal. No te enfades ni conmigo ni contigo, es comprensible. Pero la verdad es que me encuentro con este problema muy a menudo: Páginas web sobrecargadas con imágenes en formato png de 5Mb.
Si te sientes identificado, o sospechas que este puede ser tu caso, sigue leyendo. Este artículo es para ti. Si por el contrario ya eres un diseñador web con cierta experiencia, lo que voy a explicar ahora no te va a aportar nada nuevo (deberías controlar el tema)... aunque nunca se sabe, quizás igual aprendas algo nuevo.
Algunas veces, personas que no son diseñadores/as web se ven en la necesidad de gestionar páginas web, publicar blogs, actualizar páginas y, por supuesto, subir imágenes.
Optimizar las imágenes antes de subirlas a una página web es más fácil de lo que parece. Es cuestión de entender algunos conceptos básicos y de usar algún editor de imágenes que nos facilite la vida.
En este artículo te explico qué significa realmente optimizar imágenes para la web, por qué es importante y cómo hacerlo correctamente, incluso si no tienes conocimientos técnicos avanzados. Y todo ello, con una herramienta gratuita: XnConvert.
Si lo tuyo no es la lectura y prefieres una explicación más visual, en este vídeo tienes la misma información que recoge este artículo.
¿Por qué es importante optimizar las imágenes antes de subirlas a nuestra website?
Muchos de vosotros (yo no, yo soy un profesional 🤓) subís imágenes a vuestros sitios web directamente desde vuestros teléfonos, cámaras o bancos de imágenes, sin hacer ningún tipo de ajuste previo. Esto es muy habitual en empleados o dueños de pequeños negocios que gestionan su propia web porque, por ejemplo, no disponen de presupuesto para contratar a una agencia de diseño web.
El problema es que estas imágenes suelen ser mucho más grandes y pesadas de lo que una página web necesita realmente.
Piensa en esto: Cuando visitas una web, tu navegador tiene que descargar todos los archivos necesarios para mostrarla en pantalla: archivos HTML, hojas de estilo CSS, archivos JavaScript, fuentes… y también las imágenes.
Cada uno de estos archivos necesita un cierto tiempo para descargarse. Así que, por pura lógica, la regla es clara:
Cuanto más pequeños sean los archivos, mejor.
Si las imágenes no están optimizadas, lo más probable es que sean físicamente más grandes de lo necesario y que, además, su peso en Kb o Mb sea también excesivo. Esto va a causar muchos "que":
- Que la web tarde más en cargar
- Que la navegación se sienta más lenta
- Que la experiencia del usuario empeore
- Que se afecte negativamente al SEO y al rendimiento general del sitio
Hasta aquí creo que estaréis conmigo en que optimizar las imágenes antes de subirlas a la web es realmente importante.
Ahora, veamos que significa realmente o en qué consiste optimizar una imagen para la web.
Qué significa realmente (en qué consiste) optimizar una imagen para la web
Cuando hablamos de optimizar una imagen para la web, en realidad estamos hablando de tres cosas o conceptos:
- Dimensiones de la imagen (en píxeles)
- Tamaño del archivo (peso en Kb) y compresión
- Formato de imagen
Veamos en detalle cada uno de ellos.
1. Dimensiones de la imagen
Cuando hablo de las dimensiones de una imagen me refiero a su ancho y alto reales, expresados en píxeles.
Uno de los errores más comunes es subir imágenes mucho más grandes de lo que la web necesita. Por ejemplo, muchas imágenes tomadas con un móvil o una cámara pueden tener 4000 o 5000 píxeles de ancho.
En la mayoría de los casos, una página web no necesita imágenes tan grandes.
El tamaño adecuado de una imagen va a estar determinado por el lugar en la que la vamos a publicar, dentro de nuestra página web.
Por ejemplo, no es lo mismo:
- Una imagen que ocupa todo el ancho de la pantalla
- Que una imagen colocada dentro de una columna o un bloque más pequeño
Si subimos a la web una imagen más grande de lo necesario, el navegador la va a mostrar al tamaño que tenga que ocupar dentro de nuestra plantilla, dependiendo de dónde la hayamos colocado. Es decir, el navegador la va a redimensionar, reducir, adaptar... llámalo cómo quieras. Pero el problema reside en que el navegador tiene que cargar el archivo completo de todas formas.
Por ejemplo:
- Si el espacio real que va a ocupar una imagen es de 600 píxeles de ancho
- Pero subimos una imagen PNG de 1450 píxeles y 3Mb
- El navegador mostrará la imagen a 600 pixeles de ancho, pero tendrá que descargar el archivo original de 1450 px de ancho y 3Mb igualmente.
Esto no tiene sentido.
Ajustar o reducir correctamente las dimensiones de una imagen puede suponer una gran reducción del tamaño del archivo, sin afectar a la calidad visual (si se hace bien... sigue leyendo)
2. Tamaño del archivo y compresión
El segundo aspecto clave es el tamaño del archivo, normalmente medido en kilobytes (KB) o megabytes (MB).
La compresión permite reducir el peso del archivo eliminando información innecesaria, sin que el usuario perciba una pérdida notable de calidad.
Aquí es donde entra el equilibrio:
- Muy poca compresión → archivos demasiado pesados
- Demasiada compresión → pérdida visible de calidad
Una imagen bien comprimida debe:
- Verse bien en pantalla
- Cargar rápido
- No mostrar artefactos ni defectos visibles
Aplicar una compresión moderada suele ser suficiente para lograr una mejora importante en el rendimiento de la web.
Pero, ¿cómo podemos aplicar compresión a una imagen? Bueno, para los neófitos del tema, la compresión se aplica al seleccionar el formato correcto de imagen. Repito... sigue leyendo.
3. Formato de imagen
El tercer aspecto es el formato de la imagen.
En el mundo de la web se ha venido usando tradicionalmente el PNG y el JPG (entre otros). Cada uno de estos formatos está pensado para un uso concreto:
- JPG: Este formato es ideal para fotografías (paisajes, retratos, productos, etc)
- PNG: Este formato es muy útil para gráficos que necesitan transparencia.
Durante muchos años, estos formatos han sido los más utilizados en la web. Y aunque siguen siendo válidos, ya no siempre son la opción más eficiente. Es más, te diría que te olvides de ellos para siempre y prestes atención a lo que viene a continuación.
En los últimos años se ha popularizado un formato de imagen creado específicamente para la web: WebP.
El formato de imagen WebP aúna lo mejor de los formatos tradicionales. Entre otras cosas, el formato WebP permite:
- Obtener archivos mucho más ligeros (en Kb).
- Obtener buena calidad visual gestionando la compresión.
- Mejor rendimiento en la mayoría de navegadores modernos.
JPG sigue siendo una opción totalmente válida si se optimiza correctamente y no tienes a mano un editor de imágenes que permita guardar archivos en WebP, pero cuando es posible, WebP suele ofrecer mejores resultados en términos de peso y velocidad.
Y con la herramienta que te voy a mostrar a continuación ya no tienes excusa.
Ejemplo práctico: optimizar una imagen paso a paso con XnConvert
Como resumen, para aplicar todo lo anterior en la práctica, el proceso básico siempre es el mismo, independientemente de la herramienta que utilices:
- Ajustar las dimensiones de la imagen según su uso real
- Aplicar una compresión razonable
- Elegir el formato adecuado
Es decir, no importa la herramienta que utilices, lo que importa es entender esos conceptos y aplicarlos. No obstante, en este artículo te vamos a enseñar a cómo optimizar imágenes para la web con XnConvert, una herramienta gratuita disponible para Windows, MacOS y Linux que podéis descargar aquí.
Paso 1: Adjuntar los archivos a XnConvert
XnConvert nos permite gestionar varios archivos a la vez. En algunos casos es preferible editar las imágenes de una en una porque es posible que cada una vaya a tener un tamaño final distinto, pero en el caso de tener que optimizar un grupo de imágenes que vayan a tener el mismo tamaño, podéis editarlas todas a la vez.
Para adjuntar los archivo a XnConvert podéis simplemente arrastrar y soltar los archivos a la ventana principal o hacer click en el botón de "+ Add Files", lo que prefiráis.
Paso 2: Definir una "Acción" para redimensionar la imagen en XnConvert
Ahora, nos iremos a la pestaña de "Acciones" o "Actions" y haremos click en el botón "Añadir Acción" o "Add Action" para abrir las opciones. Del desplegable, debemos seleccionar "Transform"(Transformar) -> "Resize"(Redimensionar)
En la pestaña de redimensionar, ajustaremos el tamaño que queremos aplicar a nuestra imagen. Podemos indicar tanto el ancho como el alto, aunque yo suelo dejar activa la casilla "keep ratio" (mantener ratio) y jugar sólo con el ancho.
Paso 3: Ajustar el formato de imagen a WebP en XnConvert
Ahora nos iremos a la pestaña "Output" (salida).
En esta pestaña, primero seleccionaremos la carpeta de destino donde queremos guardar el archivo. Después, del desplegable que podemos encontrar en la sección "Format" (formato), seleccionaremos el formato de imagen WebP.
Ahora, haz click en "Settings" (ajustes) y verás una ventana como la siguiente:
En esta ventana, podemos trabajar de dos formas:
- Ajustando la calidad del archivo: Este proceso es menos intuitivo a la hora de calcular en peso en Kb que tendrá el archivo final y tendrás que hacer algunas pruebas hasta dar con el peso ideal.
- Ajustando el peso final del archivo: Este es mi método preferido. Yo tengo una regla genérica: Para imágenes que voy a colocar dentro de la página y que no van a ocupar ni la mitad de la pantalla, nunca sobrepaso los 80-100kb. Para imágenes que van a ocupar todo el ancho de la pantalla, trato de no superar los 140-160kb.
Una vez ajustado el tamaño del archivo, solo nos queda hacer click en "Convert" (convertir) y listo, ya tenemos nuestra imagen en WebP perfectamente optimizada para nuestra web. En la ventana de resultados podéis ver el porcentaje de reducción conseguido, así como el peso en Kb del archivo resultante.
En mi ejemplo, podéis ver que he pasado de tener un archivo PNG de 1.3MB a un archivo WebP de 62.7Kb, una reducción del 94%. Mi navegador va a estar feliz.
Conclusión
Como habéis podido comprobar, optimizar imágenes antes de subirlas a una página web es un paso sencillo, pero tiene un impacto enorme en el rendimiento de nuestra web ya que afecta a la velocidad de carga, experiencia de usuario, rendimiento SEO, etc.
Si sigues este proceso de forma consistente, evitarás muchos de los problemas más comunes que aparecen en páginas web de pequeños negocios.
