Hi, I have a question regarding product picture sizing, so I'm hoping to make all of the product image the same size (a 3:4 ratio), now me and my colleague have different idea on who's side should deal with this different product image size issue, they wanted it to be simple, so it should be dealt at the front-end instead of the back-end side of our web. Could anyone give me the pros and cons of choosing either side, or is there a definitive answer in choosing which side should this task be handled along with the reasoning behind it? Thanks in advance! 🙏
#Image sizing, front-end or back-end?
tough harbor
marble atlas
It is generally best to handle this stuff in the back-end, so you're only sending data to the front-end that is actually used. E.g. if you send a full imagine from the back-end to the front, and then 'cut down' a part with CSS, that means you have transfered data that is not being used.
Same reason you should be generating thumbnails of images in the back-end, and saving those as separate images, so you can show actual thumbnails for your thumbnails, rather than resizing big images to display small in the front-end.
tough harbor
It is generally best to handle this stuff in the back-end, so you're only sendin...
All right, Much obliged Arko. 🎩👌
pale oak
Yeah like Arko mentioned, best to do these things on the server. This can be done ahead of time (more setup, but costs less processing resources) or on-the-fly (costs more processing resources)
Generally you'd even add srcsets (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) so the browser takes into account which image should be loaded, loading a lower-res version on smaller screens. Which benefits data transfers and loading speeds