Hi, I’m trying to improve my website SEO, and in a SEO check, I’m asked to add image size to the image tags, as well as image description - which I assume goes in alt=“” . The thing is I have already sized the images in CSS, for media queries, etc. In this case, is it better just to add descriptions in alt=“”, and leave the image sizing in CSS? Thanks
1 Like
For SEO?
alt attribute values are important for accessibility reasons
height and width values are important to help prevent rendering reflow
Both are important for site visitors so IMHO you should be doing both regardless.
Exception being background images not included in the mark-up
Where has Google said this is important for SEO reasons?
1 Like
I don’t recall hearing mention of it from Google, but I have seen Bing WMT flag missing alt tags in their SEO Reports.
As a general rule, search engines do not interpret the content of image
files. The text provided in theattribute enables the
site owner to provide relevant information to the search engine and to
the end user. Alt text is helpful to end users if they have images
disabled or if the image does not properly load. In addition, the Alt
text is utilized by screen readers. Make sure that your Alt text is
descriptive and accurately reflects what the image represents and
supports the content on the page.
Though I have also read that in html5, if you use a <figcaption> tag to contain an image description, within a <figure> tag with an image, the alt tag is not needed.
1 Like
But my doubt is: why declare an image size in the HTML tag if it’s already declared in the CSS? nOr to put it another way, if I also declare the size in the HTML tag, how about media queries and smaller screens? Can the CSS override the HTML tag? I think it was in http://nibbler.silktide.com/ that they mention aboiut the missing size info in the image tag.
If the image starts to load before the CSS has finished loading, the browser does not know the dimensions at which to display it. When the CSS loads with the dimensions, the browser may have to redraw the page to display the image correctly, so it can slow rendering time.
The CSS may not load straight away on slower connections. If you put the image size in the HTML then the space for the image at its regular size is reserved in the page layout straight away rather than the page always having to reflow when the CSS loads.
CSS always overrides HTML so once the CSS loads the values specified in the CSS will override that in the HTML.
If you use responsive values for the image in the CSS then you need the actual image size to be specified in the HTML so that the CSS knows the original image size to apply those values to.
The image will presumably load into the defined size (HTML as overridden or modified by the CSS) at some later point in loading the page.
1 Like
Yes.
Though I have doubts about the effect of stating image size in html on SEO, SEs see html as content, css is of little concern to them.
In a responsive site, where the image size may change, I do find setting the size in html is still useful, to define the images max size, as they may not all be the same size and I may only have a couple of classes for images.
In addition to what @Mittineague says about rendering flow.
It is irrelevant whether the image width, height and alt attributes have any effect on SEO or not - they are mandatory requirements for the page to function correctly in the first place and so leaving them out in order to affect SEO is only going to do so because that would break the page.
So,if I put a specific image size in the HTML tag, how can I get it to resize for different size screens?
For example, how could I get this to render correctly in a smartphone?
<img src="http://www.example/photo.jpg" title="A nice mountain photo" alt="A spectacular view" width="400px" height="600px" />
Yo override the HTML size in the CSS.
The basic way is to add a CSS class for images
img { max-width: 100%; height: auto; }
That will force images to scale down to fit the available space.
1 Like
The width and height values in the HTML should NOT include units of measure. The numbers are interpreted as px by default. I think modern browsers have leaned to tolerate/ignore the unit of measure in the HTML. And as has already been said, CSS overrides these values when the CSS finally loads.
So, for example, if I don’t want the image to load on the smallest screen, using media queries, I would use:
display: none; like this?
img { max-width: 100%; height: auto; display: none }
Just that, in some browsers, it may be slow to override the html tag? And in the HTML tag, I should only use numbers for sizing like this: <img src.....width="200" height="300" />, right?
Yes, regarding the units of measure in the HTML width and height attributes.
Well, the problem is that the mobile device would still download it, which is nasty for bandwidth. There are new options for dealing with this, such as the srcset attribute: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
So, I see that “display: none” is ignored, and, as I originally suspected, the image size remains the same on all screens, which in my case actually looks ok. The site is www.profesornativo.com So, if the SEO gremlins are happy with that, I might leave it for the moment,
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.