Convertir una imagen a escala de grises en HTML / CSS


619

¿Hay una manera simple de mostrar un mapa de bits de color en escala de grises con solo HTML/CSS?

No necesita ser compatible con IE (e imagino que no lo será); si funciona en FF3 y / o Sf3, eso es lo suficientemente bueno para mí.

Sé que puedo hacerlo con ambos SVGy Canvas, pero eso parece mucho trabajo en este momento.

¿Hay una manera realmente perezosa de hacer esto?


14
"No necesita ser compatible con IE (e imagino que no lo será)" ?? IE proporciona un conjunto de filtros DX desde 1997 (IE4) que hace este trabajo con solo CSS y mucho más. Ahora han eliminado los filtros DX en IE10 y siguen estrictamente los filtros basados ​​en SVG estándar. Es posible que desee ver esto y esta demostración .
cuervo vulcano

8
@vulcanraven No es realmente 'simple CSS': si deshabilita las secuencias de comandos activas en IE, los filtros dejan de funcionar.
robertc

3
@robertc, eso es correcto. Por el contrario, si deshabilita javascript en cualquier navegador, casi todos los RIA, incluido Stackoverflow, dejarán de funcionar (a menos que el desarrollador web haya implementado el respaldo de la versión solo HTML).
Cuervo vulcano

2
Simplemente use CSS stackoverflow.com/questions/286275/gray-out-image-with-css/… Obtenga mi respuesta en esta pregunta
Sakata Gintoki

Respuestas:


728

El soporte para filtros CSS ha aterrizado en Webkit. Entonces ahora tenemos una solución de navegador cruzado.

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}
<img src="http://lorempixel.com/400/200/">


¿Qué pasa con Internet Explorer 10?

Puedes usar un polyfill como el gris .


1
Los filtros CSS @CamiloMartin solo son compatibles con Chrome 18+
Salman von Abbas

2
Actualización: la última versión estable de Google Chrome (19) ahora admite filtros CSS. ¡Hurra! =)
Salman von Abbas

66
¿Hay alguna solución para Opera?
Rustam

23
Entonces, ¿cuál es la solución para IE10?
Tom Auger

2
Para la posteridad: @TomAuger, este Q&A tiene instrucciones específicas para IE10.
Barney

127

Siguiendo la respuesta de brillout.com , y también la respuesta de Roman Nurik , y relajando un poco el requisito de 'no SVG', puede desaturar imágenes en Firefox usando solo un solo archivo SVG y algo de CSS.

Su archivo SVG se verá así:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

Guarde eso como resources.svg, se puede reutilizar de ahora en adelante para cualquier imagen que desee cambiar a escala de grises.

En su CSS, hace referencia al filtro utilizando la filterpropiedad específica de Firefox :

