highresdisplays-teaser_EN

HTML5 y CSS3: prepare su sitio web para pantallas de alta resolución

Cuando Apple presentó una nueva pantalla de alta resolución, la llamada pantalla Retina, para sus iPhones, iPads y MacBooks hace un par de años, marcaron el comienzo de una nueva era en la calidad de las pantallas. En tales pantallas, el ojo humano ya no puede discernir píxeles individuales. Dado que las pantallas de alta resolución son la norma y no la excepción hoy en día, encontrará cada vez más dispositivos móviles de alta resolución de gama media. Muchas aplicaciones ya son compatibles con la alta resolución y ahora también puede crear sitios web de alta resolución con HTML5, CSS3 y JavaScript, sin bibliotecas de JavaScript adicionales.

El doble de nítido gracias a la doble densidad de píxeles

Los dispositivos móviles tradicionalmente usan un ancho predeterminado de 320 píxeles, por lo que muchos sitios web móviles están diseñados para este ancho. Las pantallas de alta resolución, sin embargo, vienen con el doble de píxeles o incluso más. Para evitar que un sitio web aparezca la mitad de su tamaño en una pantalla de doble densidad, se ampliará. Esto funciona bien con fuentes y gráficos vectoriales. Sin embargo, los formatos basados ​​en mapas de bits, como los archivos JPEG y PNG, se vuelven borrosos y pixelados.

Debido a que tales pantallas se vuelven cada vez más populares, proporcionar proyectos web en calidad de alta resolución es un factor importante para los diseñadores y desarrolladores web.

HTML5 y la propiedad srcset

La gente había estado luchando durante mucho tiempo para proporcionar imágenes para pantallas de alta resolución en HTML5. los srcset atributo se ha convertido en el método de elección. Le permite definir múltiples fuentes de archivos para diferentes densidades de píxeles. La densidad de píxeles se define por separado con un espacio después de la imagen de referencia, por ejemplo, «2x» para densidad de doble píxel.

<img  src="https://www.noupe.com/design/image.jpg" width="320" height="160" alt="" />

En el ejemplo anterior, dos archivos se definen mediante srcset. El primero se usa para dispositivos de densidad de píxeles estándar. Para densidades de píxeles estándar, puede dejar el valor «1x» out. Le sigue un archivo para pantallas de doble densidad de píxeles. El src El atributo debe usarse como respaldo para navegadores más antiguos. Además, haga referencia a la imagen «normal» aquí.

html5-css3-pixeldichte-vergleich
Comparación de dos imágenes en una pantalla de alta resolución: densidad de píxeles doble (superior) y densidad de píxeles estándar (inferior)

También puede agregar el ancho y el alto físicos de una imagen a la fuente de archivo adecuada dentro del srcset atributo en lugar de definir la densidad de píxeles.

<img  src="https://www.noupe.com/design/image-640w.jpg" alt="" />

Si elige la última opción, la imagen se escalará al ancho del navegador/ventana, si no usa height o width atributos El navegador selecciona el archivo apropiado para el dispositivo. Si su dispositivo tiene un ancho de pantalla de hasta 320 píxeles, el navegador utilizará el archivo image-320w.jpg. Si la resolución es superior a 320 píxeles, utilizará el archivo image-640w.jpg.

Al usar el sizes atributo, puede ajustar el ancho mostrado de la imagen. Deberá especificar la información multimedia junto con el ancho de imagen preferido.

<img   src="https://www.noupe.com/design/bild-640w.jpg" alt="" />

En el ejemplo anterior, la imagen se escalará al 50% del ancho de la ventana gráfica (50vw) para un ancho de ventana gráfica de al menos 320 píxeles (min-width: 320px). Si tiene menos de 320 píxeles, la imagen ocupará todo el ancho de la ventana gráfica (100vw).

html5-css3-pixeldichte-sizes
Diferentes anchos: 100% de la ventana gráfica en modo vertical y 50% en modo horizontal

Solo puede definir la densidad de píxeles (por ejemplo, 2x) o el ancho y alto (por ejemplo, 320w 160h) dentro de una srcset referencia del archivo. No es posible combinarlos.

los srcset atributo también funciona con el nuevo <picture> y los asociados <source> elemento. los <picture> le permite definir imágenes para diferentes tamaños de visualización/ventana. Y también puede definir fuentes para diferentes densidades de píxeles.

