Estilos · Materias

El efecto grano de película en un sitio web

Lo que hace el grano de película en un sitio web, cuándo añadirlo, con qué intensidad, y por qué debe quedarse quieto en vez de parpadear sobre la página.

Updated · 4 min read

El grano es un ruido muy fino colocado sobre toda la página, como el de la película fotográfica. Apenas se ve, y es a propósito: se siente más de lo que se mira. Lo que cambia es la materia de la pantalla. Los degradados dejan de parecer trazados con regla, y el vídeo, las fotos y el texto acaban bajo la misma luz.

Pizarra y cobalto que se pliegan lentamente, sin efectoSin
La misma imagen, bajo la capa GranoGrano
El cartel del fondo «Superficies líquidas», rodado por el estudio. A la derecha, la capa Grano de la biblioteca, con la intensidad que toma por defecto.

Lo que corrige el grano

Las bandas en los degradados. La mayoría de las imágenes y de las pantallas codifican cada color en 256 niveles por canal (8 bits). En un degradado lento, sobre todo en tonos oscuros, los escalones entre dos niveles vecinos se vuelven visibles: bandas donde se esperaba una transición suave. El remedio de verdad, el dithering, añade ruido al fabricar la imagen y elimina los escalones. Un grano colocado sobre una imagen terminada no los elimina: los disimula, dando al ojo una textura que le impide seguir la línea de las bandas. Muchas veces basta.

Las superficies demasiado lisas. Una imagen generada delata a menudo su origen por superficies perfectamente limpias, sin la menor irregularidad. El grano les devuelve algo de rugosidad.

Las materias que no casan. Un vídeo rodado, una foto de móvil y un título en color plano no tienen la misma textura. Bajo el mismo grano, pertenecen a la misma página.

Cuándo añadirlo

  • Sobre un fondo oscuro o un degradado: es ahí donde más se ven las bandas, y donde menos se nota el grano.
  • Sobre un vídeo rodado con luz cálida, una sala de restaurante, un taller, un obrador: el grano prolonga la imagen más allá de la primera pantalla.
  • Para un oficio que vive de lo artesanal o de la imagen: fotógrafo, tostador de café, galería, bodega.

Mejor no ponerlo cuando la página vende ante todo la nitidez, o cuando lleva mucho texto pequeño sobre fondos claros: cada mota de ruido es un punto más entre el ojo y la letra. Las reglas de accesibilidad exigen un contraste de al menos 4,5 a 1 entre el texto corriente y su fondo; sobre una textura, se comprueba en el lugar menos favorable.

La intensidad justa

En el estudio, el grano se coloca al 5 % de opacidad, en modo de fusión overlay (superponer). A esta dosis, no se ve cuando se busca, pero la página parece más plana cuando se quita. Una página que asume la película puede llevarlo más fuerte; más allá de un diez por ciento, se convierte en una postura más que en un acabado.

Una regla vale para todas las texturas: no más de dos capas a la vez. A la tercera, la imagen se ensucia, y ya nadie sabe cuál quitar.

Por qué se queda quieto

Un grano que parpadea queda creíble en un vídeo de cine. En una página web, es una causa clásica de sitio que «va a tirones» cuando no pasa nada. Un navegador solo sabe animar con poco coste la posición y la opacidad de una capa; cualquier otro cambio le obliga a repintar, y una textura a pantalla completa que cambia en cada imagen es la pantalla entera que repintar, sesenta veces por segundo. El movimiento viene de la película de debajo, nunca de la textura de encima.

La primera pantalla también se queda tranquila: la capa sube a medida que se baja. El vídeo de bienvenida es el argumento de la página, y se deja desnudo.

Y si el visitante ha pedido a su aparato que reduzca las animaciones, el grano desaparece por completo: un ruido fino, incluso quieto, puede molestar a algunas de las personas que eligen ese ajuste.

Cómo está hecho

El motivo es una pequeña imagen SVG escrita directamente en la hoja de estilos, con el filtro feTurbulence, que produce un ruido de Perlin, el que se usa para imitar nubes o mármol. No hay, por tanto, ningún archivo que descargar. La capa se coloca en posición fija sobre la página, no capta ni los clics ni el desplazamiento, y se funde en la imagen por superposición.

Poner el grano en una capa y no en el vídeo tiene otra razón: el grano, aleatorio por naturaleza, se comprime muy mal. Netflix midió que, quitándolo en la codificación y recreándolo en la reproducción, una película muy granulada pasaba de 8,3 a 2,8 megabits por segundo. En un sitio, el vídeo de fondo se queda limpio, y por tanto ligero, y el grano viene encima, dibujado por el navegador.

En el estudio

El grano es una de las diez texturas de la biblioteca, junto al viñeteado, la halación, la trama, el papel y la fuga de luz. Se elige en la etapa «La textura», después del fondo.

Fuentes

  1. Mikkel Gjøl (Playdead), Banding in Games: A Noisy Rant
  2. Netflix Technology Blog, AV1 @ Scale: Film Grain Synthesis, The Awakening (2025)
  3. web.dev, Stick to compositor-only properties and manage layer count
  4. MDN, el elemento SVG feTurbulence
  5. W3C, WCAG 2.2, criterio de conformidad 1.4.3 «Contraste (mínimo)»

Para leer también

Tu sitio, rodado para tu oficio

Describe tu actividad y la escena de tu fondo: el vídeo se rueda para ti, montas la página franja a franja y los textos se escriben dentro.

Crear mi sitio