Some CMSs (ProcessWire) have an option to set a focus point on an image. This is very useful for responsive designs where images are cropped. With a focus point you can keep the important part of the image in view.
So a pro tip for all CMS developers: make it possible for the user (or automate it with AI) to mark the important point of an image so it can be used in the object-view-box property.
Although cool, it kind of ignores the responsive design-ness of modern websites if I’ve understood the implementation correctly?
Everything seems based off knowing the exact size of the original and the new container, so if the proportions of the container change, so will the clipping?
Could probably fix with a lot of breakpoints and the like, but it feels like it would be better generating a cropped version of the image beforehand instead of using this.
You typically don’t have a lot of breakpoints for image sizes. Maybe 2-4 is typical.
But yes, since you already know the possible proportions and sizes you want to resize/crop/scale etc. on the server, and deliver the correct image via a picture element. The browser then fetches exactly what it needs.
This css property is however useful if you want something more dynamic and you don’t know or don’t care to know beforehand how the image will be cropped.
On one hand, this is something easily done with a parent div, some positioning, and overflow hidden. Probably not worth adding to the spec for such a specific use case.
On the other hand, I do like that this unifies the functionality of svgs and other html elements more. We’ve been seeing svg-like additions to css for a while now, and they’ve been welcome.
Overall I suppose I’m happy for more consistency even if I won’t be using this except in niche cases.
What you’re describing is one of the possible workarounds, yes. Veterans have become accustomed to doing these things over the years.
But generally speaking I think that this kind of feature is very useful. It conveys intent, so browsers can optimise things if they choose, and developers get to have cleaner code for free.
Secondly there’s plenty of devs and future devs out there who appreciate that there’s a clear way to do this. Workarounds always have caveats and don’t necessarily play nicely with other features.
I can't help but feel that there's some redundancy between this and CSS transformations. This is basically some kind of affine transformation of the contents of an element with additionally clipping everything that falls outside of the original screen extent of that element. This shouldn't even need an additional element. Such a thing wasn't previously possible? I'm no HTML/CSS expert but I'd be disappointed if it weren't, seeing as clipping your drawing by a shape (commonly rectangular) has been a big thing in graphical programming for quite some time.
Can someone here help me find a proper use case for this?
I mean, one beyond "I want to do everything in CSS and I don't care if I waste bandwidth and energy resources, let's crop this image a million times in every browser just because we can".
Go to AirBnB. On the homepage you will see a bunch of premises.
Right click "Open image in a new tab".
Boom, you see the full image. On the home page, you only saw a cutout of the image.
Now imagine going to AirBnB and changing their workflow so that the server sends the right cutout. It would be a nightmare.
As it is, a frontend guy can change the cutout, do a/b tests with different cutouts, change the cutout dynamically based on window size, change the cutout when the image is displayed on different pages etc etc.
Try to set all of that up by talking to the frontend guys and the backend guys and try to get to a situation so that the frontend talks to the backend in a fashion that the frontend guys can easily do what they do now and the backend responds with the right images. Good luck :)
I know of at least one similar site where all that is achieved dynamically in the server. Images can be rotated, cropped, and resized dynamically. Common cuts can be made, cuts are cached, and making a new cut is done on the fly without noticeable delay by passing different parameter values.
This has been working now for about 6 years. It has never been a problem for the frontend team in any way.
That method is adding server, client and network load by delivering multiple versions of the same image, whereas a cached version on the front end can be freely re-used and manipulated as needed based on the specifics of the device and browser. It's not a matter of being a problem for the front end team. It's a problem for devops and the end user.
It hasn't been a problem for the backend or devop teams either.
The network load is... probably not something you, or me, can so offhandedly talk about here without the actual data. It depends a lot on which images are most used. I do know that they did in fact reduce a lot of bandwidth by serving pre-sized thumbnails instead of larger images. Typically there's only a few -3, 4- different sizes that matter; these can be -and are- cached by the browser. In this case, most visitors seemed to never need the full-size format, so that's a lot of saved bandwidth.
Serving N images all cropped slightly differently isn't going to save bandwidth over serving an image one time, caching it, and then doing slightly different cropping in the browser.
Airbnb's homepage images only seem to be 50-90KB per image. And they already do some image resizing:
If you compare the slightly cropped homepage images to their uncropped versions, you just aren't saving a bunch of bandwidth by serving static crops, especially since you need new crops once the user clicks in to property pages.
Finally, images (1.3MB) only account for 10% of airbnb's homepage transfer in desktop Chrome (13MB total) and 2% in desktop Safari (60MB total... content blocker bug?). Images seem to be the least of their worries.
So a pro tip for all CMS developers: make it possible for the user (or automate it with AI) to mark the important point of an image so it can be used in the object-view-box property.