Si tuviera que elegir una sola optimización para un sitio lento, elegiría las imágenes sin dudarlo. En la mayoría de los sitios que reviso, entre el 60 y el 80 por ciento del peso total de una página son imágenes, y casi siempre están mal preparadas: exportadas a cuatro mil píxeles de ancho para mostrarse a trescientos, en formatos viejos, sin comprimir y cargando todas de una vez aunque el visitante nunca baje hasta el pie de página. La buena noticia es que arreglarlo no requiere saber programar y suele reducir el peso de la página a la mitad o menos.
El error número uno: subir la imagen tal como salió
Una foto de un celular moderno tiene fácilmente cuatro mil píxeles de ancho y pesa varios megabytes. Si la subís así y tu diseño la muestra en un recuadro de ochocientos píxeles, estás obligando a cada visitante a descargar cinco veces más información de la que su pantalla puede mostrar. Es como mandar un plano en escala 1:1 para que alguien lo mire desde el otro lado de la habitación.
La regla práctica es simple: redimensioná al doble del tamaño en el que se va a mostrar, y no más. El doble, no el tamaño exacto, porque las pantallas de alta densidad muestran el doble de píxeles reales. Una imagen que ocupa ochocientos píxeles en el diseño debería subirse a mil seiscientos. Un logo que se ve a ciento diez píxeles no necesita más de doscientos cincuenta y seis. Ese solo cambio suele bajar el peso un noventa por ciento.
Formatos: cuál usar para qué
- WebP es hoy la opción por defecto para casi todo. Pesa entre un 25 y un 35 por ciento menos que un JPG de calidad equivalente, soporta transparencia como el PNG, y lo entienden todos los navegadores actuales. Si tenés que quedarte con un solo formato, quedate con este.
- JPG sigue siendo válido para fotografías si necesitás compatibilidad con software muy viejo, pero en la web ya no hay razón técnica para preferirlo.
- PNG solo tiene sentido para gráficos con pocos colores y bordes duros, o cuando necesitás transparencia perfecta sin pérdida. Usarlo para fotografías es el error más caro que se ve: un PNG de una foto puede pesar diez veces más que su equivalente en WebP.
- SVG es el ganador absoluto para logos, íconos y cualquier gráfico vectorial. Pesa poquísimo, se ve perfecto en cualquier tamaño y no se pixela nunca.
- AVIF comprime todavía mejor que WebP, pero tarda más en generarse y no siempre vale la complejidad extra. Como plan a futuro, sí; como prioridad de hoy, no.
Compresión: cuánto se puede apretar sin que se note
Cuando guardás una imagen, elegís un nivel de calidad. La intuición dice que hay que usar el máximo, y la intuición se equivoca. La diferencia visual entre calidad cien y calidad ochenta es prácticamente imperceptible en una pantalla, pero la diferencia de peso es enorme, del orden de la mitad.
Mis valores de referencia: para fotografías sin transparencia, calidad ochenta; para imágenes con transparencia, ochenta y ocho; para capturas de pantalla con texto, un poco más alto, porque el texto es lo primero que se ensucia al comprimir. Y siempre, siempre, mirá el resultado en pantalla antes de darlo por bueno. Un porcentaje es solo un número; el ojo es el juez.
Carga diferida: no descargar lo que nadie está mirando
Una página con veinte imágenes descarga las veinte apenas se abre, aunque el visitante solo vea las dos primeras. La carga diferida cambia eso: las imágenes que están fuera de la pantalla se descargan recién cuando el visitante se acerca a ellas.
Hoy es tan simple como agregar un atributo estándar a la etiqueta de la imagen, y los navegadores modernos lo entienden sin necesidad de ningún script. Pero hay una excepción importante que mucha gente pasa por alto: la imagen principal, la que se ve apenas abrís la página, no debe cargarse en diferido. Al contrario, conviene marcarla como prioritaria para que empiece a descargarse antes que nada. Diferir la imagen del encabezado empeora la métrica que Google mide, en lugar de mejorarla.
Dos detalles que valen mucho y cuestan nada
El primero es declarar el ancho y el alto de cada imagen en el código. Sin eso, el navegador no sabe cuánto espacio reservar y el contenido salta cuando la imagen termina de cargar. Esa es exactamente la métrica de estabilidad visual que Google penaliza, y se arregla con dos atributos.
El segundo es el texto alternativo. Sirve para accesibilidad, que ya sería razón suficiente, pero además es una de las pocas señales que tienen los buscadores para entender de qué es una imagen. Describí lo que se ve de forma natural, sin amontonar palabras clave: "rack de servidores en un centro de datos" es útil, "hosting barato hosting rápido hosting argentina" es contraproducente.
Cómo lo hago en la práctica
- Redimensiono al doble del tamaño de visualización.
- Convierto a WebP con calidad ochenta (ochenta y ocho si tiene transparencia).
- Le pongo un nombre de archivo descriptivo, en minúsculas y con guiones, sin acentos ni espacios.
- Escribo el texto alternativo.
- Agrego ancho, alto y carga diferida, salvo en la imagen del encabezado.
- Verifico en el navegador que se vea bien y mido la página antes y después.
Un detalle de servidor que importa: los nombres de archivo deben ir en minúsculas. Windows no distingue mayúsculas de minúsculas, pero Linux sí, así que una imagen que en tu computadora se ve perfecta puede aparecer rota al subirla. Es uno de los errores más frustrantes justamente porque en local funciona.
El rol del hosting
Optimizar las imágenes reduce cuánto hay que enviar; el hosting determina qué tan rápido se envía. Los dos factores se multiplican. Lo que conviene tener del lado del servidor es caché del navegador bien configurada para que el visitante que vuelve no descargue de nuevo lo que ya tiene, compresión activada, discos SSD para servir archivos rápido, y ancho de banda suficiente para no ahogarte en un pico de visitas.
Por eso trabajo con BanaHosting: SSD puro sobre servidores Dell con RAID-10, LiteSpeed con LSCache que maneja muy bien el contenido estático, ancho de banda sin límite y entre 50 y 150 GB de almacenamiento según el plan, que es de sobra para una biblioteca de imágenes bien optimizada. Arranca en 4,95 dólares al mes, con migración gratis de hasta 3 sitios y 30 días de garantía de devolución para probarlo sin riesgo.