locked
Image responsiveness on a website RRS feed

  • 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.

    Monday, December 24, 2018 12:41 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 25, 2018 4:10 AM

All replies

  • 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. 

    Monday, December 24, 2018 6:04 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 25, 2018 4:10 AM