Krypton Solid

Enfrentamiento de rendimiento de efectos de imagen web

Enfrentamiento de rendimiento de efectos de imagen web

A medida que los navegadores mejoran constantemente sus capacidades de representación gráfica, la capacidad de diseñar realmente dentro de ellos se está convirtiendo en una realidad. Algunas líneas de código ahora pueden tener un impacto visual rápido y dramático, y Permitir la coherencia sin mucho esfuerzo.. Y como ocurre con la mayoría de las cosas en el desarrollo web, a menudo hay muchas formas de lograr el mismo efecto. En esta publicación, echaremos un vistazo a uno de los efectos de imagen más populares, la escala de grises, y evaluaremos la facilidad de implementación y las implicaciones de rendimiento del lienzo HTML, SVG, filtros CSS y modos de combinación CSS. ¿Quién ganará?

A medida que los navegadores mejoran constantemente sus capacidades de representación gráfica, la capacidad de diseñar realmente dentro de ellos se está volviendo cada vez más una realidad. Algunas líneas de código ahora pueden tener un impacto visual rápido y dramático, y Permitir la coherencia sin mucho esfuerzo.. Y como ocurre con la mayoría de las cosas en el desarrollo web, a menudo hay muchas formas de lograr el mismo efecto.

En esta publicación, echaremos un vistazo a uno de los efectos de imagen más populares, la escala de grises, y evaluaremos la facilidad de implementación y las implicaciones de rendimiento del lienzo HTML, SVG, filtros CSS y modos de combinación CSS. ¿Quién ganará?

Otras lecturas en SmashingMag:

Los filtros en la web funcionan como una lente colocada sobre una imagen. Se aplican a la imagen. después de que el navegador renderiza maquetación y pintura inicial. Al admitir navegadores, se pueden aplicar filtros individualmente o en capas uno encima del otro. Debido a que se pueden aplicar como modificaciones de la imagen después del renderizado inicial, y es probable que sean una mejora, los filtros se degradan con gracia simplemente al no ser visibles en los navegadores que no los admiten.

Filtros CSS

Comencemos con el método más sencillo para producir un efecto de escala de grises: el filtro CSS humilde pero poderoso.

Imagen sin filtrar. (Ver versión grande)

Para lograr este efecto, agregamos una sola línea de CSS: filter: grayscale(1). Este filtro desatura la imagen y se puede utilizar con cualquier valor numérico o porcentual entre 0 y 1 (o 0% a 100%). Nota: actualmente, los filtros para navegadores basados ​​en WebKit deben tener el prefijo -webkit-. Sin embargo, una solución como Autoprefixer eliminaría la necesidad de agregarlos a mano.

Demostración en vivo – Filtro CSS


.cssfilter-gray {
  -webkit-filter: grayscale(1);
  background: url('img/bird.jpg');
  filter: grayscale(1);
}

Modo de fusión de fondo

Los modos de fusión CSS proporcionan una variedad infinita de opciones para combinaciones de efectos de imagen. Hay dos formas de utilizar los modos de fusión: mix-blend-mode propiedad y la background-blend-mode propiedad.

  • mix-blend-mode es la propiedad que describe cómo el elemento se combinará con el contenido detrás de él.
  • background-blend-mode se utiliza para elementos con múltiples fondos y describe la relación entre estos fondos.

Usaremos el background-blend-mode: luminosity para tirar de los canales de luminosidad sobre un fondo gris en nuestro ejemplo, dando como resultado una imagen en escala de grises. Una cosa a tener en cuenta es que el orden de fondo es constante: Las imágenes de fondo siempre deben ordenarse antes que los colores sólidos o los fondos degradados para que los efectos se procesen correctamente.. El color debe ser la última capa de fondo. Esto también es una protección contra los navegadores más antiguos que no admiten background-blend-mode – la imagen seguirá renderizándose sin el efecto.

La única diferencia con los modos de fusión y el filtro CSS es que ahora tenemos varios fondos y estamos usando background-blend-mode: luminosity, que toma los valores de luminosidad de la imagen superior (el probador de aves) y coloca esos valores de brillo sobre un segundo fondo gris.

Demostración en vivo: modo de fusión de fondo


.cssfilter-gray {
  background: url('img/bird.jpg'), gray;
  background-blend-mode: luminosity;
}

Por el momento, este es el más nuevo y, por lo tanto, menos apoyado opción, aunque todavía funciona bien en Chrome y Firefox, y tiene compatibilidad parcial con Safari. Nota: Safari admite todos los modos de fusión, excepto los modos de fusión basados ​​en HSL: tono, saturación, color y luminosidad.

Lienzo HTML5

HTML5 <canvas> permite una gran flexibilidad en lo que respecta a la manipulación de imágenes, porque tenemos acceso a los datos de cada píxel individual (específicamente a través de canvasContext.getImageData) y puede manipular cada uno a través de JavaScript. Sin embargo, este método es el más complejo y conlleva la mayor cantidad de gastos generales. También tiene algunos matices en los problemas de origen cruzado debido a problemas de seguridad.

Para corregir el error de origen cruzado en Chrome, su imagen deberá estar alojada en un sitio compatible con el intercambio de recursos de origen cruzado (CORS) como GitHub Pages o Dropbox, y especificar crossOrigin="Anonymous". Ver el ejemplo vivo para una demostración.

La forma de lograr un efecto de escala de grises con <canvas> es quitar los componentes rojo, verde y azul de cualquier valor atípico en el valor de píxel mientras se mantiene su nivel de luminosidad (brillo). Una forma de hacer esto es promediar los valores RGB así: grayscale = (red + green + blue) / 3;.