<picture>
  <source  media="(min-width: 320px)" />
  <source  media="(max-width: 320px)" />
  <img src="https://www.noupe.com/design/image-640w.jpg" width="320" height="160" alt="" />
</picture>

En el ejemplo anterior, se hace referencia a cuatro orígenes de archivos a través de los dos <source> elementos. Los archivos image-320w.jpg y [email protected] se usará para anchos de pantalla/ventana de menos de 320 píxeles (dependiendo de la densidad de píxeles). Los archivos image-640w.jpg y [email protected] se utilizará para anchos de más de 320 píxeles. Tenga en cuenta que el <source> elemento no sabe width y height atributos Si desea definir tamaños, deberá usar CSS.

Y no olvide proporcionar un <img> respaldo para navegadores más antiguos.

los srcset y sizes atributo, así como el <picture> elemento, son compatibles con Chrome 38+ y Firefox 38+. Actualmente, Internet Explorer NO es compatible con los atributos y el elemento. Android Chrome lo hace desde la versión 40 y iOS Safari desde la versión 8.1. Safari, sin embargo, admite sizes solo en parte.

Si desea utilizar el srcset atributo para navegadores no compatibles, puede obtener un polyfill, que imita la funcionalidad de los navegadores más antiguos.

CSS3 y conjunto de imágenes ()

También puede definir diferentes fuentes de imagen para diferentes densidades de píxeles usando CSS3. Esto se puede hacer con image-set(). De manera similar al atributo HTML5 srcsetpuede hacer referencia a varios archivos a través de url(). image-set() se puede utilizar siempre que se defina una fuente de imagen a través de url().

body {
  background-image: url("hg.jpg");
  background-image: image-set(
    url("hg.jpg") 1x,
    url("https://www.noupe.com/design/[email protected]") 2x
  );
}

En el ejemplo anterior, una imagen de fondo para dos densidades de píxeles se define mediante image-set(). Actualmente, debe marcar la notación con los prefijos de proveedor apropiados, por ejemplo, -webkit-image-set(). Nuevamente, podría ser una buena idea obtener una alternativa. Es importante que el respaldo preceda image-set(). Navegadores que no saben image-set() ignorará el segundo background-image propiedad. Todos los demás navegadores ejecutarán la segunda propiedad y sobrescribirán la primera.

html5-css3-pixeldichte-hg
Fondo de alta resolución (superior) y fondo de resolución «normal» (inferior)

los image-set() La notación actualmente es compatible con Chrome 31+, iOS Safari 7.1+ y Android Chrome 40+. Firefox e Internet Explorer no lo admiten.

junto al image-set() notación, que admite diferentes densidades de píxeles solo para imágenes, también están las consultas de medios min-resolution y max-resolutionque consideran cualquier propiedad CSS para diferentes densidades de píxeles.

@media screen and (min-resolution: 2dppx) {
  body {
    background: url("https://www.noupe.com/design/[email protected]");
  }
}

En el ejemplo anterior, un gráfico de fondo para pantallas de densidades de doble píxel se define a través de min-resolution. La unidad dppx representa dot per pixel y representa la densidad de píxeles. Pero también hay otras unidades como dpi (dots per inch), que le permite proporcionar imágenes en una resolución imprimible, o dpcm (dots per centimeter). Debes usar la unidad dppx para pantallas

los resolution La función es compatible con Chrome 31+ y Firefox 35+. Internet Explorer es compatible con la característica de la versión 9 y solo con la dpi unidad. Android Chrome lo admite desde la versión 40 e iOS Safari desde la versión 7.1; sin embargo, solo con la notación anterior min-device-pixel-ratio o max-device-pixel-ratio.

Alternativa: proporcionar mapas de bits solo en alta resolución

Los nuevos elementos y atributos de HTML5 le permiten proporcionar imágenes para diferentes resoluciones y densidades de píxeles; sin embargo, normalmente tendrá que generar diferentes archivos para una imagen. Los sistemas de administración de contenido como TYPO3 hacen esto automáticamente, pero para proyectos hechos a mano, que tienen que funcionar sin un lenguaje de programación del lado del servidor, deberá generar variantes de archivos manualmente.

