I'm working with a responsive design and Lighthouse keeps telling me "Image elements do not have explicit width and height". I concluded that it means in the html, because my images have set dimensions in my css with different breakpoints.
Is there a best practice here to keep being responsive but make Lighthouse happy? It might be obvious, but as a student, I'm scratching my head here.
you are right that's actually the best practice and that is recommended for Web Vitals to enhance performance.
If you set height and width, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it.
when you add img in general you should add in html width and height and I prefer to add values that I am adding in CSS or sometimes when I don't have values in CSS I'm doing inspect on the element and make the browser tell me width and height then I back to html and write them.
if you are interested in this topic (Performance) search about Web Vitals (Cumulative Layout Shift) you will find interesting topics
Related
I am using amp (Accelerated Mobile Pages Project) technology in a new project.
My concern is about amp-img tag for images. According to this documentation (https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) you can use the attribut layout='responsive' for responsive purpose and in conjonction you can use srcset,media,sizes attributs also for responsive purpose.
Likewise, the documentation says that the image will take the space of its parent container.
I don't understand this logic. Why should we size the container to have the proper size of the image. If it works this way, it is very heavy to use.
Thank you in advance for your answers
The tricky part is having responsive elements render on the page without adversely affecting performance metrics or user experience.
Yes, you can easily get images to fit the screen without width and height but there are performance hits. I think that is why AMP does not allow responsive layout without width and height.
The browser must download the image first to get the dimensions of the image, then resize the image appropriately for the screen size, and finally reflow and repaint the page.
In AMP, the rendering path is optimized so that first the page is laid out, setting aside placeholders for the images based on the dimensions provided in amp-img (using those numbers to establish aspect ratio), then the resources are downloaded, and the page is painted. No reflow is required.
For more information about Restricting width of responsive images Click Here
I was told that specifying inline width and height for all images will be good for SEO and also helps the site loads faster, like so:
<img src="http://www.example.com/images/free-size.jpg" width="200" height="400" alt="random image" />
Although I can still overwrite the inline setting using height:auto;.
So that images re-size properly when in different display platforms.
But just before I go ahead and doing this just want to reassure if these statements are true. Personally I feel dubious about fixing the inline dimension and overwriting using external CSS, just sound a bit hacky to me.....
I was told that specifying inline width and height for all images will
be good for SEO and also helps the site load faster.
Yes. This has traditionally been true (at least the "site loads faster" part).
By specifying the height and width attributes of an <img> the browser reserves a space matching those dimensions for the image while it continues parsing the rest of the HTML document. Then when the browser loads the image, the reserved space is waiting and there is no need to reflow the document.
Providing this sizing data results in a faster rendering process.
In contrast, if the width and height attributes are omitted, the browser will not know the size of the image until the download is complete, which forces the browser to reflow the document, slowing down the rendering process.
Now imagine a page with 50 images with no defined width and height attributes. The performance hit could be very noticeable.
The practice above represents the traditional view of image loading.
In contrast, some people are now saying that for responsive design the width and height attributes should be avoided.
Responsive Design does not normally use any width or height attributes
The majority of responsive websites do not use width or
height because they want the images to adapt to the screen size and by
using fixed width and height using <img> which would dampen user
experience and Google has declared this one of the most important
factors.
source: https://webmasters.stackexchange.com/a/68494
So there are arguments on both sides and the decision most likely depends on your individual case. As you make your decision here are some more details:
Specifying image dimensions to improve browser performance
Image width/height as an attribute or in CSS?
I was told that specifying inline width and height for all images will
be good for SEO and also helps the site loads faster.
No, it does help loading the site faster. It helps avoid flickering when rendering the page. If you want to load your images faster, make sure they have the same size as specified in the page and use a service like kraken.io to reduce the corresponding file size.
About SEO, it's improper image size and width for the screen size that can hurt your SEO. Google may consider you site as not user-friendly and/or not smartphone friendly.
If you do not tell the browser the size of your images then it must "build" the page not once, but twice (or more times depending on how many images you have on the page). It will build it once to display all the text, and then it will wait until an image is downloaded. When one image is downloaded the browser can now determine the size of the image and will rebuild the page to wrap the text around that image. This process will happen for every image on your page.
If you just specify the image dimensions, it will already know the size of the images and can use that information to shape the page. It won't have to rebuild the page a million times.
The best approach I think is to use the aspect ratio in css.
.img-container {
max-width: 500px;
aspect ratio: 2/1;
overflow:hidden;
}
The above css will reserve a container space for the image to load and prevent reflow.
Regardless of whether it is HTML, XHTML or HTML5 you find those annoying percentages littered throughout the place. Yet... I see an awful lot of websites dare not go near them. Yet I was always encouraged through uni to use them.
So which should I be using? Which would lead to better site design and why?
I'm aware to avoid the use of height although HTML5 really doesn't like me not specifying height if I want to use percentages.
Thanks for taking the time to read.
It really depends on what you do you want to build up.
Sometimes I need to build a website which could be read by people with certain disabilities. If for example also older people visit your site its good to use % so that they could zoom in your page and the layout still looks pretty.
Fixed Design Layouts Fixed design layouts have a specific width and do
not scale to fit the browser window. Websites that make use of it can
be aligned to the left, centre or even aligned to the right as and
when required.
Benefits of Fixed layouts: With fixed design layouts you have control
over the line length, flow and placement of the elements on the web
page. The designer has a fixed space to work with and the line lengths
of the text and the placement of images can be designated easily.
Drawbacks of Fixed layouts: Fixed design layouts tend to leave lots of
empty space on either side of the design when viewed on high screen
resolutions. This dwarfs the size of the web page and gives an
impression that it is floating on the screen.
Fluid Layout Fluid design layouts use percentages instead of pixels to
define their width and they fill the entire browser window. They are
also called fixed or dynamic designs.
Benefits of Fluid layouts: One of the major benefits of fluid design
layouts is their accessibility features. They cater to more number of
users. This is because, whatever may be the screen resolution or
device of the user, fixed design layouts adapt better. It makes use of
the entire browser window by spreading out. This maximizes the area
for the content to e displayed and more information can be seen at one
go. Therefore, there is no empty space on the window screen. This is a
better bet as compared to fixed layouts that leave a great deal of
empty space.
For fonts, you should use percentages (or em's, or rems) if you don't wish to fix the font size in Internet Explorer. If you use pixels, then users of Internet Explorer who change their default font size in their browser settings won't see the fonts increase/decrease. So this makes your text potentially less readable for users in that browser.
A great resource for this is the first chapter of Dan Cederholm's Bulletproof Web Design.
For layout, using percentages or em's will make your design more flexible to changing font sizes/localization etc. This is also covered in the book.
When I was first learning HTML a very long time ago, I was told that it was important to always set the dimensions of your images in your HTML, so that browsers could draw an empty box where the image should go, render your page, and then download and render the images where they belong. If you didn't set width and height values for your images, the browser would have to download the images first to discover their dimensions, and it would slow page loading for people with crappy connections.
For the past few years I've been using CSS, I always put a width and height declaration in my img tags in my HTML. My question is, is setting width and height in the style sheet, and no longer adding these HTML attributes, just as good? It certainly makes my spartan HTML look even cleaner without them.
The problem you mention with the image not being downloaded immediately also applies to your CSS.
The difference is that without the rest of the CSS the whole layout may not make sense. In other words, if the rest of the CSS hasn't loaded then the fact that the image dimensions are also missing won't really be that noticeable.
So personally I think it's fine to put the dimensions in the CSS.
This is a good question, but it's a bit subjective and may lead to more discussion than is generally advised on SO.
Back in the 90's, browsers were slow, and so was the internet. 56k took a while to transfer medium sized images. During that time, the layout would resize to fit the image.
Fast-forward a decade, and internet speeds are much faster, rendering times are much faster. People are used to layouts that change a bit in the first half-second of page load. It's not bad to not specify an image size, as long as you understand the layout of the page may shift during loading.
CSS is parsed before the page is loaded, so specifying the height & width in CSS will work just as well as specifying it inline.
One thing to keep in mind is that inline styles (and that includes height and width declarations) always trump CSS in specificity. If you specify heights and widths of images inline, you may have to go back through every page where an image is present if you want to adjust the size of the images.
Personally I'd suggest using CSS, as it keeps all your styles in the same place.
Yes, setting these properties in CSS will work just as well.
I don't know that it affects page rendering speed in any manner, however. The little effect it does have, is that layout that depends on the image will appear to jump around on the page until the image is loaded and allocates all the space it eventually will.
This is not a practice I follow myself.
A similar question has already been discussed and answered here:
Image width/height as an attribute or in CSS?
It should be defined inline. If you
are using the img tag, that image
should have semantic value to the
content, which is why the alt
attribute is required for validation.
If the image is to be part of the
layout or template, you should use a
tag other than the img tag and assign
the image as a CSS background to the
element. In this case, the image has
no semantic meaning and therefore
doesn't require the alt attribute. I'm
fairly certain that most screen
readers would not even know that a CSS
image exists.
This is also helpful:
If it's part of your site template,
I'd place it in the CSS file.
If it's just on one page, it should be
inline (or defined in a block of
page-specific CSS at the top).
I think the only difference is that css can (yeah it's possible!) not to be read, so <img> attributes are used.
But I'm not sure, I'm going to check that.
EDIT: http://www.mezzoblue.com/archives/2005/05/10/image_attrib/
While you can use CSS to clean up the layout, if your layout messes up by inability to load a single image you should fix that first.
Modern layouts should be controlled by divs and CSS, images in the layout should be supplied only in the form of a background-image:
The reason for always putting the dimensions into HTML code back in the day was due to loading times -- on a 14.4K modem, even relatively small image files would load noticably after the main HTML document had loaded.
These days this is much less of an issue. If it is an issue, it's worth noting that a CSS file will load after the main HTML document, so if you only specify your dimensions there you could potentially suffer the same problem, but CSS files are typically fairly small, so the effect should be minimised.
The other point is that old-school HTML design was very focused on layout, and image sizes were often a critical part of that - if the images were the wrong size, the layout of the whole page would often be completely wrong.
Modern page design approaches things very differently, putting minimal of any layout information into the HTML, and abstracting it all to the stylesheet. Therefore on a typical modern site, until the stylesheets have loaded, the site will just be a series of blocks, and be completely lacking in design. In fact, often the graphics themselves - not just their dimensions - are defined in the stylesheet.
So the answer is that to follow modern page design methods, you should put it in the stylesheet.
Obviously it's critical for most sites these days that the stylesheets load quickly, but it isn't just the size of the graphics that it'll affect.
Just wondering what the best practice is in HTML. I have noticed that I tend to removed the width and height attributes, because they are a pain when I tweak an image, so best to only use if necessary.
Is this best practice? I am I incurring performance issue? Is this legacy stuff?
If you specify the size, browsers can render the page with proper spacing even before loading the images.
I'd say it's good practice to leave the width and height attributes in so that the page doesn't keep shifting around as the images load. In fact, it annoys me quite a bit when I'm trying to view a gallery and they've omitted these attributes! I suppose you could do it with CSS instead, or put the width/height on some container element... just keep in mind that the images will "expand" once the client finishes downloading them and their dimensions can be known.
It can be useful to have the image size so that they page layout can be done before the image is loaded. Otherwise the page renderer doesn't know how much room an image will take up until it knows the size of the image, and this can result in a lot of shifting around as the page loads.
This may not be a big deal for content images, but it can be distracting for images that have an impact on your page layout such as in headers, footers and sidebars.
As Archonix said in his comment, Google has a good overview.