Google says that it is better to put the width and height of an img in the html: "A web browser can begin to render a page even before images are downloaded"
See Here
<img src="some-address.jpg" width="20px" height="20px">
But, what if the img is in a responsive page?
I did not give any value and the img works well and adapts to any size. But, then the Google testing tool for structured data gives an error: "A value for the width field is required"
https://search.google.com/structured-data/testing-tool
I tried to give that values:
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg"
width="100%" height="auto">
Here is the example: JSFiddle
It is responsive and it has the values. The error goes away. But I have read that Google requires numeric values.
How to put the width and height of an img in a responsive page?
I suppose that the use of structured data is always recommended. So, I must take into account what the Google testing tool says. Am I right?
This is best done through a css style sheet as the width and height tags for images are generally considered bad practice.
.imageclass{
width: 100%;
max-width: 150px; /* whatever size is the biggest that you want */
height:auto;
}
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" class="imageclass" />
Just use css instead of attributes:
img {
width: 100%;
height: auto;
}
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg">
The article you refer to says:
Specify a width and height for all images. A web browser can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. Specifying these dimensions can speed up page loading and improve the user experience. For more information about optimizing your images, see Optimizing Web Graphics on the site Let's Make the Web Faster.
So the reason of specifiing sizes in pixels is that browser will know the image size before it loads the image itself. And there is no sence in specifiing them in css for every image if it is unique and takes all place it needs. Now you are setting one value to auto. With auto browser have to get the image and only then it will be capable to calculate its dimensions ratio and use it. No any reasons to use attributes.
As Unor says here link to a another question
Schema.org’s height/width properties are not for stating in which dimension the image should be displayed, but which dimension the image file has.
So I can put the responsive css as ususal in the css file:
img {
width: 100%;
height: auto;
}
In the html, with structured data I have to give the width and height in px. The real pixels, as I can see in Photoshop:
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img src="some-address.jpg"/>
<meta itemprop="url" content="some-address.jpg">
<meta itemprop="width" content="20">
<meta itemprop="height" content="20">
</div>
Related
I've got a long page, built with Angular. The images on the page are lazy-loaded so that the src is not set until the image is scrolled into view.
The container is flexible and the images should never scale larger than their dimensions (which I know and can set on a style attribute)
Right now I've having issues getting the images without a set source to scale properly.
TL;DR
I want <img src='pic.jpg'/> and <img src=''/>to take up the exact same amount of space inside a flexible container with maximum sizes.
DEMO: http://codepen.io/chrismbarr/pen/xGgGRq?editors=110
HTML (this will be generated from JavaScript where we know the dimentions ahead of time)
<div class="container" style='max-width: 500px; max-height: 700px;'>
Image with a source
<img src="http://lorempixel.com/500/700/cats/2/" />
</div>
<div class="container" style='max-width: 500px; max-height: 700px;'>
Image with no source
<img src="" />
</div>
CSS
img{
display:block;
max-width: 100%;
}
img[src=''],
img:not([src]){
//no image source
height: 100%;
width: 100%;
}
Here's a demo of the image sizes being hard-set so they are no longer flexible. This is what I want to avoid: http://codepen.io/chrismbarr/pen/JdEYMe
In the case that you know the dimensions of every image ahead of time, I almost always recommend the combination of a plain ol' <div> and the background-image property. You don't have to pander to the idiosyncrasies of the <img> tag, and you still get support for animated .gifs.
I whipped up this quick Codepen to give you a feel. I use a directive to set the width and height, which are passed into an isolate scope, then set the background-image property when I detect the directive top offset is less than the height of the window. Quick, dirty, but simple implementation of what I think you're going for.
Advantages:
Aforementioned reprieve from dealing with the ever cantankerous img tag.
Ability to add some neat hover effects (trying hovering over one of the cats in the Codepen).
Drawbacks:
Detecting image load with a background image isn't quite as easy as using the img.onload callback available for image tags. You could likely create directive template that used a img to squeeze out this functionality. Up to you.
Hope this helps!
EDIT: As Chris mentioned in a comment, this technique still doesn't address the aspect ratio issue when the image containers are of varying widths. To solve this I get to whip out one of my favorite CSS tricks, maintaining aspect ratio with padding-bottom, written about by Nicolas Gallagher.
While unfortunately I don't have time to add the fix into my original pen (headed to work), I did create this to show an implementation using the same images. The padding-bottom of an element will proportionally scale as the width of an element increases or decreases, thus maintaining the element's aspect ratio.
that's kinda simple what you do is
<img src="img.jpg" width"20px" height"20px"/>
or any number of pixels and do the same with he other one
<img src="" width"20px" height"20px"/>
I created an email template with a banner at the top of a two column table. Everything is good except the top banner. When the email is sent out, the picture gets resized if the window is smaller than the banner itself.
How can I keep the picture from automatically resizing itself if the mail window is small?
This is my code for the banner:
<img style="width: 710px; height:191px;" alt="" src="banner.png" height="191" width="710" />
The src has a whole URL that went there. I just shorten it to just the picture.
If you set the size of the image in a CSS file, it should not change.
.image {
width: 200px;
height: 200px;
}
Then apply this style to your image.
depending on the email client this may/may not work, it depends on whether the CSS directives are supported if it's webmail it most likely will be supported
Additionally make sure that the img tag's parent element has the proper width style.
if it's embeded in the the table as a colspan2 then make sure the table has the min-width set as well.
This question already has answers here:
Should I specify height and width attributes for my IMGs in HTML?
(5 answers)
Closed 8 years ago.
Is it better coding practice to define an images size in the img tag's width and height attributes?
<img src="images/academia_vs_business.png" width="740" height="382" alt="" />
Or in the CSS style with width/height?
<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />
Or both?
<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />
I'm going to go against the grain here and state that the principle of separating content from layout (which would justify the answers that suggest using CSS) does not always apply to image height and width.
Each image has an innate, original height and width that can be derived from the image data. In the framework of content vs layout, I would say that this derived height and width information is content, not layout, and should therefore be rendered as HTML as element attributes.
This is much like the alt text, which can also be said to be derived from the image. This also supports the idea that an arbitrary user agent (e.g. a speech browser) should have that information in order to relate it to the user. At the least, the aspect ratio could prove useful ("image has a width of 15 and a height of 200"). Such user agents wouldn't necessarily process any CSS.
The spec says that the width and height attributes can also be used to override the height and width conveyed in the actual image file. I am not suggesting they be used for this. To override height and width, I believe CSS (inline, embedded or external) is the best approach.
So depending on what you want to do, you would specify one and/or the other. I think ideally, the original height and width would always be specified as HTML element attributes, while styling information should optionally be conveyed in CSS.
The historical reason to define height/width in tags is so that browsers can size the actual <img> elements in the page even before the CSS and/or image resources are loaded. If you do not supply height and width explicitly the <img> element will be rendered at 0x0 until the browser can size it based on the file. When this happens it causes a visual reflow of the page once the image loads, and is compounded if you have multiple images on the page. Sizing the <img> via height/width creates a physical placeholder in the page flow at the correct size, enabling your content to load asynchronously without disrupting the user experience.
Alternately, if you are doing mobile-responsive design, which is a best practice these days, it's quite common to specify a width (or max-width) only and define the height as auto. That way when you define media queries (e.g. CSS) for different screen widths, you can simply adjust the image width and let the browser deal with keeping the image height / aspect ratio correct. This is sort of a middle ground approach, as you may get some reflow, but it allows you to support a broad range of screen sizes, so the benefit usually outweighs the negative.
Finally, there are times when you may not know the image size ahead of time (image src might be loaded dynamically, or can change during the lifetime of the page via script) in which case using CSS only makes sense.
The bottom line is that you need to understand the trade-offs and decide which strategy makes the most sense for what you're trying to achieve.
While it's ok to use inline styles, your purposes may better be served by including an external CSS file on the page. This way you could define a class of image (i.e. 'Thumbnail', 'Photo', 'Large', etc) and assign it a constant size. This will help when you end up with images requiring the same placement across multiple pages.
Like this:
In your header:
<link type="text/css" rel="stylesheet" href="css/style.css" />
Your HTML:
<img class="thumbnail" src="images/academia_vs_business.png" alt="" />
In css/style.css:
img.thumbnail {
width: 75px;
height: 75px;
}
If you'd like to use inline styles though, it's probably best to set the width and height using the style attribute for the sake of readability.
Definitely not both. Other than that I'd have to say it's a personal preference. I'd use css if I had many images the same size to reduce code.
.my_images img {width: 20px; height:20px}
In the long term CSS may win out due to HTML attribute deprecation and more likely due to the growth of vector image formats like SVG where it can actually make sense to scale images using non-pixel based units like % or em.
<img id="uxcMyImageId" src"myImage" width="100" height="100" />
specifying width and height in the image tag is a good practice..this way when the page loads there is space allocated for the image and the layout does not suffer any jerks even if the image takes a long time to load.
Option a.
Simple straight fwd. What you see is what you get easy to make calculations.
Option b. Too messy to do this inline unless you want to have a site that can stretch. IE if you used the with:86em however modern browsers seem to handle this functionally adequately for my purposes.. . Personally the only time that i would use something like this is if i were to create a thumbnails catalogue.
/*css*/
ul.myThumbs{}
ul.myThumbs li {float:left; width:50px;}
ul.myThumbs li img{width:50px; height:50px;border:0;}
<!--html-->
<ul><li>
<img src="~/img/products/thumbs/productid.jpg" alt="" />
</li></ul>
Option c. Too messy to maintain.
I'm using contentEditable to allow rich text editing in my app. I don't know how it slips through, but when an image is inserted, and then resized (by dragging the anchors on its side), it generates something like this:
<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/>
(subsequent testing shown that inserted images did not contain this "rogue" style attr+param).
When rendered by the browser (IE7), the width and height in the style overrides the img width/height param (so the image is shown like how I wanted it.. resized to 55px x 55px. So everything went well so it seems.
When I output the page to a ms-word document via setting the mime type application/msword or pasting the browser rendering to msword document, all the images reverted back to its default size. I finally found out that msword is discarding the style and using the img width and height tag (which has the value of the original image size).
Took me a while to found this out. Anyway... I've coded a javascript function to traverse all tags and "transferring" the img style.width and style.height values into the img.width and img.height, then clearing both the values in style, before I proceed saving this piece of html/richtext data into the database.
cheers.
opps.. my answer is.. no. leave both attributes directly under img, rather than style.
If I know the height and width of an image that I'm going to display with an image tag, should I include the height and width attributes, or just put the information in CSS? Or both?
Ex.
<img src="profilepic.jpg" height="64" width="64" />
or
<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />
or
<img src="profilepic.jpg" style="height: 64px; width: 64px;" />
According to Google Page Speed, you should always define the width and height in the image tag. But, to validate you can't use the style tag.
Also, you should always specify the same height and width as the actual image so the browser doesn't have to do any modifications to it like resizing.
I'd suggest doing it
<img src="..." height="20" width="50">
Edit: Someone suggested in the comments that it would be faster to just not add any attributes. According to Google (not that they are the end all of browser knowledge):
If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS. - Read More
Given that, you could do the img dimensions in CSS, but to validate you would have to do it in a CSS file, not inline.
BTW, Google Page Speed is a series of tips focused on rendering the page faster.
You should always specify the height and the width of an image if only to help the browser lay the page out even before the image has been downloaded.
See 13.7 Visual presentation of images, objects, and applets in the HTML 4.01 spec:
The height and width attributes give
user agents an idea of the size of an
image or object so that they may
reserve space for it and continue
rendering the document while waiting
for the image data.
They are recommended and not required but you really, really should specify them ;-)
Also, please make sure the dimensions you specify actually match the dimensions of the image.
There is nothing worse than waiting for a page to download just because those 400x300(!) images are in reality more like 4000x3000 at 95% quality.
Yes you should specify the dimensions, so user agents know beforehand the size before the image fully loads so a layout couldn't potentially look broken if it relies on the loaded image's dimensions. In addition, if you're relying on IE6's filter property to insert png's you will need those dimensions.
This answer is now dated and I wouldn't make the same recommendation as I did back in 2009 with modern browsers.
It doesn't really matter which one you use, but I would recommend using only one.
I would recommend the attribute over the css solution as it is more compatible to older browsers and people with styles disabled.
Actually you don't have to specify them. Accordingly to w3c specification you use them only to override default values that are embedded in the image file and are read by the browser. When used will scale the original image to given sizes so putting them is making an extra calculus for the browser.
The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.
<img src="profilepic.jpg" alt="image" />
I've learned that it is a best practice to explicitly specify image dimensions. The browser can then already layout the page while still downloading the images themselves, thereby improving (percieved) page rendering time.
Is this true? And if so, is there a difference in specifying the dimensions in either HTML or CSS?
HTML: <img src="" width="200" height="100">
Inline CSS: <img src="" style="width: 200px; height: 100px">
External CSS: #myImage { width: 200px; height: 200px; }
According to Google Page Speed, it does not really matter if you specify the dimensions via CSS or HTML, as long as your CSS targets the IMG tag itself and not a parent element :
When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS.
However, note that they advise not to resize the image using these dimensions, ie to always use the real dimensions :
Don't use width and height specifications to scale images on the fly. If an image file is actually 60 x 60 pixels, don't set the dimensions to 30 x 30 in the HTML or CSS. If the image needs to be smaller, scale it in an image editor and set its dimensions to match (see Optimize images for details.)
I tend to do it in the CSS. This is certainly a win when there are multiple images with the same dimensions (so you can do stuff like .comment img.usergroup { width: 16px; height: 16px; }), and have the same images subject to scaling in different stylesheets like user-selectable themes.
When you have completely independent images that are used on the site only once, it doesn't really make sense to abstract their size out to CSS, so the HTML version would probably be more appropriate there.
I think CSS gives you more flexibility: you can specifically set the width or height while setting the other dimension to auto. But when setting both dimensions, I don't thing there's a difference.
This does not answer your question directly, but I would not rely on the dimensions of your image for page layout. Instead include the image in a block level element. This relieves both the HTML and CSS from having to hold information that it really shouldn't as the image may change from time to time.
If you put a large image in an HTML page without dimensions, you should definitely notice the page layout shifting as the image is downloaded (over an internet connection, if not locally).
As per other answers, it doesn’t make much difference whether you do this in the HTML or the CSS.