• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Hero image

Contributor ,
Jan 18, 2021 Jan 18, 2021

Copy link to clipboard

Copied

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.

 

Views

724

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 3 Correct answers

Community Expert , Jan 18, 2021 Jan 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/

...

Votes

Translate

Translate
Community Expert , Jan 18, 2021 Jan 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. 

 

Votes

Translate

Translate
LEGEND , Jan 23, 2021 Jan 23, 2021

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

Votes

Translate

Translate
Community Expert ,
Jan 18, 2021 Jan 18, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 20, 2021 Jan 20, 2021

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 23, 2021 Jan 23, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 23, 2021 Jan 23, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 23, 2021 Jan 23, 2021

Copy link to clipboard

Copied

Thank you Osgood.  I appreciate your help.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 24, 2021 Jan 24, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 24, 2021 Jan 24, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 24, 2021 Jan 24, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 24, 2021 Jan 24, 2021

Copy link to clipboard

Copied

"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:

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 25, 2021 Jan 25, 2021

Copy link to clipboard

Copied

Hi Nancy:  You are correct!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 25, 2021 Jan 25, 2021

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 25, 2021 Jan 25, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 18, 2021 Jan 18, 2021

Copy link to clipboard

Copied

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 & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 20, 2021 Jan 20, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines