First Look At The CSS object-view-box Property

Re:First Look At The CSS object-view-box Property by TekMol on Sunday May 22, 2022 @02:59AM (#31465609)

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 :)

[ Parent | on HN ]

Re:First Look At The CSS object-view-box Property by genezeta on Sunday May 22, 2022 @03:28AM (#31465780)

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.

[ Parent | on HN ]

Re:First Look At The CSS object-view-box Property by bryans on Sunday May 22, 2022 @04:18AM (#31466012)

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.

[ Parent | on HN ]

Re:First Look At The CSS object-view-box Property by genezeta on Sunday May 22, 2022 @04:33AM (#31466089)

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.

[ Parent | on HN ]

Re:First Look At The CSS object-view-box Property by WalterGR on Sunday May 22, 2022 @04:19AM (#31466014)

Has it been a problem for sites that don’t have that available in their backend?

[ Parent | on HN ]

Re:First Look At The CSS object-view-box Property by ThatMedicIsASpy on Sunday May 22, 2022 @03:04AM (#31465632)

So its a 'I don't care about your traffic limit' kind of thing.

[ Parent | on HN ]

Re:First Look At The CSS object-view-box Property by hombre_fatal on Sunday May 22, 2022 @03:23AM (#31465749)

Well, let's dig into this.

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:

https://a0.muscache.com/im/pictures/prohost-api/Hosting-4850...

vs.

https://a0.muscache.com/im/pictures/prohost-api/Hosting-4850...

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.

[ Parent | on HN ]