Thread by @Prathkum

Do you have images on your webpage / website? You probably have.

Here are 5 cool things related to images on webpage, that I think you are not familiar with

🧵👇🏻

1️⃣ Set image scaling algorithm of user agent

The `image-rendering` CSS property sets an image scaling algorithm
When you specifies dimensions of image other than its natural size then the image will be up/downscaled by user agent using the algorithm specified by image-rendering

For example: "crisp-edges"

The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process.

Check the output image carefully

You can pass five other values in "image-rendering" property, there are

- auto
- smooth
- high-quality
- crisp-edges
- pixelated

🔗developer.mozilla.org/en-US/docs/Web…

2️⃣ Tell how the browser should load the image

The "loading" attribute. Although its still in experiment but its a good thing to know.

It accepts two values, `eager` and `lazy`..... ⏬

eager: Loads the image immediately, regardless of whether or not the image is currently within the visible viewport.

lazy: Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser.

3️⃣ Shadow in non background images

The box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

4️⃣ Edit images using filter functions

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Using filter funtions you can apply blur, adjust brightness, change contrast, hue roatate and other amazing stuff. Definitely try it out

🔗 codepen.io/prathkum/pen/G…

5️⃣ Blend mode

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

You can use mix-blend-mode with your images as well. It accepts following values

- normal
- multiply
- screen
- overlay
- darrken
- lighten
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity