Todos hemos visitado un sitio de portafolio hermoso que tarda 10 segundos en cargar. ¿Por qué? Usualmente, es porque el diseñador subió un PNG sin comprimir de 15MB directamente desde Photoshop.
Si exportas tu sitio para alojarlo tú mismo, la optimización de imágenes es tu responsabilidad. Y es lo único más impactante que puedes hacer por la velocidad del sitio.
Los Formatos
- JPG: Mejor para fotos. Buena compresión.
- PNG: Mejor para gráficos con colores planos o transparencia. Pesado para fotos.
- SVG: Escalabilidad infinita. Mejor para logotipos e íconos. ¡Úsalos siempre que sea posible!
- WebP: El estándar moderno. Más pequeño que JPG y PNG con mejor calidad.
El Stack de Herramientas
1. TinyPNG / TinyJPG
Pasa cada imagen rasterizada por esto antes de subirla. A menudo puede reducir el tamaño del archivo en un 70% sin pérdida de calidad visible.
2. Squoosh.app
Una herramienta gratuita de Google. Genial para convertir manualmente imágenes genéricas al formato WebP.
3. Lazy Loading (Carga Diferida)
Esta es una técnica de codificación donde las imágenes debajo del pliegue no cargan hasta que el usuario se desplaza hacia abajo.
<img src="photo.jpg" loading="lazy" alt="...">
Solo agregar loading="lazy" a tus etiquetas de imagen puede mejorar drásticamente tus puntuaciones de "Tiempo para Interactuar".
Cómo Maneja NoCodeExport las Imágenes
Cuando usas nuestra herramienta para exportar un sitio de Framer o Webflow, nosotros automáticamente:
- Escaneamos en busca de activos grandes.
- Convertimos imágenes compatibles a WebP.
- Agregamos atributos de carga diferida a imágenes no críticas.
Esto asegura que tu sitio auto-alojado no sea solo más barato—es más rápido que el original.