Velocidad Web

Imágenes en la web: formatos, tamaños y errores que pesan de más

Guía práctica de optimización de imágenes: WebP y AVIF, tamaños responsive, compresión, nombres de archivo, texto alternativo y SEO de imágenes.

Ozenyx Studio 2 min lectura
Imágenes en la web: formatos, tamaños y errores que pesan de más

Las imágenes son, en casi todas las webs, más del 60% del peso total. Optimizarlas bien es la mejora de rendimiento más rentable que existe: no requiere rehacer nada y el efecto es inmediato.

Elige el formato correcto

  • WebP: el estándar práctico hoy. Compatible con todo lo que importa y entre un 25 y un 35% más ligero que JPEG con la misma calidad.
  • AVIF: comprime aún mejor, ideal para fotografías grandes, aunque tarda más en generarse.
  • SVG: para logos, iconos y cualquier elemento vectorial. Pesa poquísimo y se ve perfecto en cualquier pantalla.
  • PNG: solo cuando necesitas transparencia y no puedes usar WebP.

Y por favor, nada de subir la foto tal cual sale de la cámara: cuatro megas por imagen es un error muy común y muy caro.

El tamaño adecuado, no el máximo

Una imagen que se muestra a 800 píxeles de ancho no necesita 3000. Sirve varias versiones y deja que el navegador elija según la pantalla. En pantallas de alta densidad, el doble del tamaño mostrado es suficiente.

Compresión: hasta dónde

Entre el 75 y el 85% de calidad suele ser indistinguible a simple vista y ahorra muchísimo peso. Compara siempre el resultado, sobre todo en fotos con degradados o texto.

Evita el salto de contenido

Declara ancho y alto o una relación de aspecto en cada imagen. Si no, el texto baja de golpe cuando la imagen carga y el usuario pulsa donde no quería. Es uno de los fallos que penaliza el posicionamiento.

Carga diferida, pero con criterio

Todo lo que esté fuera de la primera pantalla debe cargarse solo cuando se acerca. En cambio, la imagen principal no debe diferirse nunca: es la que mide el tiempo de carga percibida y conviene marcarla con prioridad alta.

SEO de imágenes

  • Nombre de archivo descriptivo: mejor "carta-qr-restaurante-sevilla.webp" que "IMG_2841.jpg".
  • Texto alternativo que describa la imagen para quien no puede verla, no una lista de palabras clave.
  • Contexto textual alrededor: los buscadores entienden la imagen por lo que la rodea.
  • Inclúyelas en el sitemap si son importantes para tu negocio.

El buscador de imágenes trae tráfico real en sectores visuales: restauración, moda, decoración, reformas y eventos.

Fotos propias frente a bancos de imágenes

Las fotos genéricas de oficinas con gente sonriendo no engañan a nadie y no diferencian. Las fotos propias, aunque sean menos perfectas, convierten mejor porque son verificables y reconocibles.

Automatiza el proceso

Lo ideal es que la conversión y el redimensionado sean automáticos al subir el archivo. Si depende de que alguien se acuerde de comprimir cada foto, el rendimiento se degradará en meses.

¿Quieres que revisemos el peso de tu web? Pídenos una auditoría.

CompartirWhatsApp LinkedIn FacebookX

¿Necesitas una página web profesional para tu negocio?

Diseñamos webs rápidas, claras y pensadas para atraer clientes. Cuéntanos qué necesitas y te respondemos en menos de 24 horas.

También te puede interesar