Should image size be defined in the img tag height/width attributes or in CSS?

html

responsive-design

performance

best-practices

byAlex Kataev·Oct 7, 2024

Specify fixed dimensions by using HTML width and height for enhanced layout stability. Implement responsive design via CSS for display adaptability.

HTML fixed size (Prehistoric size engraving 🪨):

<!-- "Yabba dabba doo!" 🦖 -->
<img src="dino.jpg" alt="Dino Image" width="200" height="100">

CSS responsive (Welcome to the future 🚀):

/* "Yeah, this is Big CSS Image speaking. Lean back, I got this." 😉 */
img {
  width: 100%;
  height: auto;
}

Using HTML to outline dimensions is crucial for quick initial rendering and stability. While CSS manages scaling and styling, ensuring a flexible and adaptable presentation across different screen resolutions.

HTML: The markup masonry

For faster loading time and smoother page rendering, use HTML attributes width and height. This preallocation of space is critical in preventing layout jitters during image loading and thus improving the user experience.

<!-- "This is your captain speaking. We are ready for a smooth take-off!" ✈️ -->
<img src="airplane.jpg" alt="Airplane" width="500" height="300">

When considering accessibility, the HTML attribute alt defines alt text for images, essential for non-visual readers and inline with HTML standards.

CSS: Your stylist on standby

For scalability and responsive design, use CSS. Assign percentage-based widths or em units to image dimensions to ensure your images adjust to varying screen sizes.

Employ srcset to load different images based on the viewer's device, optimizing for both screen size and device capabilities.

<!-- "Goldilocks principle: Not too big, not too small, just right!" 🐻 -->
<img src="small-bear.jpg" 
     srcset="small-bear.jpg 500w, 
             medium-bear.jpg 1000w, 
             large-bear.jpg 2000w"
     sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
     alt="Goldilocks and Three Bears">

Lazy loading and image optimization are your trusted allies for performance improvement. Compression, WebP format, and deferred loading can significantly enhance the loading speed.

Maintainability is key

Use external CSS files and define image classes for consistency across site-wide image sizing.

/* "Congrats, you've been promoted to Standard!" 🏅 */
img.standard {
  width: 100%;
  height: auto;
}

Prioritizing CSS for defining image dimensions streamlines your styling strategy, aiding in long-term code management and maintainability.

Advanced tips for taking the lead

Use vectors (SVGs) and responsive image techniques through the HTML <picture> element, giving you scalable images that maintain clarity.

<!-- "I am adaptable like a chameleon, better watch out!" 🦎 -->
<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg">
  <source media="(min-width: 450px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="Chameleon Picture">
</picture>

For efficient delivery, utilize CDNs and automatic image optimization services.

Building your strategy

Let's consider a few scenarios:

E-commerce sites: HTML dimensions create consistency in product layouts.
News portals: Adaptive images are crucial for articles of varying lengths.
Single-page applications: Aspect ratio containers maintain proportions during dynamic interactions.
Portfolio websites: SVGs or high-resolution images enhance visual fidelity.