2

Trying to darken an image using html.

I've found the fix where you use the css 'background-image; and 'linear-gradient', however I wanted to know if there was a way to do this on the 'img' tag in html. If not, then should I convert all of those images to background-images? What are the pros/cons of using html img vs css background-image?

Adam
  • 71
  • 10

5 Answers5

4

Use filter:

.darken {
  filter: brightness(0.4);
}
<img src="https://picsum.photos/id/1/200/300">

<img src="https://picsum.photos/id/1/200/300" class="darken">

<img src="https://picsum.photos/id/1/200/300" style="filter: brightness(0.2);">
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1

I don't think there is a way to darken an image in html without using CSS.

From my experience the difference between html <img> tag and css background-image is in the semantic value of the first.

To clarify: use the <img> tag when your image is part of the content so the image will be better indexed by search engines. Use css background-image instead when your image is part of the interface or a decoration. Web browsers could also hide background images in some occasions for example Safari reader mode.

Gusepo
  • 837
  • 2
  • 13
  • 26
1

If you absolutely cannot use any CSS, you can place the image in an SVG element with a filter. In this example, I'm using a Color Matrix filter to achieve 20% brightness.

<svg>
  <filter id="darken">
    <feColorMatrix 
      type="matrix"
      in="SourceGraphic"
      values="0.2 0 0 0 0
              0 0.2 0 0 0
              0 0 0.2 0 0
              0 0 0 1 0" />
  </filter>
  <image filter="url(#darken)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Vista_de_Baku%2C_Azerbaiy%C3%A1n%2C_2016-09-26%2C_DD_138.jpg/800px-Vista_de_Baku%2C_Azerbaiy%C3%A1n%2C_2016-09-26%2C_DD_138.jpg" />
</svg>
Chris
  • 26
  • 3
0

There is no attribute on the HTML img tag to darken an image.

https://www.w3schools.com/tags/tag_img.asp

If you're thinking of the style tag, that's inline CSS, so you aren't really doing anything differently.

Using CSS, you can actually control how your image is darkened, rather than just assuming the browser is going to do it correctly for you. What it looks like in one browser isn't likely to be the same in another. It might be, but that's probably just coincidence, and you can't rely on that for future compatibility.

computercarguy
  • 2,173
  • 1
  • 13
  • 27
0

If I'm not mistaken, you can not change the color property of anything using pure html, and I do not see why someone would want to do that when CSS is compatible pretty much everywhere.

  • You should use the <img> when your image is part of the content. Don't forget the alt text if this image is important.

  • You should use background-image if your image is not part of the content, or you do not want your image to be displayed when the user prints it by default.

For more info, I refer you to this SO question : When to use IMG vs. CSS background-image?

Now, to darken your image, you can do something like: 

img {
  filter: brightness(50%);
}
Yolan Maldonado
  • 23
  • 5