Una imagen puede tener varias versiones útiles sin que cada visitante descargue todas. El código de imágenes adaptables ofrece candidatos e información sobre su presentación prevista. El navegador elige un recurso apropiado según las circunstancias. Comprobar esa elección aporta más que suponer que una pantalla pequeña siempre recibe el archivo más pequeño.
En los procesos habituales de WordPress, los tamaños generados y el código adaptable resuelven buena parte del trabajo. Un tema personalizado, una imagen de fondo, un constructor o un servicio externo pueden cambiar el resultado. Revisa la página pública en vez de considerar que la ficha de la biblioteca demuestra cómo se entrega la imagen.
Compara el espacio visible y el archivo elegido
Selecciona una imagen y anota su ancho visible en una pantalla relevante. Utiliza la inspección del navegador para identificar el recurso seleccionado, con su dirección y dimensiones. En el panel de red, distingue una transferencia nueva de un archivo reutilizado. Reducir la ventana después de cargar una imagen grande no obliga necesariamente al navegador a descargar otra más pequeña.
Para comparar mejor, repite una carga nueva bajo las condiciones previstas. Comprueba por separado la composición móvil y la de escritorio. Las pantallas de alta densidad pueden elegir razonablemente más píxeles que los indicados por el ancho CSS. La pregunta es si la elección resulta adecuada, no si coincide exactamente con una medida visible.
Busca el origen de la diferencia
Supongamos que una tarjeta ocupa una columna estrecha, pero el navegador selecciona una foto mucho mayor. Quizá falten candidatos o la información de tamaño describa un espacio más ancho que el real. Volver a comprimir el original grande no necesariamente corrige esa diferencia. Pide a quien mantiene el tema o componente que revise cómo solicita la imagen.
También importa el problema contrario. Una foto principal puede utilizar una variante pequeña y verse borrosa. No lo resuelvas sustituyendo todas las miniaturas por el original completo. Corrige el contexto que elige mal y conserva las opciones pequeñas donde sí hacen falta.
Leer el diagrama como texto
- Espacio visible: Anota el ancho mostrado y la densidad de píxeles de la pantalla.
- Variantes disponibles: Revisa los tamaños ofrecidos y la información de espacio que indica el marcado.
- Recurso elegido: Identifica la dirección solicitada, sus dimensiones y cómo se transfirió.
- Calidad visible: Confirma que el archivo tenga suficiente nitidez sin transferencias innecesarias.
Corrige el contexto incorrecto sin sustituir todas las miniaturas por originales.
Después de cambiar de tema, revisa material antiguo además de nuevas subidas. Puede que los tamaños requeridos ahora no existan para imágenes anteriores. Cualquier regeneración debe seguir las instrucciones de la herramienta y contar con una copia recuperable, especialmente en bibliotecas grandes.
Describe el resultado de forma sencilla: qué imagen, qué composición, qué archivo y si se ve bien. Ese registro permite separar un problema de entrega de otro de calidad sin convertir toda la biblioteca en un experimento.
