Revisions to Convert an image to grayscale in HTML/CSS

edited body

edited Feb 13, 2014 at 6:03

2.6k
22
24

For Firefox you don't need to create a filter.svg file, you can use data URI scheme.

Taking up the css code of the first answer gives:

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: gray; /* IE6+ */ 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+ */

Take care to replace "utf-8" string by your file encoding.

This method should be faster than the other because the browser will not need to do a second HTTP request.

For Firefox you don't need to create a filter.svg file, you can use data URI scheme.

Taking up the css code of the first answer gives:

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: gray; /* IE6+ */ filter: grayscale(100%); /* Current draft standard */ -webkit-filter: grayscale(100%); /* New WebKit */ -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);

Take care to replace "utf-8" string by your file encoding.

This method should be faster than the other because the browser will not need to do a second HTTP request.

For Firefox you don't need to create a filter.svg file, you can use data URI scheme.

Taking up the css code of the first answer gives:

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+ */

Take care to replace "utf-8" string by your file encoding.

This method should be faster than the other because the browser will not need to do a second HTTP request.

Edited with code tags

Source Link

edit approved Oct 31, 2013 at 10:33

Joran Den Houting

3.2k
4
24
51

For Firefox you don't need to create a filter.svg file, you can use data URI scheme.

Taking up the css code of the first answer gives:

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: gray; /* IE6+ */ 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: 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: gray; /* IE6+ */ filter: grayscale(100%); /* Current draft standard */ -webkit-filter: grayscale(100%); /* New WebKit */ -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);

Take care to replace "utf-8" string by your file encoding.

This method should be faster than the other because the browser will not need to do a second HTTP request.

For Firefox you don't need to create a filter.svg file, you can use data URI scheme.

Taking up the css code of the first answer gives:

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: gray; /* IE6+ */ filter: grayscale(100%); /* Current draft standard */ -webkit-filter: grayscale(100%); /* New WebKit */ -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);

Take care to replace "utf-8" string by your file encoding.

This method should be faster than the other because the browser will not need to do a second HTTP request.

For Firefox you don't need to create a filter.svg file, you can use data URI scheme.

Taking up the css code of the first answer gives:

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: gray; /* IE6+ */ filter: grayscale(100%); /* Current draft standard */ -webkit-filter: grayscale(100%); /* New WebKit */ -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);

Take care to replace "utf-8" string by your file encoding.

This method should be faster than the other because the browser will not need to do a second HTTP request.

added 150 characters in body

Source Link

edited Apr 14, 2013 at 16:26

mquandalle

2.6k
22
24

For Firefox you don't need to create a filter.svg file, you can use data URI scheme.

Taking up the css code of the first answer gives:

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: gray; /* IE6+ */ filter: grayscale(100%); /* Current draft standard */ -webkit-filter: grayscale(1100%); /* GoogleNew ChromeWebKit &*/ -moz-filter: Safarigrayscale(100%); -ms-filter: 6+grayscale(100%); */ -o-filter: grayscale(100%);

Take care to replace "utf-8" string by your file encoding.

This method should be faster than the other because the browser will not need to do a second HTTP request.

For Firefox you don't need to create a filter.svg file, you can use data URI scheme.

Taking up the css code of the first answer gives:

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: gray; /* IE6+ */ -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */

Take care to replace "utf-8" string by your file encoding.

This method should be faster than the other because the browser will not need to do a second HTTP request.

For Firefox you don't need to create a filter.svg file, you can use data URI scheme.

Taking up the css code of the first answer gives:

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: gray; /* IE6+ */ filter: grayscale(100%); /* Current draft standard */ -webkit-filter: grayscale(100%); /* New WebKit */ -moz-filter: grayscale(100%); -ms-filter: grayscale(100%);  -o-filter: grayscale(100%);

Take care to replace "utf-8" string by your file encoding.

This method should be faster than the other because the browser will not need to do a second HTTP request.