Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add image dimensions to html img tag #56

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

datenimperator
Copy link
Member

Img tags should have height and width attributes if possible at all. If not specified, the tag will add them.

Img tags should have height and width attributes if possible at all. If
not specified, the tag will add them.
@SamWhited
Copy link
Member

I disagree; this should be done in CSS (inline if you must). Adding them in the HTML just makes things look cluttered later.

EDIT: And if you need them in the HTML, you can do it yourself easily enough.

@saturnflyer
Copy link
Member

I agree with this. Not including height/width can cause weird rendering jumps and doing it yourself means you need to know what the dimensions are every time; if they are automatically calculated, why not use that? @datenimperator can you update the specs or do you need any assistance with that?

@datenimperator
Copy link
Member Author

@SamWhited You're right, it's kind of clumsy to have (possibly conflicting) width/height attributes in css and html.

However, I see that at least once width/height should be set.

<img src="" width="20" height="45" > vs.
<img src="" style="width:20px; height:45px" >

Looking at it, the html attribute is shorter and more readable.

@saturnflyer I need to be able to run the specs. Then I could add proper tests, too.

@saturnflyer
Copy link
Member

This sums up my opinion: http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions
We should add width and height. Relying on a stylesheet to set something inherant to the image is putting the details in the wrong place.

@SamWhited
Copy link
Member

Actually, that's a good point. As much as I hate seeing this sort of thing in the HTML, it does prevent some (sometimes serious) rendering issues, and is a lot faster than loading and parsing an external stylesheet.

@jackmcpickle
Copy link

I'm in favour but only as an option rather than in-forced, not specifying allows the browser to redraw the image in responsive containers.
img { max-width:100%; } then scales the images correctly. If the image dimensions are defined then the image does not scale in proportion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants