Hero image

Forum|Forum|5 years ago
January 18, 2021
2 replies
2134 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.

Nancy OShea

Community Expert

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

B

beng2000Author

Known Participant

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

Jon Fritz

Community Expert

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.