The New CSS Image Function

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.

Image for post
Image for post

One of the new features is the new 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');
Image for post
Image for post

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: image files work in Edge/Firefox/Chrome, but don't work in Safari.

In this case, the 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.

Image for post
Image for post
(Me talking at ConFrontJS 2019, Warsaw, Poland)

CSS & HTML Expert

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store