Cuando Apple introdujo sus nuevas pantallas de alta resolución llamada Retina para sus iPhones, iPads y MacBooks hace unos años, iniciaron una nueva era de calidad de pantalla. En tales pantallas, el ojo humano ya no puede discernir píxeles individuales. Hoy día, las pantallas en alta resolución son la norma en lugar de la excepción, así que todas las aplicaciones deben ser compatibles con este formato. Ahora veremos cómo crear sitios web en alta resolución utilizando HTML5, CSS3 y JavaScript, sin necesidad de utilizar JavaScript.
Los dispositivos móviles clásicos usan un ancho predeterminado de 320 píxeles, por lo que todavía puedes encontrar muchos sitios web móviles están diseñados para este ancho. Sin embargo, las pantallas de alta resolución vienen con mucha más resolución. 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.
HTML5 y la propiedad srcset
Muchos habían intentado durante mucho tiempo una forma de proporcionar imágenes para pantallas de alta resolución en HTML5. El atributo srcset 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 que sigue a la imagen de referencia, por ejemplo, ” 2x ” para la densidad de píxeles dobles.
< img srcset = "imagenejemplo.jpg, imagenejemplo@2x.jpg 2x" src = "imagenejemplo.jpg" width = "320" height = "160" alt = "" />
En el ejemplo anterior, dos archivos se definen a través de srcset . El primero se utiliza para dispositivos de densidad de píxeles estándar. Para densidades de píxeles estándar, puedes dejar el valor ” 1x “. Le sigue un archivo para mostrar la densidad de píxeles dobles. El atributo src debe utilizar como una alternativa para los navegadores más antiguos. Además, haga referencia a la imagen “normal” aquí.
También puedes agregar el ancho físico y la altura de una imagen al origen de archivo apropiado dentro del atributo srcset lugar de definir la densidad de píxeles.
< img srcset = "imagenejemplo-320w.jpg 320w, imagenejemplo-640w.jpg 640w" src = "imagenejemplo-640w.jpg" alt = "" />
Si eliges optar por la última opción, la imagen se escalará al ancho de la ventana del navegador, si no usas los atributos de height o width. 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 imagenejemplo-320w.jpg . Si la resolución es superior a 320 píxeles, utilizará el archivo imagenejemplo-640w.jpg .
Al utilizar el atributo de sizes , puede ajustar el ancho mostrado de la imagen. Entonces debes especificar la información de los medios junto con el ancho de imagen preferido.
< img srcset="imagenejemplo-320w.jpg 320w, imagenejemplo-640w.jpg 640w" sizes="(min-width: 320px) 50vw, (max-width: 320px) 100vw" src="bild-640w.jpg" alt="" />
En el ejemplo anterior, la imagen se escalará al 50% del ancho de la ventana 50vw ( 50vw ) para un ancho de ventana 50vw de al menos 320 píxeles ( min-width: 320px mínimo: 320 min-width: 320px ). Si tiene menos de 320 píxeles, la imagen ocupará todo el ancho de la ventana 100vw ( 100vw ).
Solo puede definir la densidad de píxeles (por ejemplo, 2x ) o el ancho y la altura (por ejemplo, 320w 160h ) dentro de una referencia de archivo srcset. No es posible combinarlos.
El atributo srcset también funciona con el nuevo
< picture>
< source srcset="imagenejemplo-640w.jpg, imagenejemplo-640w@2x.jpg 2x" media="(min-width: 320px)" />
< source srcset="imagenejemplo-320w.jpg, imagenejemplo-320w@2x.jpg 2x" media="(max-width: 320px)" />
< img src="imagenejemplo-640w.jpg" width="320" height="160" alt="" />
< /picture>
En el ejemplo anterior, se hace referencia a cuatro fuentes de archivos a través de los dos elementos
Aparte de eso, no te olvides de proporcionar un para navegadores más antiguos.
CSS3 y conjunto de imágenes ()
También se pueden definir diferentes fuentes de imagen para diferentes densidades de píxeles utilizando CSS3. Esto se puede hacer con image-set() . De manera similar al atributo HTML5 srcset , puede hacer referencia a varios archivos a través de url() . image-set() puede usarse siempre que una fuente de imagen se defina a través de url() .
body {
background-image: url("hg.jpg");
background-image: image-set(
url("hg.jpg") 1x,
url("hg@2x.jpg") 2x
);
}
En el ejemplo anterior, una imagen de fondo para densidades de dos píxeles se define a través image-set().
Además de la notación de image-set() , que admite diferentes densidades de píxeles solo para las imágenes, también están las consultas de medios min-resolution max-resolution , que tienen en cuenta las propiedades de CSS para diferentes densidades de píxeles.
@media screen and (min-resolution: 2dppx) {
body {
background: url("hg@2x.jpg");
}
}
En el ejemplo anterior, un gráfico de fondo para pantallas de densidades de píxeles dobles se define mediante min-resolution . La unidad dppx significa dot per pixel y representa la densidad de píxeles. Pero también hay otras unidades como dpi ( dots per inch ), que te permite proporcionar imágenes en una resolución imprimible, o dpcm ( dots per centimeter ). Deberías usar la unidad dppx para pantallas.
Alternativa: proporcionar mapas de bits solo en alta resolución
Los nuevos elementos y atributos HTML5 te permiten proporcionar imágenes para diferentes resoluciones y densidades de píxeles; sin embargo, normalmente tendrás que generar diferentes archivos para una misma imagen. Los sistemas de administración de contenido como TYPO3 lo hacen automáticamente, pero para los proyectos hechos a mano, que no tienen un lenguaje de programación del lado del servidor, te obligan a generar manualmente variantes de archivos.
Otra opción que requiere solo un archivo para todas las densidades de píxeles: Crea un archivo de imagen de doble resolución e insértalo en la mitad de su resolución en un documento HTML. Para una imagen de 640 × 320 se vería así:
< img src = "imagenejemplo-640w.jpg" width = "320" height = "160" alt = "" />
De esa manera estás mostrando una imagen con mayor resolución en una pantalla con una resolución menor. No notarás ninguna pérdida de calidad debido a la reducción de escala. La densidad de píxeles dobles aún ofrece una mejor calidad de la que obtendría con una imagen de resolución normal.
Lo único negativo es que se va a descargar un archivo mayor de lo necesario para pantallas más pequeñas, por lo tanto, sería recomendable utilizar solo archivos JPEG altamente comprimidos.
Las imágenes también se pueden incorporar en doble resolución utilizando CSS. El background-size te 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á en la mitad de su tamaño. Entonces, este es el mismo efecto que en el ejemplo HTML.
SVGs y Iconfonts
Otra opción a tener en cuenta es 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 pueden mostrarse como gráficos vectoriales en un sitio web, sin importar si utiliza HTML a través del elemento o CSS a través del elemento url() .
La ventaja de SVG debe ser clara: como está basada en vectores, siempre se mostrará en la mejor resolución y, además, ahorra ancho de banda y ahorra tiempo porque no es necesario proporcionarla 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 se basan en vectores y, por lo tanto, se muestran en una resolución óptima.
Determine la densidad de píxeles utilizando JavaScript
A veces las imágenes se cargan a través de JavaScript, por ejemplo, en galerías. Puedes cargar directamente la fuente de imagen correcta con la densidad de píxeles adecuada en lugar de generar un elemento con todas srcset referencias de srcset través de Javascript.
JavaScript conoce la propiedad devicePixelRatio que muestra la densidad de píxeles.
if (window.devicePixelRatio> 1) {
document.getElementsByTagName ("img") [0] .src = "image@2x.jpg";
}
En el ejemplo anterior, se cargará un archivo de imagen si la densidad de píxeles es superior a 1.
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 se muestra un documento con un zoom del 150% en el navegador, devicePixelRatio entrega un valor de 1.5 , con densidad de píxeles estándar. Una densidad de píxeles doble mostraría un valor de 3 en el mismo factor de zoom.
