3 ms·

Back in the day you sized your image for the web, there was no need for dimensions in img tags > For example, vanilla `<img>` will ship the same image to every

by tomc1985 6y ago

Back in the day you sized your image for the web, there was no need for dimensions in img tags > For example, vanilla `<img>` will ship the same image to every device, As it should be, for simplicity's sake. Designers trying to assert pixel-perfect control of layout is part of why the web sucks so much today. Let the browser handle layout, that is one of the things it is designed to do!

pastjean 6y ago
Well on my low latency nordic cellphone connection, it's always nice to receive a lower resolution image. Especially if I don't have the resolution to display it
- onion2k 6y ago
  It would be good if more browsers and websites implemented the prefer- reduced-data setting that Chrome and Edge have right now, but you do have that option in Chrome for Android right now. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
onion2k 6y ago
Designers trying to assert pixel-perfect control of layout is part of why the web sucks so much today. Sending a high resolution image to a user with a low pixel density display is wasting their bandwidth and battery. Sending a low resolution image to a user with a high pixel density display isn't giving them the good experience they paid for when they bought a high end device. Optimization is about giving all the users the best experience you can on a website. It doesn't necessarily change the design at all.
deleted 6y ago
[deleted]
fouric 6y ago
Removing the dimensions from the image tags is absolutely the wrong thing to do. If you do this, then a browser/user/client that wants that information simply doesn't have it - you can't create bits from thin air. If you leave the metadata in, then any browser that wants it can use it, and any brower that doesn't want it can ignore it. I can code up a Greasemonkey script in a few minutes that will strip the width and height attributes from img tags, but nobody on earth can write a script that will magically detect what size the author wants them to be if they don't send that data to you.
- tomc1985 6y ago
  They do, you can read the size data from the image file itself before you render it
  - fouric 6y ago
    They do not. The width and height attributes we have been discussing set the size that the image will be displayed at, which are not necessarily the size of the image transferred. Those are two very different things. My statement holds - if an image has size (a, b), but the author wants it to render at size (c, d) but does not send that data, the client has no way of magically determining c and d. Furthermore, even when the actual image size is the same as the width and height attributes, there's the obvious problem of you needing to completely transfer the image itself before determining the size, which blocks rendering (or forces you to re-compute layout a second time, which both increases latency and decreases throughput).

pastjean 6y ago

Well on my low latency nordic cellphone connection, it's always nice to receive a lower resolution image. Especially if I don't have the resolution to display it

onion2k 6y ago
It would be good if more browsers and websites implemented the prefer- reduced-data setting that Chrome and Edge have right now, but you do have that option in Chrome for Android right now. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

onion2k 6y ago

Designers trying to assert pixel-perfect control of layout is part of why the web sucks so much today. Sending a high resolution image to a user with a low pixel density display is wasting their bandwidth and battery. Sending a low resolution image to a user with a high pixel density display isn't giving them the good experience they paid for when they bought a high end device. Optimization is about giving all the users the best experience you can on a website. It doesn't necessarily change the design at all.

deleted 6y ago

[deleted]

fouric 6y ago

Removing the dimensions from the image tags is absolutely the wrong thing to do. If you do this, then a browser/user/client that wants that information simply doesn't have it - you can't create bits from thin air. If you leave the metadata in, then any browser that wants it can use it, and any brower that doesn't want it can ignore it. I can code up a Greasemonkey script in a few minutes that will strip the width and height attributes from img tags, but nobody on earth can write a script that will magically detect what size the author wants them to be if they don't send that data to you.

tomc1985 6y ago
They do, you can read the size data from the image file itself before you render it
- fouric 6y ago
  They do not. The width and height attributes we have been discussing set the size that the image will be displayed at, which are not necessarily the size of the image transferred. Those are two very different things. My statement holds - if an image has size (a, b), but the author wants it to render at size (c, d) but does not send that data, the client has no way of magically determining c and d. Furthermore, even when the actual image size is the same as the width and height attributes, there's the obvious problem of you needing to completely transfer the image itself before determining the size, which blocks rendering (or forces you to re-compute layout a second time, which both increases latency and decreases throughput).