¿Qué es la relación de píxeles del dispositivo?

La relación de píxeles del dispositivo es la cantidad de píxeles físicos de la pantalla por píxel CSS en cada eje, por lo que una relación de 2 hace corresponder un píxel CSS con un bloque de 2 por 2 píxeles del dispositivo. Influye en el nivel de detalle de imagen que una pantalla puede mostrar dentro de un tamaño de diseño determinado.

Cómo funciona la relación de píxeles del dispositivo

Un navegador organiza las páginas en píxeles CSS y asigna ese sistema de coordenadas a los píxeles del dispositivo de la pantalla mediante un factor de escala. El factor refleja el entorno de visualización y puede cambiar con la configuración de la pantalla o el zoom de la página, por lo que no es una especificación permanente del hardware. La selección de imágenes candidatas y el dimensionamiento del búfer de respaldo de un canvas pueden usarlo para conservar el detalle al tamaño CSS renderizado. Forma parte de las decisiones de presentación del lado del cliente, no de los metadatos de resolución intrínseca del archivo multimedia.

Datos clave

  1. El navegador expone la relación actual mediante window.devicePixelRatio, pero mover una ventana entre pantallas o cambiar el zoom de la página puede alterar el valor durante una sesión.
  2. El descriptor de densidad de srcset permite al navegador comparar las imágenes candidatas con la densidad efectiva de la pantalla, teniendo también en cuenta sus propias reglas de selección y las condiciones de la red.
  3. Un canvas cuyas dimensiones de mapa de bits coincidan únicamente con sus dimensiones CSS puede verse poco nítido en una pantalla de alta densidad; aumentar el búfer de respaldo también incrementa el uso de memoria y el trabajo de dibujo.

Cuándo importa la relación de píxeles del dispositivo

Usa la relación de píxeles del dispositivo al seleccionar las dimensiones de imágenes adaptables para obtener un renderizado más nítido. Proporcionar una resolución excesiva aumenta los costos de transferencia y memoria sin mejorar el detalle más allá de la capacidad de la pantalla.

Convierte tus conocimientos sobre multimedia en un pipeline funcional

Conecta las subidas, el procesamiento, la IA, el almacenamiento y la entrega mediante una sola API declarativa, mientras nos encargamos por ti del stack de encoding, el escalado y los cambios constantes de formatos.

Prueba Transloadit gratis