Prepare una imagen principal que funcione en el diseño de página real.

A menudo aparece una imagen destacada al lado o detrás del título principal. Verifique dónde se ubican el asunto, el texto y los controles en diferentes anchos antes de elegir una exportación. Una cara cerca del borde de una panorámica de escritorio puede desaparecer en un recorte de teléfono alto. Un archivo más grande no solucionará ese problema de encuadre. Haga una composición separada cuando el diseño lo necesite, utilizando su editor de diseño o fotografía.

Esta herramienta puede ajustar o recortar una fotografía proporcionada, pero no puede ampliar el fondo, eliminar objetos ni crear espacios vacíos para copiar. No confíe en la nitidez para hacer que un fondo ocupado sea adecuado para texto. El sitio web aún necesita un contraste adecuado y un diseño que mantenga el mensaje legible. Conserve el archivo maestro de origen para poder crear un recorte de teléfono diferente sin editar repetidamente el archivo de entrega de escritorio ya comprimido.

La configuración inicial se ajusta a 1920 por 1920 píxeles y exporta WebP con enfoque ligero. Ese cuadro es un vínculo ilustrativo, no un requisito para todos los héroes. Mida la función de diseño real de la imagen y proporcione candidatos adecuados a través de su sitio web. Ajustar dentro conserva la composición de origen, mientras que Tamaño exacto proporciona un recorte específico que debes revisar detenidamente.

Inspeccione caras, bordes arquitectónicos, degradados y cualquier detalle fino importante para la página. Compare WebP con JPEG en dimensiones equivalentes en lugar de asumir que una extensión en particular siempre gana. Mantenga PNG para obtener un gráfico transparente cuando sea necesario, ya que la exportación actual WebP aquí utiliza un fondo blanco. Evite ampliar una vista previa de archivo pequeña: utilice la fuente con licencia de resolución completa. Un límite de bytes puede forzar la reducción de la calidad o de los píxeles, así que juzgue las dimensiones exportadas y el resultado visible juntos.

El archivo es sólo una parte de la actuación del héroe. Su sitio debe solicitar la fuente adecuada con suficiente antelación, reservar su espacio y evitar retrasar a un héroe visible detrás de un trabajo no relacionado. Un héroe en la mitad superior de la página suele ser un elemento visual importante, así que verifique su comportamiento de carga real en lugar de aplicar la carga diferida automáticamente. El convertidor no puede cambiar el marcado de su página, el sistema de contenido o la configuración de alojamiento.

Coloque un candidato en el borrador real y pruebe los diseños del teléfono y del escritorio. Verifique el archivo seleccionado en las herramientas del navegador y mida la página en condiciones realistas antes de reclamar una mejora de LCP. Verifique que el título siga siendo legible y que el héroe no cambie el diseño cuando aparezca. Mantenga un texto alternativo útil si la imagen transmite información, o un tratamiento decorativo adecuado si no lo hace. Sólo entonces aplique las opciones de exportación a los banners de páginas relacionadas. El procesamiento de la imagen permanece en su dispositivo.

Una primera prueba útil es la pantalla de inicio completa con su título, botón y navegación reales. Inspeccione tanto el recorte de escritorio más ancho como el recorte de teléfono compatible más estrecho. Busque que el tema desaparezca, que el texto cruce un área ocupada y que el contenido importante quede detrás de un control. Si la foto solo funciona cuando se elimina el encabezado, revise el diseño o la composición original antes de comprimirla más. Mantenga un recorte telefónico separado cuando la implementación lo admita y el sujeto lo necesite. El archivo final debe respaldar el mensaje de la página así como su presupuesto de carga, en lugar de simplemente verse bien por sí solo.