Aquellos que quieran ahorrarse el gasto pero aún deseen considerar densidades de píxeles altas pueden tomar el camino intermedio, que requiere solo un archivo para todas las densidades de píxeles. Cree un archivo de imagen de doble resolución (mejor en calidad reducida) e inclúyalo a la mitad de su resolución en un documento HTML. Para una imagen de 640×320 se vería así:

<img src="https://www.noupe.com/design/image-640w.jpg" width="320" height="160" alt="" />

Mientras que las pantallas de alta resolución muestran la resolución física completa, las pantallas estándar reducen la imagen a la mitad de su tamaño. Cuando utilice la densidad de píxeles estándar, no notará ninguna pérdida de calidad debido a la reducción de escala. La densidad de doble píxel aún ofrece una mejor calidad que la que obtendrías con una imagen de resolución normal.

En el lado negativo, las pantallas de resolución estándar descargarán un archivo innecesariamente grande. Por lo tanto, sería recomendable utilizar solo archivos JPEG altamente comprimidos.

html5-css3-pixeldichte-compresión
Archivo JPEG altamente comprimido de la mitad de su resolución (superior)

También se pueden incorporar imágenes en doble resolución mediante CSS. La propiedad background-size le permite reducir la imagen a la mitad de su resolución.

body {
  background-image: url("hg.jpg");
  background-size: 32px 16px;

Si la imagen de fondo del ejemplo tiene una resolución de 64×32 píxeles, se mostrará a la mitad de su tamaño. Entonces, este es el mismo efecto que en el ejemplo de HTML.

Utilice SVG y fuentes de iconos

Todos los navegadores más recientes ahora admiten el formato SVG basado en vectores. Especialmente los logotipos, pero también muchos otros elementos gráficos, son gráficos vectoriales y están incrustados como archivos GIF o PNG en los sitios web. Gracias a los formatos SVG, también se pueden mostrar como gráficos vectoriales en un sitio web, sin importar si usa HTML a través de <img> elemento o CSS a través de url() elemento.

La ventaja del SVG debe ser clara: como está basado en vectores, siempre se mostrará en la mejor resolución y, además, ahorra ancho de banda y ahorra tiempo porque no es necesario proporcionarlo para diferentes resoluciones y densidades de píxeles. .

Las fuentes de iconos son una buena alternativa a los SVG para pantallas de alta resolución. Las fuentes también están basadas en vectores y, por lo tanto, se muestran en una resolución óptima.

Si desea proteger sus apuestas en SVG y no excluir navegadores más antiguos sin compatibilidad con SVG, puede incorporar soluciones alternativas con algunos trucos.

Determinar la densidad de píxeles usando JavaScript

A veces, las imágenes se cargan a través de JavaScript, por ejemplo, en las galerías. Puede cargar directamente la fuente de imagen correcta con la densidad de píxeles adecuada en lugar de generar una <img> elemento con todo srcset referencias a través de Javascript.

JavaScript conoce la propiedad devicePixelRatioque muestra la densidad de píxeles.

if (window.devicePixelRatio > 1) {
  document.getElementsByTagName("img")[0].src = "https://www.noupe.com/design/[email protected]";
}

En el ejemplo anterior, se cargará un archivo de imagen si la densidad de píxeles es superior a 1. Lógicamente, la propiedad solo se puede leer.

Hay una cosa que debe tener en cuenta al usar devicePixelRatio: El valor determinado por esta propiedad depende del factor de zoom real del navegador. Si un documento se muestra con un zoom del navegador del 150 %, devicePixelRatio entrega un valor de 1.5 – con densidad de píxeles estándar. Una densidad de doble píxel mostraría un valor de 3 con el mismo factor de zoom.

Conclusión y enlaces relacionados

Preparar proyectos web para pantallas de alta resolución puede ser una tarea bastante desafiante. Sin embargo, siempre se deben considerar las densidades de píxeles altas, especialmente cuando se trabaja en nuevos proyectos. Todas las soluciones presentadas se pueden equipar fácilmente con respaldos, por lo que no correrá el riesgo de dejar fuera a los navegadores más antiguos.

(dpe)

#HTML5 #CSS3 #prepare #sitio #web #para #pantallas #alta #resolución

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.