En el siguiente ejemplo, estamos usando los valores RGBa en el formato (R,G,B,a) en los datos de la imagen; el canal rojo es data[0], el canal verde es data[1], y así. Luego obtenemos el nivel de luminosidad de cada uno de estos canales (el brillo) y los promediamos para convertir la imagen en escala de grises.

Demostración en vivo – HTML5 Canvas

Filtro SVG

Los filtros SVG tienen el soporte más amplio (¡incluso en Internet Explorer y Edge!) y también son (casi) tan fáciles de usar como los filtros CSS directamente. Puedes usarlos con el mismo filter propiedad. De echo, Los filtros CSS provienen de los filtros SVG. Al igual que con el lienzo, los filtros SVG le permiten trascender el plano plano de los efectos bidimensionales, ya que puede aprovechar el sombreado WebGL para crear resultados aún más complejos.

Hay algunas formas de aplicar un filtro SVG, pero en este caso seguiremos usando el filter propiedad en la imagen de fondo, al igual que el ejemplo de filtro CSS para mayor coherencia. La mayor diferencia con los filtros SVG es que debemos tener cuidado de incluir y vincular este filtro con la ruta adecuada. Esto significa que necesitamos importar el SVG en la página sobre el elemento en el que lo estamos usando (que se puede hacer más fácil usando el motor de plantillas e incluir declaraciones).

Demostración en vivo – Filtro SVG


<svg>
  <filter id="grayscale-filter">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

.svgfilter-gray {
  background: url('img/bird.jpg');
  -webkit-filter: url(#grayscale-filter);
  filter: url(#grayscale-filter);
}

Rendimiento del filtro

Entonces, ¿cómo se comparan estos cuando se trata del rendimiento de renderizado inicial? Hice una página de prueba para cada uno y usé el WebPagetest función de comparación en Chrome 47. Teniendo en cuenta que cada prueba arrojó resultados ligeramente diferentes, la tendencia general se puede resumir de la siguiente manera:

El filtro CSS, el filtro SVG y los métodos de modo de combinación CSS se cargan en períodos de tiempo relativamente similares. A veces, el filtro SVG era más rápido que el modo de fusión CSS (pero siempre apenas) y viceversa. El filtro CSS fue generalmente uno de los más rápidos de cargar, y <canvas> siempre fue el más lento. Este es el conocimiento más significativo obtenido. <canvas> regularmente se quedaba atrás de los otros métodos para renderizar la imagen.

En aras de la justicia, también quería comparar el tiempo de carga de varias imágenes. Creé diez versiones de cada uno (en lugar de solo una) y volví a ejecutar las pruebas:

Los resultados fueron similares (tenga en cuenta que hubo ligeras variaciones en cada prueba). El filtro CSS fue 0,1 ms más lento en este caso, lo que muestra que entre los filtros CSS, los modos de fusión y los filtros SVG, los resultados no son concluyentes para el método más rápido. Sin embargo, HTML5 <canvas> se retrasó notablemente en comparación.

Echando un vistazo más profundo al tiempo de carga de la página a través del procesamiento de JavaScript y el tiempo de procesamiento de pintura, puede ver que esta tendencia continúa.

(Ver versión grande)
Tipo de filtro Hora de renderizar Hora de pintar
Filtro CSS 12,94 ms 4,28 ms
Modo de fusión CSS 12,10 ms 4,45 ms
Filtro SVG 14,77 ms 5.80ms
Filtro de lienzo 15,23 ms 10,73 ms

De nuevo, <canvas> tomó más tiempo para renderizar y más tiempo para pintar, mientras que las dos opciones de CSS fueron las más rápidas, SVG en el medio.

Estos resultados tienen sentido, porque <canvas> es tomar cada píxel individual y realizar una operación en él antes de que podamos ver una imagen. Esto requiere mucha potencia de procesamiento en el tiempo de renderizado. Aunque normalmente los SVG se utilizan para gráficos vectoriales, los recomendaría encarecidamente. <canvas> cuando se trata de efectos de imagen rasterizada. SVG no solo es más rápido, sino que también mucho más fácil de manejar y más flexible dentro del DOM. Generalmente, los filtros CSS están incluso más optimizados que los filtros SVG, ya que históricamente son atajos que emergen de los filtros SVG y, por lo tanto, optimizados en los navegadores.

#sin filtro

¿Qué hay de no usar ningún filtro? Comparé nuestro método más rápido en general (agregar un filtro CSS) con la edición de su imagen en un software de edición de fotos antes de cargarla (usé Vista previa en Mac OS X para eliminar la saturación). Al preeditar la imagen, encontré una mejora constante en el rendimiento de 0,1 ms en mis pruebas:

Conclusión

Los filtros de imagen son una forma divertida y eficaz de proporcionar unidad visual y atractivo estético en la web. Tenga en cuenta que vienen con un ligero impacto en el rendimiento, pero también con los beneficios de un diseño rápido en el navegador y la oportunidad de diseñar interacciones con.

Para efectos de imagen simples, use filtros CSS, ya que tienen el soporte más amplio y el uso más simple. Para efectos de imagen más complejos, consulte los filtros SVG o los modos de fusión CSS. Los efectos de filtro SVG son particularmente agradables debido a sus capacidades de manipulación de canales y feColorMatrix. Los modos de combinación CSS también ofrecen algunos efectos visuales realmente agradables con elementos superpuestos en la página. Puede usar modos de mezcla similares dentro de SVG (como feBlend), aunque son similares a CSS background-blend-mode en el sentido de que la interacción pertenece al SVG en sí y no con elementos circundantes, como mix-blend-mode permite. Simplemente no uses <canvas> para filtros.

Deja un comentario