Cómo Dejé de Sufrir y Aprendí a Amar srcset

Seamos honestos: pocas cosas arruinan más tu día que ver cómo tu landing, que estaba casi perfecta, se va al suelo en Google PageSpeed… por una sola imagen bonita.

Trabajaste duro. El diseño está limpio. El texto fluye. Esa imagen del CTA es una obra de arte.
¿Y tu puntaje? De 98 a 57 en un suspiro.

Sí, hemos pasado por eso. En Rainmakers llevamos años creando sitios rápidos y hermosos — y aprendimos a los golpes que uno de los enemigos más frecuentes es siempre el mismo:

👉 Imágenes sin optimizar arriba del pliegue.

Esto No es una Guía Técnica Completa

No vamos a entrar en tecnicismos densos. Esto es uno de esos tips valiosos que usamos en casi todos nuestros proyectos. Es fácil, limpio y no cuesta ni un centavo.

Si estás buscando cómo optimizar imágenes PageSpeed sin pagar por un CDN, sin usar servicios como Cloudinary o Imgix, y sin reescribir media web — este truco es para ti.

¿Qué Está Rompiendo Tu PageSpeed?

Seguro ya sabes que puedes usar loading="lazy" para imágenes que van abajo del pliegue.
Pero esa imagen hermosa arriba del todo — la que hace que tu diseño brille — suele ser la que más te está frenando.

No importa qué tan bien esté el resto, una sola imagen mal cargada puede hundir tu puntaje.

Optimizar Imágenes PageSpeed con srcset Como Un Pro

Hablemos de srcset, ese atributo mágico en HTML que permite al navegador decidir qué versión de la imagen cargar según el tamaño de pantalla. Es responsivo, eficiente y no necesita dependencias.

Paso 1: Crea Varias Versiones de la Imagen

Genera tres versiones de tu imagen principal:

• 300w – para móviles
• 768w – para tablets
• 1200–1536w – para escritorio

Puedes hacerlo con cualquier editor de imágenes, o mejor aún, automatizarlo (te contamos cómo más abajo).

Paso 2: Usa srcset en Tu HTML

<img
  srcset="/assets/img/the-end.webp 1200w, 
          /assets/img/the-end-768px.webp 768w,
          /assets/img/the-end-300px.webp 300w"
  src="/assets/img/the-end.webp"
  alt="Optimizar imágenes PageSpeed con carga responsiva">

Esto le dice al navegador:
“Aquí tienes varias opciones, elige la que mejor se adapte al dispositivo.”

Y sí, lo hace. Rápido, fluido y sin drama.

¿Por Qué Funciona Esto?

• El navegador carga solo lo necesario — sin imágenes gigantes en pantallas chicas.
• Te ahorra reglas CSS complicadas y hacks.
• El diseño se mantiene impecable, y el rendimiento sube como la espuma.

Tips de Rainmakers

• Usa el ancho original de tu imagen como la versión más grande en srcset.
  Por ejemplo: si la imagen mide 1536px, usa 1536w.
• Nuestros tamaños favoritos: 300w, 768w, y entre 1200w–1536w
  (Esto cubre el 99% de los casos. Gracias WordPress por el buen ejemplo.)
• ¿Quieres automatizar el proceso?
  Usa sharp — una herramienta de Node.js que redimensiona imágenes sin usar Photoshop.
  Y no, esto no está patrocinado… ¡aunque ojalá lo fuera! 😄

¿El Resultado? 100 de PageSpeed. Sin Sudar.

De verdad sorprende cómo un cambio tan pequeño puede ayudarte a optimizar imágenes PageSpeed y volver al tan deseado verde 100.

✅ Sin CDN
✅ Sin servicios pagos
✅ Sin perder calidad visual
✅ Sin estrés adicional

Solo HTML limpio, unas cuantas imágenes adaptadas y carga inteligente.

¿Quieres Ir Más Lejos?

Llevamos años desarrollando soluciones web y creando componentes reutilizables para hacer esto facilísimo en React, Vue y nuestro favorito: Svelte.

¿Necesitas un snippet más complejo para empezar? Agenda una llamada — estamos felices de compartir el conocimiento, y la asesoría es completamente gratis, como este blog.