Los formatos modernos pueden reducir el peso descargado, mientras que JPG sigue siendo una alternativa común. Pero exportar tres versiones no acelera automáticamente una web: el navegador debe recibir el archivo apropiado.
Entender la función de cada formato
AVIF puede comprimir bien muchas fotografías, WebP tiene compatibilidad amplia y JPG ofrece una alternativa conocida. El resultado depende de cada imagen y navegador. Compara archivos reales antes de decidir un formato único.
Implementar una selección real
Usa <picture> o negociación de contenido del servidor cuando corresponda. Si la base solo guarda un JPG y la plantilla siempre lo muestra, crear AVIF y WebP no cambia la descarga. Comprueba las peticiones en el panel de red del navegador.
Adaptar dimensiones al lugar de uso
Genera tamaños para miniaturas, tarjetas y cabeceras. No entregues una imagen de 1600 píxeles sin adaptar para una vista móvil pequeña. Declara dimensiones para reservar espacio y reducir saltos de diseño.
Cuidar nombres y textos alternativos
Elige nombres descriptivos sin repetir palabras clave artificialmente. El texto alternativo debe explicar la función de la imagen en contexto; las imágenes puramente decorativas pueden necesitar alt vacío. Traduce descripciones significativas en webs multilingües.
Revisar tratamientos e importaciones
Tras importar SQL o migrar, comprueba rutas físicas, MIME y relación entre original y variantes. Vigila que la regeneración y la caché no creen referencias incoherentes. Evita imágenes rotas por entradas eliminadas.
Prueba en una ficha de artículo
Abre la página en móvil y ordenador, examina src, srcset y tipo de respuesta y compara tamaños descargados. Comprueba alternativas, dimensiones y textos antes de afirmar que los tres formatos funcionan.
Preguntas frecuentes
¿Subir archivos AVIF hace que se utilicen automáticamente?
No. El servidor o la plantilla debe seleccionarlos y entregarlos.
¿Todas las imágenes necesitan la misma compresión?
No. Ajusta según contenido, tamaño y calidad visible.
Guías relacionadas en Concepty
- Rendimiento móvil: cinco comprobaciones antes de instalar otro plugin
- Ficha de producto PrestaShop: mejorar la compra sin sobrecargar la página
- Core Web Vitals en comercio electrónico
Para una adaptación o comprobación de compatibilidad, consulta los servicios Concepty o contacta con Concepty.