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.

Image for post
Image for post

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

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

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

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)

Written by

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