Elija dimensiones de imagen útiles para pantallas de alta densidad

Una tarjeta mostrada con 800 píxeles CSS de ancho puede usar una imagen candidata que tenga 1600 píxeles de imagen de ancho como ejemplo de 2x. El navegador puede elegir una fuente adecuada según el diseño, la densidad del dispositivo y otras condiciones cuando el sitio web proporciona marcado de imágenes receptivo. El archivo de 1600 píxeles no significa que la tarjeta deba ocupar 1600 píxeles CSS en la página.

Mida el diseño real antes de exportar. Una columna de artículo, un banner de ancho completo y una tarjeta de producto pequeña rara vez necesitan el mismo tamaño de fuente. Compruebe también el diseño del teléfono, donde la imagen puede ocupar un ancho diferente o utilizar un recorte diferente. Hacer que cada archivo tenga el doble del ancho de la ventana gráfica del escritorio puede desperdiciar bytes. Trate las exportaciones de mayor densidad como candidatas para una implementación con capacidad de respuesta real en lugar de un único archivo de gran tamaño que cada dispositivo debe descargar.

Esta página comienza con un cuadro de ajuste WebP de 1600 por 1600 píxeles. Es un límite ilustrativo, así que reemplácelo con valores basados ​​en el tamaño de pantalla que midió. Fit inside mantiene proporciones y no amplía una fuente más pequeña. Por ejemplo, un original ancho puede alcanzar 1600 píxeles de ancho, mientras que un retrato se ajusta a la altura. Verifique las dimensiones reales de salida.

Si una fuente tiene solo 700 píxeles de ancho, escribir una exportación de 1600 píxeles no crea el detalle de un original más grande. Utilice una fuente mejor o acepte un candidato más pequeño. Compare la nitidez de la luz con Desactivada después de cambiar el tamaño e inspeccione las texturas finas en el tamaño de visualización deseado. Para gráficos transparentes, utilice PNG en su lugar, ya que la exportación actual WebP aquí es opaca. Conserve el diseño o la fotografía original para poder crear diferentes candidatos más adelante.

El convertidor produce un archivo; su sitio web aún necesita seleccionarlo y presentarlo correctamente. Proporcione candidatos de origen adecuados, sugerencias de tamaño precisas y dimensiones de imagen reservadas en la implementación. Un teléfono no debería recibir la imagen más grande simplemente porque existe. Verifique la imagen descargada en las herramientas de desarrollo del navegador al evaluar la página final, porque un sistema de gestión de contenido puede transformarla nuevamente.

Vea la página en configuraciones de pantalla normales y de alta densidad, y compare los detalles con el tamaño de la transferencia. Una imagen de mayor resolución no es automáticamente la mejor opción para una tarjeta decorativa pequeña. Del mismo modo, una imagen excesivamente pequeña puede verse mal en una vista de producto grande. Pruebe contenido significativo, como caras y etiquetas, en lugar de juzgar únicamente un fondo borroso. Mantenga la prioridad de carga adecuada a la posición de la imagen y mida la página real antes de reclamar una mejora en la velocidad o Core Web Vitals.

Supongamos que su tarjeta más ancha tiene 400 píxeles CSS y una ilustración permanece clara con ese ancho. Un candidato de 800 píxeles es una posible exportación 2x cuando la fuente lo admite. Verifique la tarjeta también en diseños más estrechos, ya que una imagen que ocupa toda la pantalla del teléfono puede tener un ancho de visualización diferente al de la tarjeta de escritorio. Exporte desde el original para cada candidato necesario en lugar de ampliar el más pequeño. Confirme qué archivo selecciona el navegador en la página real. Esa verificación de selección final es lo que conecta el cálculo de las dimensiones locales con los bytes que los visitantes realmente reciben por la imagen.