Image responsiveness on a website

Question

User-1204637165 posted

Dear All,

I am building a website builder framework like wix.com or wordpress. So right now I have created Db structure for pages. But I am having a problem with images. how to create size set for different screen size so when the user uploads an image. I can break down the images into different sizes. 

Firstly I need advice on the various size (I mean dimension ) set that I need to put into consideration. also the weight of the images.

I know that this html tag is going to be useful <img srcset="">

Thanks alot.

Answer 1

User-474980206 posted

there are no fixed screen widths. but just like bootstrap you can pick a fixed set of breakpoints, and remap the image to these sizes using the image library of your choice. alternately your user could pick these sizes on image upload. 

Answer 2

User-893317190 posted

Hi InspiredJide,

If you want responsive images, you could consider picture tag.

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

It will choose the most  consistent image according to the media property of source element.

If no one is selected, the img element will be chosen.

For more information, you could refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Best regards,

Ackerly Xu