El problema con la visualización de imágenes ha surgido desde la llegada de la adaptabilidad en Internet. Queremos que el sitio se vea bien en cualquier tableta, teléfono, en orientación vertical u horizontal, así como en pantallas de gran tamaño de 5K. También en el mercado hay pantallas Retina con una alta densidad de píxeles (DPI), donde las imágenes normales se ven borrosas. La proporción del tráfico móvil está creciendo, y los grandes recursos están destinados a cargar imágenes económicamente. Veamos cómo resuelven estos problemas en los sitios web de Apple, Tilda y la plataforma de blogs Medium.
Apple: usuario avanzado de imagen de fondo
Apple confía en el diseño de sus productos, con un fuerte enfoque en la investigación de visualización de imágenes. En el sitio web de Apple, al momento de escribir esto, la optimización de la imagen es proporcionada por las capacidades de CSS, más precisamente, la imagen de fondo. El principio clave de este enfoque es el ancho fijo de la imagen entre los puntos de ruptura, es decir, el rechazo de las imágenes "de goma". Considere el ejemplo de una de las imágenes del sitio
www.apple.com/mac<figure class="imac-image" data-progressive-image=""></figure>
.section-imac .imac-image { width:939px; height:631px; background-size:939px 631px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large_2x.jpg") } } @media only screen and (max-width: 1068px) { .section-imac .imac-image { width:795px; height:536px; background-size:795px 536px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium.jpg") } } @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium_2x.jpg") } } @media only screen and (max-width: 735px) { .section-imac .imac-image { width:365px; height:246px; background-size:365px 246px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small.jpg") } } @media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small_2x.jpg") } }
Para la compatibilidad entre navegadores, se utilizan tres métodos de inmediato para establecer la densidad de píxeles de la pantalla:
-webkit-min-device-pixel-ratio: 1.5
resolución mínima: 1.5dppx
resolución mínima: 144 ppp
¿Cuáles son los pros y los contras de este enfoque?
Pros
- Facilidad de implementación. Esta es quizás la forma más comprensible de cambiar la imagen a un cierto tamaño y densidad de la pantalla.
- Cubriendo todos los problemas: se está abordando el problema del tamaño de la pantalla y la densidad de píxeles.
- Sin diseño de salto gracias a los tamaños preestablecidos.
- Puede utilizar las funciones CSS integradas para trabajar con fondos (modo de mezcla para efectos, posición, recorte la imagen si es necesario).
Contras
- No puede hacer una imagen de "goma". Los tamaños fijos determinan la relación de aspecto, por lo que cuando intenta comprimir o estirar, recortamos la imagen o hay un espacio vacío en la parte inferior. Sí, puede usar padding-bottom en porcentaje en lugar de tamaño, pero esto ya es una solución alternativa, un hack CSS que complica el concepto básico.
- Un montón de código CSS. Sí, CSS es fácil de leer, pero con una gran cantidad de puntos de interrupción e imágenes, el tamaño de CSS puede aumentar indefinidamente (ver más abajo "Preprocesadores CSS al rescate").
- No hay control sobre la descarga de imágenes. Si utiliza este enfoque en su forma pura, cargará todas las imágenes en la página al mismo tiempo. Y CSS, a diferencia de img, no tiene devoluciones de llamada de carga que le permiten controlar si las imágenes se cargan o no.
- Requiere precisión meticulosa. Deberá establecer las dimensiones para todas las imágenes. Y no menos importante, al reemplazar una imagen con otra, deberá editar el CSS para las nuevas dimensiones.
Preprocesadores CSS al rescate
Lo más probable es que ya esté utilizando uno de los preprocesadores CSS como SCSS, LESS, PostCSS o Stylus, y pueden simplificar enormemente su vida. Intentemos optimizar el código del sitio web de Apple usando SCSS. Para expresiones de medios, tome el
mixin de medios y escriba nuestro mixin para la imagen:
@mixin image($width, $height, $url) { width: $width; height: $height; background-size: $width $height; background-repeat:no-repeat; background-image:url($url); }
Vamos a configurar las variables:
$breakpoints: ( 'phone': 735px, 'tablet': 1068px ); $media-expressions: ( 'screen': 'only screen', 'retina': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi)' );
Obtenemos un SCSS que compila uno a uno en el CSS de Apple:
.section-imac .imac-image { @include image(939px, 631px, "image_large.jpg"); } @include media('screen', 'retina') { .section-imac .imac-image { @include image(939px, 631px, "image_large2x.jpg"); } } @include media('screen', '<=tablet') { .section-imac .imac-image { @include image(795px, 536px, "image_medium.jpg"); } } @include media('screen', '<=tablet', 'retina') { .section-imac .imac-image { @include image(795px, 536px, "image_medium_2x.jpg"); } } @include media('screen', '<=phone') { .section-imac .imac-image { @include image(365px, 246px, "image_small.jpg"); } } @include media('screen', '<=phone', 'retina') { .section-imac .imac-image { @include image(365px, 246px, "image_small_2x.jpg"); } }
Resumen
Este es un gran enfoque para vivir si no tienes muchas fotos o rara vez cambian.
Tilda: imagen de fondo con efecto de desenfoque
Tilda es un creador de sitios que proporciona varios componentes para mostrar imágenes. Considere la forma más fácil de subir fotos "perezosamente". ¿Qué aspecto tiene html antes de cargar una imagen?
<div data-original="https://static.tildacdn.com/image.jpg" style="background: rgba(0, 0, 0, 0) url(https://static.tildacdn.com/image-small.jpg) no-repeat scroll center center / cover;"> </div>
El efecto de desenfoque se logra debido al hecho de que la vista previa tiene un tamaño pequeño (20x20 píxeles), pero con la ayuda de la propiedad css de la portada, la imagen se extiende a todo el ancho y la altura. Menos: este desenfoque no se ve muy bien, pero es muy simple y no sobrecarga el procesador.
Después de cargar, la imagen a tamaño completo simplemente se sustituye en el estilo en línea.
Pros
- Carga perezosa.
- Fácil de mantener
Contras
- La misma imagen para cualquier dispositivo. La adaptabilidad se implementa solo dentro de los límites de la estilización (la imagen simplemente se recorta de diferentes maneras).
- Efecto de desenfoque feo.
- No hay transición entre el desenfoque y la resolución completa.
Resumen
Este es un método de trabajo si necesita un componente simple y no desea molestarse con seis o más imágenes para diferentes resoluciones de pantalla. Bueno para sitios con muchas fotos.
Medio: desenfoque de lienzo
La plataforma de blogs de medium.com ha marcado una gran diferencia en el mundo de las imágenes web debido al hermoso efecto de desenfoque de las imágenes subcargadas. Este efecto se logra utilizando la biblioteca stackblur-canvas.
HTML parece un sandwich:
<img src="placeholder.jpg"> <canvas> <img src="full-size.jpg">
Esto le permite darse cuenta del efecto de una transición suave. Para una imagen a tamaño completo, inicialmente opacidad: 0 pasa por la transición CSS a opacidad: 1.
Blur Battle: CSS vs SVG vs Canvas
Entonces, si no somos Apple, lo más probable es que sea más conveniente usar la carga diferida de imágenes y el efecto de desenfoque. Por el momento hay al menos tres formas de crear un efecto blair (y otra opción de Tilda, pero no lo consideraremos, ya que este no es un blair "real").
¿Por qué vale la pena usar stackblur-canvas para desenfocar si ya tiene un filtro para desenfocar integrado en el navegador CSS?
- Los problemas Los filtros CSS y SVG de forma predeterminada difuminan los bordes de la imagen. Hay una solución especial para el filtro svg, para el filtro incorporado: desenfoque () debe usar el recorte.
- Rendimiento Stackblur-canvas funciona muy rápido, los filtros CSS funcionan aún más rápido, por lo que con una gran cantidad de imágenes borrosas, la elección es definitivamente para los filtros CSS.
- Belleza Aquí, subjetivamente, pero en mi opinión, stackblur se ve más hermoso. Un filtro svg tiene artefactos feos.
Etiqueta de imagen: el pináculo de la evolución
Al principio, describimos el método de Apple y descubrimos que css tiene expresiones de medios para el tamaño de pantalla y la densidad de píxeles. Y se pueden usar simultáneamente para seleccionar una imagen específica para mostrar. Un inconveniente importante es que la imagen en el fondo no "conoce" su relación de aspecto, no puede ser "de goma". Además, desde el punto de vista de la semántica de la web, el uso del fondo es incorrecto para mostrar todas las imágenes en una fila.
La etiqueta img puede tener un atributo srcset, pero debe elegir un tamaño de pantalla o densidad de píxeles; no puede combinar estos parámetros.
La etiqueta de la imagen está libre de este inconveniente y, como img, "conoce" su relación de aspecto. Ya es compatible con el
92% de los navegadores. Esta etiqueta es adecuada para aquellos que pueden permitirse no adaptarse a IE.
API de observador de intersección
Finalmente, hablemos sobre la implementación de imágenes de carga diferida. El enfoque clásico es utilizar una combinación de eventos de desplazamiento, cambio de tamaño y cambio de orientación y calcular la posición de una imagen en particular en relación con el área visible de la pantalla.
En 2019, puede reemplazar el conjunto de muletas con una API de navegador especial:
observador de intersección . Es compatible con todos los navegadores modernos. Para iOS e IE anteriores, debe usar el
polyfill oficial de
w3c .
Una mirada al futuro: ¿qué más falta para la felicidad completa?
Entonces, ya tenemos una etiqueta de imagen, que tiene un buen soporte para el navegador, pero el problema de la carga diferida persiste. Todavía necesitamos confiar en nuestras propias implementaciones basadas en el observador de intersección o una combinación de eventos JS. ¿Cuándo ofrecerán los navegadores una solución nativa? Por ejemplo, Chrome versión 75 promete proporcionar soporte para la propiedad de carga para etiquetas img e iframe. Puede actualizar sus componentes para obtener soporte nativo para la carga diferida comprobando la presencia de una propiedad en el prototipo de la imagen: si tiene éxito, puede abandonar su propio código de carga diferida, ya que el navegador hará todo por usted.
if ('loading' in HTMLImageElement.prototype)
CMS y contenido del usuario
¿Cuál es la mejor manera de mostrar imágenes cargadas por los usuarios? Como regla, vale la pena hacer todo lo más simple posible, sin obligarlo a cargar imágenes por separado para el teléfono, la tableta y el escritorio. Por lo tanto, solo tenemos una imagen para todos los dispositivos. Para tal situación, el enfoque Tilda (para la máxima simplicidad) o Medio es perfecto: si desea hacer un efecto de desenfoque real, tal vez reemplazando stackblur-canvas con css estándar: desenfoque () para un mayor rendimiento.
Resumen
Todavía no hay una forma única y "más correcta" para mostrar imágenes. Si necesita admitir navegadores antiguos e IE, entonces su elección es una imagen de fondo con expresiones de medios e img para casos simples. Para nuevos proyectos, puede ser más conveniente reemplazar la imagen de fondo con la imagen. Si desea hacer una hermosa carga perezosa, pruebe stackblur-canvas, y si el rendimiento es importante para usted, entonces css filtros o imágenes estiradas en un fondo de estilo tilde.