.target {
    filter: url(resources.svg#desaturate);
}

Agregue los propietarios de MS también si lo desea, aplique esa clase a cualquier imagen que desee convertir a escala de grises (funciona en Firefox> 3.5, IE8) .

editar : Aquí hay una buena publicación de blog que describe el uso de la nueva filterpropiedad CSS3 en la respuesta de SalmanPK en concierto con el enfoque SVG descrito aquí. Usando ese enfoque terminarías con algo como:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

Más información de soporte del navegador aquí .


66
En webkit haces esto: -webkit-filter: grayscale(100%);luego esto: -webkit-filter: grayscale(0);para eliminarlo.
SeanJA

@SeanJA Gracias por la actualización, WebKit comenzó a implementar estas cosas en diciembre
robertc

Lo veo en Chrome Beta tanto en mi computadora portátil Linux como en mi máquina win7. No parecía funcionar en Chrome Stable en Linux (pero, de nuevo, es posible que la versión de Linux esté detrás de Windows).
SeanJA

1
Este método funciona bien para mí en Chrome, pero no tiene ningún efecto en Safari. En FF, hace que mis imágenes sean invisibles hasta que se cierne.
colmtuite

85

Para Firefox no necesita crear un archivo filter.svg, puede usar el esquema de URI de datos .

Tomar el código CSS de la primera respuesta da:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

Tenga cuidado de reemplazar la cadena "utf-8" por la codificación de su archivo.

Este método debería ser más rápido que el otro porque el navegador no necesitará hacer una segunda solicitud HTTP.


3
Solo una nota para ahorrar dolores de cabeza: YUI Compressor elimina espacios en las URL de datos. Por lo tanto, puede considerar usar otro minificador si desea usar esta solución.
Malte

66
@Malte ¿O tal vez simplemente reemplace espacios por una cadena "% 20"?
mquandalle

@mquandalle desafortunadamente IE10 no admite filtro: blogs.msdn.com/b/ie/archive/2011/12/07/…
Jedi.za

1
En firefox mi gris es muy claro. ¿Hay alguna forma de aumentar el contraste u oscurecerlo ligeramente? Otros navegadores se ven geniales.
square_eyes

27

Actualización: hice esto en un repositorio completo de GitHub, incluido el polyfill de JavaScript para IE10 e IE11: https://github.com/karlhorky/gray

Originalmente usé la respuesta de SalmanPK , pero luego creé la variación a continuación para eliminar la solicitud HTTP adicional requerida para el archivo SVG. El SVG en línea funciona en las versiones 10 y superiores de Firefox, y las versiones inferiores a la 10 ya no representan ni siquiera el 1% del mercado global de navegadores.

Desde entonces, he mantenido la solución actualizada en esta publicación de blog , agregando soporte para volver a desaparecer el color, soporte de IE 10/11 con SVG y escala de grises parcial en la demostración.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}


11

Acabo de tener el mismo problema hoy. Inicialmente utilicé la solución SalmanPK, pero descubrí que el efecto difiere entre FF y otros navegadores. Esto se debe a que la matriz de conversión funciona solo en la luminosidad, no en la luminosidad como los filtros en Chrome / IE. Para mi sorpresa, descubrí que la solución alternativa y más simple en SVG también funciona en FF4 + y produce mejores resultados:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

Con css:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

Una advertencia más es que IE10 ya no es compatible con "filter: gray:" en modo compatible con los estándares, por lo que necesita cambiar el modo de compatibilidad en los encabezados para funcionar:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

2
Parece una solución mejor y más simple: sería bueno si SalmanPK y mquandalle actualizaran sus soluciones a esto. Al parecer, la matriz que utilizan se rompe <br> Aquí está la versión de datos incrustado: filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
psdie

11

La forma más sencilla de lograr escala de grises con CSS exclusivamente es a través de la filterpropiedad.

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

La propiedad aún no es totalmente compatible y aún requiere la -webkit-filterpropiedad para soporte en todos los navegadores.


7

No parece que sea posible (todavía), incluso con CSS3 o propiedades propietarias -webkit-o -moz-CSS.

Sin embargo, encontré esta publicación del pasado junio que usaba filtros SVG en HTML. No está disponible en ningún navegador actual (la demostración insinuó una compilación de WebKit personalizada), pero es muy impresionante como prueba de concepto.


7

Para las personas que preguntan sobre el soporte ignorado de IE10 + en otras respuestas, consulte esta pieza de CSS:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

Aplicado en este marcado:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

Para obtener más demostraciones, consulte la sección de gráficos CSS3 de IE testdrive y este antiguo blog de IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx


7

En Internet Explorer, use la propiedad de filtro.

En webkit y Firefox actualmente no hay forma de desatuarte una imagen únicamente con CSS. por lo tanto, deberá usar lienzo o SVG para una solución del lado del cliente.

Pero creo que usar SVG es más elegante. mira mi publicación de blog para la solución SVG que funciona tanto para Firefox como para webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

Y estrictamente hablando, ya que SVG es HTML, la solución es puramente html + css :-)


hola genial Me di cuenta de que su escala de grises en realidad falla en el safari. Cualquier seguimiento? Gracias
cisne

1
SVG no es HTML. Es una especificación completamente diferente.
Camilo Martin


1
@robertc Ese enlace se trata de poner un SVG en un HTML, pero aquí está la especificación SVG y aquí está la especificación HTML . El hecho de que ambos sean similares entre sí (o XML) no significa que sean lo mismo ...
Camilo Martin

