Let's be friends

Introduction

There are many ways you could deal with images. But one way is the best. Well, at least we think so. Let’s walk through the reality of it—step by step.

Images!

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

This image is 1000px wide. You can see that one is just doing it’s thing, and the other has the width and height presentation attributes set.

We think of “presentation attributes” as the old way to do things that just hung around after CSS came around. But we’re not entirely sure that’s the case.

Key
concept

Presentation Attributes

Presentation attributes, like align, bgcolor, fill, width, and height, control the appearance of elements directly within HTML or SVG tags. They were widely used before CSS became the standard for styling, which promotes a cleaner separation between content and design. While CSS offers more flexibility, control, and maintainability, presentation attributes still appear in SVGs as quick fallbacks for intrinsic styling. However, CSS is preferred for most styling tasks to ensure consistent, maintainable code and better control over layouts.


In this case, the width and height attributes define the dimensions of the image directly in the HTML, acting as presentation attributes. This approach was common before CSS became the standard tool for styling. (note their values have no unit)

What some people do

piccalil.li/blog/a-more-modern-css-reset

joshwcomeau.com/css/custom-css-reset

We’ve tried talking with people about it on Twitter, but they don’t seem interested in having a conversation.

What happens?

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Depending on your screen size, you might not immediately notice the problem here: max-width alone doesn’t account for the presentation width and height attributes. These attributes play a role in certain contexts, especially when browsers or readers need to anticipate the aspect ratio.

You could skip defining these attributes entirely, but we recommend planning for them. This approach becomes especially important for scenarios such as reader modes, lazy loading, or layout calculations where the browser needs to understand the intrinsic size of the element. The browser uses these dimensions to allocate space in responsive grids or when building layouts, preventing layout shifts that might occur as images load.

To establish a reasonable default, you need to account for the most common use cases as well as edge cases. Even though CSS can control the size dynamically, specifying width and height in the markup helps maintain aspect ratio consistency across all viewing modes. This avoids issues where, without defined ratios, the browser may struggle to render a clean layout, resulting in unexpected shifts.

One example is enough

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Explaining the more complex reasons isn’t something we have time for here. But this should be enough to prove the point.

Keep it simple

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Now, in some situations… (rare situations), you’d want to flip this (height/width). But we’re setting defaults for by far the most common situations.

This way, the image grows to fill the parent’s width like standard block-level elements, keeps its ratio, and always adjusts as small or large as needed.

But if you’re going to use this default… then everyone needs to know and understand it. And they need a way to constrain the size and get specific when needed.

Always use a parent

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

picture and srcset and things are for another day. But you know what’s a great parent for an img? Picture!

 

Just one thing to worry about

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

If you have this in your reset/preset/setup, then you just have to know it’s always there – and how to set a constraint.

Just let it be easy!

What do you think?

Does this approach simplify things for you? If this straightforward style resonates with you, maybe you’d enjoy learning development and design with the same mindset.

Let's be friends