<img> tag: check for width/height attributes and correct values
<img> tag: check for width/height attributes and correct values
Hello,
I would suggest to an option to check for <img> tag:
- missing of "width" and/or "height" attributes.
- bad value of "width" and "height" vs. real image size.
Reason: I run into some checkers and Google Lighthouse/Pagespeed Insights where the non-presence of
"width"/"height" attributes in <img> tag, or mismatched values vs. real image size are pointed out.
I would suggest to an option to check for <img> tag:
- missing of "width" and/or "height" attributes.
- bad value of "width" and "height" vs. real image size.
Reason: I run into some checkers and Google Lighthouse/Pagespeed Insights where the non-presence of
"width"/"height" attributes in <img> tag, or mismatched values vs. real image size are pointed out.
- Albert Wiersch
- Site Admin
- Posts: 3824
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: <img> tag: check for width/height attributes and correct values
Hello,
Thank you for the suggestion.
There should definitely already be a warning message if the "width" and/or "height" attribute is omitted from <img>. It should be something like this:
It is strongly recommended that the "height" and "width" attributes be used with the <img> element so browsers can leave the correct amount of space for them while downloading the image (which can take more time on mobile networks and devices). This will also prevent issues and annoyances (like image jank) due to reflow when the image becomes available or if image downloading is disabled. This message is displayed up to 5 times.
or
It is strongly recommended that the "height" and "width" attributes be used with the <img> element. Using these attributes generally result in faster and smoother (less jumpy) rendering. This message is displayed up to 5 times.
The first warning message is generated if mobile messages are enable, otherwise the 2nd is generated. They are warnings though, and not errors. You can upgrade them to errors if you wish by right-clicking on them and choosing the correct option while the message is displayed in the Results Window in the editor.
Also, in some cases the value of the attributes will be checked, but this is only if checking local files and under certain circumstances. CSS HTML Validator won't fetch the image via HTTP/HTTPS to check the dimensions. If it did this then it would drastically slow down the validation.
It's possible this could be added at some point in the future and I will keep your suggestion in mind.
Thank you for the suggestion.
There should definitely already be a warning message if the "width" and/or "height" attribute is omitted from <img>. It should be something like this:
It is strongly recommended that the "height" and "width" attributes be used with the <img> element so browsers can leave the correct amount of space for them while downloading the image (which can take more time on mobile networks and devices). This will also prevent issues and annoyances (like image jank) due to reflow when the image becomes available or if image downloading is disabled. This message is displayed up to 5 times.
or
It is strongly recommended that the "height" and "width" attributes be used with the <img> element. Using these attributes generally result in faster and smoother (less jumpy) rendering. This message is displayed up to 5 times.
The first warning message is generated if mobile messages are enable, otherwise the 2nd is generated. They are warnings though, and not errors. You can upgrade them to errors if you wish by right-clicking on them and choosing the correct option while the message is displayed in the Results Window in the editor.
Also, in some cases the value of the attributes will be checked, but this is only if checking local files and under certain circumstances. CSS HTML Validator won't fetch the image via HTTP/HTTPS to check the dimensions. If it did this then it would drastically slow down the validation.
It's possible this could be added at some point in the future and I will keep your suggestion in mind.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Re: <img> tag: check for width/height attributes and correct values
Thank you for your explanations.
From your answer, I discover the option "Enable Mobile Messages", it is enabled by default already.
Even with option "Enable Mobile Messages" enabled, curiously I did not see any warning about missing "width" or "height" (I have CSS HTML 2021 version).
I do have error message for width="abc" (invalid value) for example. But I do not have any error or warning message
for width="" or height="".
In my project, all images (img tag) are local. I succeed to get all my <img> tags checked bu developing a small PHP script:
1- First use grep utility to scan for all html source files for lines containing <img> tag. This produces a text file with lines like:
(html_filename_with_absolute_path) (html_line_number) (html_line_content_with_img_tag)
2- The PHP script then processes each line, use regular expressions to get:
- the relative path of the image (and convert it to absolute local path),
- its real width and height (function getimagesize()),
- the width and height as set in the html source line. If there is any mismatch, display the error.
Thanks to this script, here is my experience :
- about 4,000 image files.
- about 100+ errors: few are due to width="" or height="" (value not filled, shame to me ), the other errors are due to typos
(e.g. width="256" instead of width="253", or more seriously like width="248" insted of width="428" (dyslexia)).
The problem is that I just discover yesterday the PHP getimagesize() that could fill automatically the attributes "width" and "height".
In the past, I have to note the image width and height values (e.g. using the bubble information from Windows explorer),
then type it manually to the <img> tag in html source. This process is error-prone.
Even with automatization, a post check of <img> tag width/height attributes would still be useful.
Note: processing local image with getimagesize() is surprisingly fast, it took only 1-2 seconds to process 4,000+ image files.
From your answer, I discover the option "Enable Mobile Messages", it is enabled by default already.
Even with option "Enable Mobile Messages" enabled, curiously I did not see any warning about missing "width" or "height" (I have CSS HTML 2021 version).
I do have error message for width="abc" (invalid value) for example. But I do not have any error or warning message
for width="" or height="".
In my project, all images (img tag) are local. I succeed to get all my <img> tags checked bu developing a small PHP script:
1- First use grep utility to scan for all html source files for lines containing <img> tag. This produces a text file with lines like:
(html_filename_with_absolute_path) (html_line_number) (html_line_content_with_img_tag)
2- The PHP script then processes each line, use regular expressions to get:
- the relative path of the image (and convert it to absolute local path),
- its real width and height (function getimagesize()),
- the width and height as set in the html source line. If there is any mismatch, display the error.
Thanks to this script, here is my experience :
- about 4,000 image files.
- about 100+ errors: few are due to width="" or height="" (value not filled, shame to me ), the other errors are due to typos
(e.g. width="256" instead of width="253", or more seriously like width="248" insted of width="428" (dyslexia)).
The problem is that I just discover yesterday the PHP getimagesize() that could fill automatically the attributes "width" and "height".
In the past, I have to note the image width and height values (e.g. using the bubble information from Windows explorer),
then type it manually to the <img> tag in html source. This process is error-prone.
Even with automatization, a post check of <img> tag width/height attributes would still be useful.
Note: processing local image with getimagesize() is surprisingly fast, it took only 1-2 seconds to process 4,000+ image files.
- Albert Wiersch
- Site Admin
- Posts: 3824
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: <img> tag: check for width/height attributes and correct values
That sounds like a very good and useful script you developed! And I agree that sounds very fast. It is a check that I would add to CSS HTML Validator if it was simple to do but because there is the need to open or fetch/download other files, it is not done. CSS HTML Validator was not designed to have to open other files for validations and to do so would require some reworking.
However, I am wondering why you are not seeing the warning message. By the way, the warning messages I included in my above response was when the attribute was omitted altogether. If the attribute is used but its value is an empty string, then there should be a warning like this:
The "width" attribute for this <img> element has an empty or missing value. The expected value is a non-negative length in pixels.
If it is not there then it's possible it was disabled or it was changed from a warning. Try unchecking the 'Enable override by message ID' option in the 'Message Output' page of the Validator Engine Options, then re-validate and see if the message appears. Also, make sure that warning messages are not disabled (don't do an 'Errors only' validation which only shows errors).
If it still does not show up, and you can see an error when you use width="abc", then something 'strange' may be happening. You aren't using an old config (cfg) file or user-customized one by any chance, are you?
However, I am wondering why you are not seeing the warning message. By the way, the warning messages I included in my above response was when the attribute was omitted altogether. If the attribute is used but its value is an empty string, then there should be a warning like this:
The "width" attribute for this <img> element has an empty or missing value. The expected value is a non-negative length in pixels.
If it is not there then it's possible it was disabled or it was changed from a warning. Try unchecking the 'Enable override by message ID' option in the 'Message Output' page of the Validator Engine Options, then re-validate and see if the message appears. Also, make sure that warning messages are not disabled (don't do an 'Errors only' validation which only shows errors).
If it still does not show up, and you can see an error when you use width="abc", then something 'strange' may be happening. You aren't using an old config (cfg) file or user-customized one by any chance, are you?
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Re: <img> tag: check for width/height attributes and correct values
You spotted it right! I was using "Errors only" validation, so now with Validator Engine Options > Set Default Validation Mode > "Errors and warnings only"
I get ALL the warnings I wrongly thought there were missing! And there are now other warnings that are very useful.
I believe I use only 5% of all the functions available with CSS HTML Validator!
I get ALL the warnings I wrongly thought there were missing! And there are now other warnings that are very useful.
I believe I use only 5% of all the functions available with CSS HTML Validator!
- Albert Wiersch
- Site Admin
- Posts: 3824
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: <img> tag: check for width/height attributes and correct values
Great! I'm glad we got this figured out.
Enjoy the new warnings.
Enjoy the new warnings.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Re: <img> tag: check for width/height attributes and correct values
I'm glad I searched for this problem before I posted this -- I was going to ask about the warning to use image width and depth when I already have them defined in the css section of the same file. I have a page of school yearbook photos where the image sizes are defined in css, but I still get the warning to define width and depth. All of the images are the same size, so the same css entry refers to all of the images on the page.
Last edited by chasdobie on Mon Dec 12, 2022 9:06 pm, edited 1 time in total.
- Albert Wiersch
- Site Admin
- Posts: 3824
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: <img> tag: check for width/height attributes and correct values
It's typically best if you can use the "height" and "width" attributes (instead of using CSS for image width and height)... but if you can't or wish not to then you can disable the warning message (or just ignore it).chasdobie wrote: ↑Mon Dec 12, 2022 8:52 pm I'm glad I searched for this problem before I posted this -- I was going to ask about the warning to use image width and depth when I already have them defined in the css section of the same file. I have a page of school yearbook photos where the image sizes are defined in css, but I still get the warning to define width and depth.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Re: <img> tag: check for width/height attributes and correct values
OK, thanks -- I'll ignore it. FYI, if I define a style too many times in a single html file, then validator complains too, so in a page with 25 or more photos, I get complaints no matter what system I use
- Albert Wiersch
- Site Admin
- Posts: 3824
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: <img> tag: check for width/height attributes and correct values
Yep, if you use the "style" attribute "too many times" then it should generate a comment (or warning if >=100 times) about it... something like this:
The "style" attribute was used 67 times. This attribute should be used sparingly. If possible, make logical use of the "class" attribute instead. Excessive use of the "style" attribute can negate many of the benefits of CSS like smaller, easier to maintain, and less cluttered documents. Consider using CSS style sheets (preferably external) instead of relying too much on the "style" attribute. This message is displayed when the "style" attribute is used more than 5 times and becomes a warning if used >=100 times.
But it only becomes a warning if you've used the "style" attribute >=100 times... that's a lot of "style" attributes. If you use a CSS class and the "class" attribute instead then that would be better style/design.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial