How to Use Width & Height Attributes for Images on the Web

How to Correctly Fill in the Attributes

For best results, it’s recommended to specify the exact dimensions in which the image will be displayed. However, due to responsiveness, it’s often not possible to set fixed values, so the actual image dimensions are usually taken directly from the CMS. Only numbers are specified, without units (px).

Example:

<img src="example.webp" width="600" height="400">

Responsive Design and the Use of CSS

To achieve responsive design, it is essential to combine HTML attributes with CSS styles. This is ensured by predefined styles provided by libraries such as Bootstrap or Tailwind CSS:

Bootstrap:

.img-fluid { 
  max-width: 100%; 
  height: auto; 
}

Tailwind CSS:

img { 
  max-width: 100%; 
  height: auto; 
}

However, we recommend setting the property width: auto; for all images.

CSS Takes Precedence

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, meaning the final size will be determined by the CSS styles. However, the HTML attributes still matter – they satisfy search engines, and users will experience smoother page loading, specifically the absence of annoying content jumping during image loading.

Why Fill in the Width & Height Attributes?

1. Improving Page Performance

   Filling in the attributes helps the browser reserve space for the image before it loads, preventing content jumping and ensuring smooth page loading.

2. Better User Experience (UX)

   Images are displayed smoothly without content jumping, enhancing the overall impression users have while browsing the page.

3. SEO

   Filled width and height attributes can positively influence the page’s ranking in search engines, giving you an advantage in search results.

4. Accessibility

   Properly set width and height attributes also contribute to accessibility. Users with assistive technologies can more easily understand the layout of the page and navigate through it.

Modern Browsers and Aspect Ratio

Modern browsers (except for Safari, which is the rightful successor to Internet Explorer 🤦‍♂️) can use the width and height attributes as an aspect ratio, meaning you don’t have to worry about images overflowing on mobile devices. Responsiveness is, of course, a standard on all our websites.

Main Reason and Advantage: SEO

By filling in the width and height attributes, we gain extra points with search engines.

Summary

Using the width and height attributes for images is crucial for improving page performance, user experience, and SEO. Properly filling in these attributes not only ensures better page rendering but also contributes to 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 hassle and let us create the website for you. 😉