How to use Width & Height attributes for images on the web
For optimizing image display on the web, it's essential to include width and height attributes directly in the HTML. These attributes serve not only to improve user experience but also have a positive impact on page performance and SEO.
Tags
Key takeaways
Include width and height attributes for all images
Combine HTML attributes with CSS styles for responsive design
CSS takes precedence over HTML attributes during rendering
Modern browsers use attributes as aspect ratio
Filled-in attributes improve SEO and user experience
For best results, it's advisable to specify the exact dimensions in which the image will be rendered. However, precise values usually cannot be provided due to responsiveness, which is why the actual image dimensions are often used, retrieved directly from the CMS. Only numbers without units (px) are specified.
Responsive design and CSS
Responsive design and CSS
To achieve responsive design, it's essential to combine HTML attributes with CSS styles. This is ensured by predefined styles that libraries like Bootstrap or Tailwind CSS provide:
.img-fluid {
max-width: 100%;
height: auto;
}
img {
max-width: 100%;
height: auto;
}
However, we also recommend setting the width: auto; property for all images.
CSS priority over HTML attributes
If CSS sets different dimensions than the HTML width and height attributes, you don't need to worry. CSS takes precedence when rendering the image, which means the final size will be determined by the CSS styles. However, the HTML attributes still make sense—search engines will be satisfied with them, and users will appreciate smooth page loading, specifically the absence of unpleasant content jumping when images load.
Modern browsers (except Safari, which is the rightful successor to IE) can use the width and height attributes as aspect ratio, which means you don't have to worry about the image overflowing to the side, for example on mobile devices. Responsiveness is, of course, standard on all our websites.
SEO benefits
Thanks to filled-in width and height attributes, we gain bonus points with search engines. Using these attributes for images is key to improving page performance, user experience, and SEO.
Properly filling in these attributes not only ensures better page rendering but also contributes to its accessibility and responsive design. Don't underestimate the importance of these attributes and always include them for all images on all websites. Or save yourself the trouble and have us build your website for you.