Hero image

[Hydraxuz]

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.

[Jon Fritz · Accepted solution]

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.

[Hydraxuz]

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

[Hydraxuz]

Hi Jon.  It looks like picture and srcset don't work in IE.  Is there a work around for IE?  Thanks.

[osgood_ · Accepted solution]

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

[Hydraxuz]

Thank you Osgood.  I appreciate your help.

[Hydraxuz]

Dear Osgood. I am doing a LinkedIn Learning tutorial on responsive images that was created in 2015. My question to you is do we still have to use a polyfill like Picturefill? I wouldn't think so now but I wanted your input. Thanks.

[osgood_]

No, srcset, if that is what you are referring to, which delivers the correct sized image to various devices, has 96% global browser support. 

Not sure why you are following a tutorial from 2015. I would advice not to follow anything if its older than a couple of years. Techniques and browser support moves rapidly.

[Hydraxuz]

I agree about the tutorial's age.  My issue is that I need to start different aspects of web design at an elementary level. I did find a tutorial on Images and Figures with a section on responsive images done in 2018.  I go over that too.  I like to use the exercise files and work along with the instructor.

As always, thank you for your help.

[Nancy OShea]

"My issue is that I need to start different aspects of web design at an elementary level"

=============

@Hydraxuz,

Elementary in Front End development means learning to work with code.  Plain & simple.  There are no shortcuts to this.   Start here:

• https://developer.mozilla.org/en-US/docs/Learn
• https://backlinko.com/google-seo-guide

[Hydraxuz]

Hi Nancy:  You are correct!

[osgood_]

We all started at an elementary level. The difficulty is finding sources that are on-point, those being current and most relevant to what is happening now, not a few years back. That's quite difficult when you first start out and is why I advise anyone looking to learn anything shouldn't go back any further than about 2 years, as a point of source. It's a rule of thumb that I follow myself if I'm researching how to do something. The internet is not short of current, free and up-to-date tutorials on most aspects of web-development

[Hydraxuz]

.Nancy, thank you for all the links you have shared.  I appreciate it.

[Nancy OShea · Accepted solution]

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. 

[Hydraxuz]

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