The New CSS Image Function
Future of CSS
Digging in the w3c specs can reveal many exciting features. Although some of them don’t have browser support yet, we can at least learn what new features we can expect soon.
One of the new features is the new image() function. This new function will give us more control over image loading in CSS. Let’s dive into the powers of the brand-new image function.
Cropping Images
The first thing that the image function enables us to do is to load only part of an image. This means that you can crop and load a part of an image via CSS.
To do that, the image function takes an image URL and 4 other parameters: start X position, start Y position, width, and height.
background-image: image('myimage.webp#xywh=338,324,360,390');
It’s a neat function that mimics the old sprite way of working with images, a method which more senior web developers had known and used in the past when it was more popular.
The Image Types Method
The second thing that the image function enables us to do is to load different types of images depending on browser support. For example: .webp image files work in Edge/Firefox/Chrome, but don't work in Safari.
In this case, the image() function takes an array of images of different types. The browser will go through the array in the order in which the image types are written in it, and use the first image type it supports.
.help::before {
content: image("try.avif", "try.webp", "try.jpg");
}Unfortunately, for the time being, the new image function has zero support. You can find more info on is on the Image function page at Mozilla.
Final Words
That’s all.
I hope you’ve enjoyed this article.
If you like this post, I would appreciate applause and sharing :-)
I create lots of content about CSS. Be sure to follow me via Twitter and Medium.
You can also access all of my content on my website: eladsc.com.
More of my CSS posts:
Complete Guide to Responsive Images!
The New Responsive Design Evolution
Who Am I?
I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture.
