1

I have an image on my web page like this:

<img src="/Images/content/home.png" alt="" style="float: left;">

Is there a CSS property that I can use to take some of the color out of this image without having to go into photoshop and edit the image. Even better are there any applications online that I can use to "process" the image and remove some color?

arttronics
  • 9,907
  • 2
  • 24
  • 59
Alan2
  • 19,668
  • 67
  • 204
  • 365
  • Nope, you can't desaturate an image using only CSS. But if you want you can use SVG, check this answer: http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css Or by "take out color" you mean "lower opacity" ? – XCS Jul 01 '12 at 12:02
  • 2
    @Cristy actually, desaturating an image is possible thanks to CSS filters. Unfortunately, browser support for this feature is not yet common. http://html5-demos.appspot.com/static/css/filters/index.html – toniedzwiedz Jul 01 '12 at 12:07

4 Answers4

2

A great jQuery plugin named vintageJS can convert images to grayscale and requires no server-side processing... it's all done in the viewers browser.

Effects available for Firefox, Chrome and other browsers are grayscale, blur-edges, sepia, desaturate, noise, brightness, contrast, curves, and more. Also, multi-effects can be done!

In reference to online apps that allow for image manipulation and then saving the image, the vintageJS Plugin has this cool Playground Webpage that allows you to upload any image, customize different effect on the fly, and download your edited image!

enter image description here

arttronics
  • 9,907
  • 2
  • 24
  • 59
1

If you want to edit your images, there are excellent web apps for this purpose

CSS3/Webkit filters are what you are looking for. But as of now, these only work with Chrome Canary and Webkit Nightly. Effects available are grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, and invert.

Resources: CSS3 Filters

Instead, you could just set the opacity.

img {  
    opacity: .7;  
    //above line works in Firefox, Safari, Chrome, Opera
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
    // above line works in IE6, IE7, and IE8  
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";  
    // above line is IE8 only
}
abhshkdz
  • 6,065
  • 19
  • 29
1

Even better are there any applications online that I can use to "process" the image and remove some color?

Hi Gemma,

You mentioned that you use Photoshop, but don't want to open it up in order to do this. If grayscaling images is something you'll have to do often, you should look into creating a Photoshop 'Droplet' for this. Basically, it lets you create a desktop shortcut that you can drag a file (or folder of files to) & it will carry out whatever task you've set up to automate within it, e.g.

  1. Open file
  2. Convert to b/w
  3. Save as [filename]-bw.jpg at 80% quality
  4. Close file

Here's a link to Adobe's docs on creating a droplet from an action to automate batch processing. Another option could be ImageMagick for batch processing images.

anotherdave
  • 6,670
  • 4
  • 31
  • 62
0

Try setting opacity of image.

example:

img
{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
manuskc
  • 774
  • 4
  • 14