1
Pero se vincula a la especificación SVG en la referencia ... No define SVG, solo dice que los navegadores deberían analizarlo. Es como Javascript o CSS en ese sentido.
Camilo Martin el

6

Una nueva forma de hacerlo ha estado disponible desde hace algún tiempo en los navegadores modernos.

background-blend-mode le permite obtener algunos efectos interesantes, y uno de ellos es la conversión en escala de grises

El valor de luminosidad , establecido sobre un fondo blanco, lo permite. (pase el cursor para verlo en gris)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}
<div class="test"></div>

La luminosidad se toma de la imagen, el color se toma del fondo. Como siempre es blanco, no hay color.

Pero permite mucho más.

Puede animar el efecto configurando 3 capas. La primera será la imagen, y la segunda será un degradado blanco-negro. Si aplica un modo de mezcla múltiple en esto, obtendrá un resultado blanco como antes en la parte blanca, pero la imagen original en la parte negra (multiplicar por blanco da blanco, multiplicar por negro no tiene efecto).

En la parte blanca del gradiente, obtienes el mismo efecto que antes. En la parte negra del gradiente, está mezclando la imagen sobre sí misma, y ​​el resultado es la imagen no modificada.

Ahora, todo lo que se necesita es mover el gradiente para obtener este efecto dinámico: (pase el mouse para verlo en color)

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}
<div class="test"></div>

referencia

matriz de compatibilidad


1
@Andy Comencé mi respuesta diciendo en los navegadores modernos
vals el

¿Cómo puede aplicar eso si no imgse usa una etiqueta para la imagen?background: url()
Mohammad Elbanna

1
@MohammadElbanna Debe usar el modo de combinación de mezcla en lugar del modo de combinación de fondo
vals

5
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

4

Quizás de esta manera te ayude

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org


3

De hecho, es más fácil hacerlo con IE si recuerdo haber usado correctamente una propiedad CSS propietaria. Pruebe esto FILTER: Graydesde http://www.ssi-developer.net/css/visual-filters.shtml

El método de Ax simplemente hace que la imagen sea transparente y tiene un fondo negro detrás. Estoy seguro de que podría argumentar que esto es en escala de grises.

Aunque no quería usar Javascript, creo que tendrá que usarlo. También podría usar un lenguaje del lado del servidor para hacerlo.


Ni siquiera tengo una caja de Windows, así que gracias, pero eso es de poca utilidad para mí.
Ken

En ese caso, puede verlo con una máquina virtual con IE, implementar el método de ax o usar lienzo ... tenga en cuenta que la escala de grises en imágenes grandes con lienzo puede ser bastante exigente para el motor Javascript.
alex

77
filter: grayestá presente en Internet Explorer desde la Versión 4 . Han tomado mucha basura por su producto, ¡con razón! - pero estaban realmente adelantados a su tiempo con estas cosas
Pekka


2

El soporte para filtros CSS nativos en webkit se ha agregado desde la versión actual 19.0.1084.46

entonces -webkit-filter: escala de grises (1) funcionará y es más fácil que el enfoque SVG para webkit ...


2

Aquí hay un mixin para MENOS que le permitirá elegir cualquier opacidad. Complete las variables usted mismo para CSS simple en diferentes porcentajes.

Sugerencia clara aquí , utiliza el tipo de saturación para la matriz, por lo que no necesita hacer nada elegante para cambiar el porcentaje.

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

Entonces úsalo:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}

2

No necesita usar tantos prefijos para un uso completo, porque si elige el prefijo para el viejo Firefox, no necesita usar el prefijo para el nuevo Firefox.

Entonces, para un uso completo, use este código:

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}

2

Como complemento a las respuestas de otros, es posible desaturar una imagen hasta la mitad en FF sin los dolores de cabeza de la matriz de SVG :

<feColorMatrix type="saturate" values="$v" />

Dónde $vestá entre 0y 1. Es equivalente a filter:grayscale(50%);.

Ejemplo en vivo:

Referencia sobre MDN


1

Basado en la respuesta de robertc :

