Como optimizar imagenes
para web y SEO

El formato que elijas tiene el mayor impacto en el tamano del archivo y la calidad. Los formatos modernos ofrecen archivos drasticamente mas pequenos con la misma calidad visual en comparacion con los estandares antiguos. Esto es lo que debes usar y cuando.

El enfoque ideal es servir multiples formatos usando el elemento HTML <picture>. Ofrece AVIF primero, WebP como alternativa y JPEG como ultima opcion. El navegador elegira automaticamente el mejor formato que soporte.

La compresion reduce el tamano del archivo eliminando datos que el ojo humano no puede percibir facilmente. La clave esta en encontrar el punto donde el tamano del archivo se reduce significativamente pero la calidad permanece visualmente identica al original.

Hay dos tipos de compresion. La compresion con perdida (JPEG, WebP, AVIF) elimina datos permanentemente para lograr archivos mas pequenos - es lo que quieres para fotografias en la web. La compresion sin perdida (PNG, WebP sin perdida) preserva cada pixel pero logra reducciones menores - mejor para graficos y capturas de pantalla.

Herramientas como Squoosh, ImageOptim o Sharp (Node.js) te permiten previsualizar la diferencia de calidad antes de comprometerte. Siempre compara la version comprimida con el original a tamano completo antes de publicar.

El texto alternativo (el atributo alt en las etiquetas <img>) cumple dos funciones: describe la imagen para lectores de pantalla y usuarios con discapacidad visual, y le dice a los motores de busqueda que contiene la imagen. Google usa el texto alternativo como senal principal para el posicionamiento en la busqueda de imagenes.

Un buen texto alternativo es descriptivo, conciso e incluye palabras clave relevantes de forma natural sin saturar. En lugar de "foto.jpg" o "imagen1", escribe algo como "golden retriever corriendo entre hojas de otono en un parque". Describe lo que hay en la imagen, no lo que es (evita empezar con "imagen de" o "foto de").

Para imagenes decorativas que no aportan valor informativo (bordes, espaciadores, patrones de fondo), usa un atributo alt vacio (alt="") para que los lectores de pantalla las omitan por completo.

La carga diferida retrasa la carga de imagenes hasta que estan a punto de entrar en la ventana visible. Esto significa que una pagina con 50 imagenes no descarga las 50 en la carga inicial - solo las visibles en pantalla. El resto se carga a medida que el usuario hace scroll. Esto reduce drasticamente el tiempo de carga inicial y el uso de ancho de banda.

En HTML moderno, la carga diferida es tan sencilla como anadir loading="lazy" a tus etiquetas <img>. No apliques carga diferida a imagenes visibles en la primera pantalla - estas deben cargarse inmediatamente para evitar cambios de diseno y puntuaciones de Largest Contentful Paint (LCP) deficientes.

Las imagenes responsivas se adaptan a diferentes tamanos de pantalla para que los usuarios moviles no descarguen una imagen de 4000px cuando su pantalla tiene solo 400px. Usa los atributos srcset y sizes para proporcionar multiples resoluciones. El navegador elige la version mas pequena que se ajuste a la pantalla del usuario, ahorrando ancho de banda y mejorando el tiempo de carga.

Siempre especifica los atributos width y height en cada imagen para prevenir el Cumulative Layout Shift (CLS) - una metrica de Core Web Vitals que penaliza las paginas donde el contenido se desplaza durante la carga.

Los nombres de archivo de las imagenes son otra senal SEO que muchas personas pasan por alto. Los motores de busqueda leen los nombres de archivo para entender el contenido de la imagen. Un archivo llamado atardecer-sobre-lago-leman.webp le dice a Google mucho mas que IMG_4829.webp.

Para SEO avanzado, anade datos estructurados (schema.org ImageObject) a tus paginas. Este marcado indica a los motores de busqueda el pie de foto, el creador, la licencia y la URL del contenido de la imagen. Las paginas con datos estructurados tienen mas probabilidades de aparecer en los resultados de busqueda de imagenes de Google con fragmentos enriquecidos.

Si anade marcas de agua a tus imagenes antes de publicar, la marca de agua en si se convierte en parte del archivo. Para orientacion sobre como anadir marcas de agua sin perjudicar la calidad de imagen, consulta nuestra guia de mejores practicas para marcas de agua.

Los fotografos y creadores enfrentan un desafio unico: quieren imagenes que se vean impresionantes en la web, que carguen rapido para el SEO y que permanezcan protegidas contra el robo. Estos objetivos pueden parecer contradictorios, pero no lo son - solo necesitas un flujo de trabajo claro.

Guarda tus archivos originales en alta resolucion de forma segura offline - estos son tus maestros y tu prueba de autoria. Para la web, exporta versiones redimensionadas (normalmente 1200-2000px en el lado mas largo) en formato WebP con calidad 80. Esto te da una calidad visual excelente con una fraccion del tamano original del archivo.

Antes de subir, anade una marca de agua a tus versiones web. Una marca de agua semitransparente con opacidad del 30-40% no afectara de forma significativa al tamano del archivo ni a la velocidad de carga, pero proporciona proteccion visual que disuade el robo casual. Despues de anadir la marca de agua, pasa la imagen por una herramienta de compresion para una reduccion final de tamano.

Para la guia completa sobre como proteger tus imagenes mas alla de la optimizacion, consulta nuestro articulo sobre proteger fotos contra el robo en internet y nuestro tutorial de marcas de agua.