Use of rem, em and px on image dimensions

Question

I'm looking for some explanation regarding these units' use on image dimensions, but can't find any. I've read in some places to forget about pixels and use only rem/em, but I don't know if it's also applied for images dimensions (width/height).

For example, which one should I use in this case below?

<img src="https://i.imgur.com/NReN4xE.png" style="width: 5rem;" />5rem<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 5em;" />5em<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 100px;" />100px<br>

I don't think it is a duplicate as it asks for the use of rem, em and px on images (although similar) where that only covers two of the three units. A handy read nevertheless. — NickZA, May 24 '19 at 20:24
Hmmm, you're right. Potential duplicate but that answer is over explained. — NickZA, May 24 '19 at 20:30
Which one makes your image appear the way you want it to appear? Use that one. — Heretic Monkey, May 24 '19 at 20:34
@AdamBuchananSmith I only found an answer about the image use and it's from 2015, 4 years ago. I'm asking because I don't know if anything has changed until now. Bootstrap, for example, started adopting `rem/em` instead of `px` 2 years ago. — Luiz, May 24 '19 at 20:47
@HereticMonkey you mean `px`? But isn't `rem/em` the same when "converting its size to px"? There might be a "deeper" explanation for its use. — Luiz, May 24 '19 at 20:51
@Luiz, have a look at my answer - hopefully it makes sense but at the end of the day, you are right: it is computed as `px` anyways. `em`/`rem` give you control of the size from different levels within the DOM (by changing the root element and all children change too). It's valuable in some cases but `px` is perfectly fine! — NickZA, May 24 '19 at 20:55

score 6 · Accepted Answer · answered May 24 '19 at 20:47

px renders the pixel value
rem uses the root element (html) using its font-size as the base (16px by default) to calculate its size, so basically your rem value from img multiplied by the font-size on html
em uses the first parent with a font-size to calculate the size it needs to render (calculated the same as rem above - parent computed px value multiplied by your em). If a that parent is using em in its font-size, the child will use the computed/calculated font-size of the parent.

Explanation can be tough to grasp (especially em), have a look here: https://jsfiddle.net/6ydf931w/

For the most part, I tend to avoid using em for almost everything because it can result in unexpected results if you are not permanently aware of where it is used.

I usually limit rem to text in the event it needs to be changed globally.

px is very predictable, if this works for you, there is no harm in using it.

`em` may be a bit confusing as I've explained, although it makes sense to me, refactoring welcomed! — NickZA, May 24 '19 at 20:48

score 2 · Answer 2 · answered May 24 '19 at 20:34

Many CSS properties take "length" values, such as width, margin, padding, font-size, etc. Length is a number followed by a length unit, such as 10px, 2em, etc.

**(px)**The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums. em Relative to the font-size of the element rem Relative to font-size of the root element

Use REMs for sizes and spacing. Use EMs for media queries.

In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have.

score 2 · Answer 3 · answered May 24 '19 at 20:52

It's a better practice to use rem instead of pixels if you want a responsive website. This is because pixel is an absolute unit while rem is a unit relative to your root's font-size.

Imagine that you have all your elements in pixels and want to scale everything when your window is smaller. If you had pixels you would have to change everything one by one. However with rem you can change your root's font size and everything is scaled all at once.

Try changing the font size in the example below and see by yourself:

html{
      font-size: 30px;
    }

.pixel1{
      width: 30px;
      height: 30px;
      background-color: red;
      margin-bottom: 10px;
}

.pixel2{
      width: 40px;
      height: 40px;
      background-color: red;
      margin-bottom: 10px;
}

.rem1{
      width: 1rem;
      height: 1rem;
      background-color: blue;
      margin-bottom: 10px;
}

.rem2{
      width: 1.4rem;
      height: 1.4rem;
      background-color: blue;
}

<div class="pixel1"></div>
<div class="pixel2"></div>
<div class="rem1"></div>
<div class="rem2"></div>

score 1 · Answer 4 · answered May 24 '19 at 21:20

Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. If you use a value of 1em or 1rem, it could translate in the browser as anything from 16px to 160px or any other value.

px values are used by the browser as is, so 1px will always display as exactly 1px.

Translation of rem units to pixel value is determined by the font size of the html element.

Translation of em units to pixel values is determined by the font size of the element they’re used on. Use em units for sizing that should scale depending on the font size of an element other than the root.Use rem units for sizing that doesn’t need em units, and that should scale depending on browser font size settings.Use rem units on media queries

Use of rem, em and px on image dimensions

4 Answers4