Para obtener la conversión adecuada de una imagen en color a una imagen en escala de grises en lugar de usar una matriz como esta:

0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0      0      0      1 0

Debería usar una matriz de conversión como esta:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

Esto debería funcionar bien para todos los tipos de imágenes basadas en el modelo RGBA (rojo-verde-azul-alfa).

Para obtener más información sobre por qué debería usar la matriz, publiqué más probabilidades de que el único control de Robertbert siga los siguientes enlaces:


Estoy de acuerdo en que 0.3333 está mal; 0.2126 0.7152 0.0722 0 0parece ser el equivalente de<fecolormatrix type="saturate" values="0">
Neil

El enlace a "Y aquí puede encontrar algunos códigos C # y VB" se puede encontrar en el archivo de Internet aquí: web.archive.org/web/20110220101001/http://www.bobpowell.net/…
thisgeek

El enlace a "Las señales de luminancia y diferencia de color" también está roto. No pude encontrar un reemplazo.
thisgeek

0

Una solución terrible pero factible: renderiza la imagen usando un objeto Flash, que luego te brinda todas las transformaciones posibles en Flash.

Si sus usuarios usan navegadores de última generación y si Firefox 3.5 y Safari 4 lo admiten (no sé si lo hacen / lo harán), puede ajustar el atributo de perfil de color CSS de la imagen, configurándolo en una ICC en escala de grises URL del perfil. ¡Pero eso es mucho si!


0

ser una alternativa para el navegador más antiguo podría ser la máscara de uso producido por los pseudo-elementos o etiquetas en línea.

El posicionamiento absoluto al pasar el mouse sobre un img (o área de texto que no necesita clic ni selección) puede imitar de cerca los efectos de la escala de color, a través de rgba () o translucide png .

No dará una sola escala de color, pero sombreará el color fuera de rango.

prueba en lápiz de código con 10 colores diferentes a través de pseudo-elemento, el último es gris. http://codepen.io/gcyrillus/pen/nqpDd (vuelva a cargar para cambiar a otra imagen)



0

Prueba este plugin jquery. Sin embargo, esta no es una solución HTML y CSS pura, pero es una forma perezosa de lograr lo que desea. Puede personalizar su escala de grises para que se adapte mejor a su uso. Úselo de la siguiente manera:

$("#myImageID").tancolor();

Hay una demostración interactiva . Puedes jugar con eso.

Consulte la documentación sobre el uso, es bastante simple. docs


0

Para la escala de grises como porcentaje en Firefox, use el filtro de saturación en su lugar: (busque 'saturar')

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"

-1

Si usted u otra persona que enfrenta un problema similar en el futuro están abiertos a PHP. (Sé que dijiste HTML / CSS, pero tal vez ya estás usando PHP en el backend) Aquí hay una solución PHP:

Lo obtuve de la biblioteca PHP GD y agregué algunas variables para automatizar el proceso ...

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>

44
@Tom, según los votos y favoritos de la pregunta original, el OP no es la única persona que se preguntó si esto es posible. Claro, esta respuesta puede doblar las reglas, pero no veo el punto de rechazar una respuesta que podría ser útil para mucha gente.
Michael Martin-Smucker

1
@Tom, aunque pensé que podría no ser una respuesta exacta a la pregunta, podría ser útil ya que en realidad "resuelve" el problema de la escala de grises sin la "molestia" de JavaScript, tal vez ni siquiera consideró o sabía sobre PHP GD, ningún daño previsto. @ mlms13 ese fue exactamente el punto, gracias :)
Trufa

Ese es mi mal "pensamiento" acerca de que otros usuarios pueden beneficiarse de esta publicación que se me escapó de la mente. Disculpas @Trufa.
sacudida

3
Eso me ayudó, me puso en el camino correcto después de algunos otros callejones sin salida. Encontré eso usando "imagefilter ($ source, IMG_FILTER_GRAYSCALE);" Sin embargo, dio un resultado mucho mejor. (Solo PHP 5)
chrismacp

55
Votado, ya que está prácticamente fuera de tema. La escala de grises de una imagen en el lado del servidor es completamente diferente de CSS / HTML.
Simon Steinberger
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.