Skip to main content
Known Participant
January 18, 2021
Answered

Hero image

  • January 18, 2021
  • 2 replies
  • 2132 views

Does anyone have some tips on sizing a hero image that spans 100%, is not too heavy and works well on mobile? Thanks in advance for any tips.

 

    This topic has been closed for replies.
    Correct answer osgood_

    IE 10 and 11 will default to use the src image, so l wouldnt worry too much about IE, its dead browser.

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    January 18, 2021

    img {width: 100%}

     

    NOTE:  Upscaling a small raster image will cause distortion. And a large image will be too much bandwidth for limited data plans.  Ideally, you should have 3-4 different sized, cropped images to fit different devices. 

     

    Nancy O'Shea— Product User & Community Expert
    beng2000Author
    Known Participant
    January 21, 2021

    Hi Nancy.  Yes, I am working on the different sizes.  Thanks for your help.

    Jon Fritz
    Community Expert
    Community Expert
    January 18, 2021

    Since very few images scale down gracefully from a 27" 16:9 ratio (desktop) to a 5" 9:16 ratio (portrait orientation cell phone), use the <picture> element instead of an <img> tag. You can serve an image that has been cropped both for size and orientation of mobile devices to phones and tablets, and a then different larger image for desktops, all within the same html.

     

    Here's a very good explanation of how (and why) to use the <picture> tag:

    https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/


    Admittedly, it's a little extra reading (and a bit daunting at first), but you really should know how to do this, even though there's no version of DW that does.

    beng2000Author
    Known Participant
    January 21, 2021

    Thank you Jon.  I'm working on it now.