The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Responsive resizing of images, Using percentage to size responsive images
chris montez
post May 25 2020, 02:43 PM
Post #1


Newbie
*

Group: Members
Posts: 19
Joined: 26-April 20
Member No.: 27,299



Is this coding wrong for these side by side columns:<p> <img src="../images/bakerfinish700.jpg" width="90%" alt="John Baker Champion"></p>
<p> <img src="../images/seavey700.jpg" width="100%" alt="Seavey Champion"></p>?

It gives me the layout I want as the 2 columns reduce to fit a vertical Ipad mini and loads fast. But is it incorrect to do the images this way and do they have to have their width and height designated in pixels with the percentages designated in CSS?

I also do my banners this way: <div><img src="../images/21daybanner.jpg" width="100%" alt="Team on the Bearing Sea"></div>.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 25 2020, 06:37 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You should use either pixels or percent, not a combination of them.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chris montez
post May 25 2020, 10:44 PM
Post #3


Newbie
*

Group: Members
Posts: 19
Joined: 26-April 20
Member No.: 27,299



QUOTE(pandy @ May 25 2020, 06:37 PM) *

You should use either pixels or percent, not a combination of them.

I am only using %, but running the pages through a code validator gives me an error message saying I should be using pixels and not % .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 26 2020, 06:50 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(chris montez @ May 25 2020, 09:43 PM) *

is it incorrect to do the images this way and do they have to have their width and height designated in pixels with the percentages designated in CSS?

It's valid HTML4, but it seems HTML5 does not permit percent values as WIDTH or HEIGHT attribute values:

"The attributes, if specified, must have values that are valid non-negative integers."
https://www.w3.org/TR/2014/REC-html5-201410...#attr-dim-width

I think the WIDTH and HEIGHT attributes are optional in both HTML4 and 5.

The disadvantage of using IMG percent widths (even in CSS) is that you may have to omit the IMG height in order to make the image scale properly. That in turn makes the page rearrange itself while the image files are loading (since the images' intrinsic heights only become known to the browser one at the time).

You may get a faster page rendering with fixed image widths, and instead use CSS media queries to change page layout depend on the browser viewport widths. However that way you can't make the image fill the entire viewport width.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chris montez
post May 27 2020, 10:21 PM
Post #5


Newbie
*

Group: Members
Posts: 19
Joined: 26-April 20
Member No.: 27,299



Using the W3School instructions for responsive images , they seem to just list the image , the alt and give the image a class for ex.
{
.responsive
width: 100%
height: auto;
}

<p><img src="../images/willowhoriz1.jpg" "class="responsive" alt="coming under the burl arch"></p>

I find this interesting as I thought it was bad coding not to list the width and height in the image tag as it speeds up loading.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 28 2020, 05:58 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



If the page isn't image heavy the loading glitch won't be noticeable with today's speeds, so I wouldn't worry too much about it.

About percentage width and HTML 5, I wouldn't worry about that either. It won't validate, but it won't harm anything. But of course you can use CSS just as well and that problem is gone.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 28 2020, 06:18 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Fact is I wouldn't worry too much about w3schools either. Writing out height: auto is redundant since that is the default value. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 28 2020, 07:07 AM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(chris montez @ May 28 2020, 05:21 AM) *

I find this interesting as I thought it was bad coding not to list the width and height in the image tag as it speeds up loading.

20 years ago it might have been courteous to specify both, as a fallback for browsers like Netscape 4 that didn't support much CSS. Nowadays it's enough to specify the dimensions with CSS, all browsers will understand that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:58 AM