4 ms·

This reminds me of all the icky hacks "everyone" had to do going back years. (remember the star hack?) I am not going to do this. This is such a pervasive issu

This reminds me of all the icky hacks "everyone" had to do going back years. (remember the star hack?) I am not going to do this. This is such a pervasive issue, and with an _endless_ difference in screen sizes and millions of pages of content... not going to happen. This kind of problem is exactly what the browser is best at solving. A problem everyone has on most pages on the internet.

throwanem 7y ago
Refusing to specify your image sizes denies the browser the information it needs to solve this problem.
- RobertRoberts 7y ago
  Maybe, but I think this is a solvable problem from the browsers perspective. In my experience building websites the need for image dimensions is near zero. 1. The penalty for not displaying image dimensions is nearly insignificant because almost _all_ images that you would put width/height on are from content managers, not designers. 2. Mobile content: On a phone the content moves down after the image is loaded. (everything is just a single column) Which is a preferable action than a big empty space. So, I prefer _not_ including dimensions on user content for phones. 3. Responsive design: All CSS I have been using for years now has "max-width:100%". Therefore (since a lot of traffic is mobile) most (rough guess) of images loaded from sites I've worked on the image dimensions are recalculated as soon as the image is loaded anyway. 4. Srcset: Multiple possible images downloaded that are _chosen_ by the browser at run time. You already have to provide dimensions. But what if they aren't exact? Go back to #1. 5. Web design: I can't even recall the last time I put an image in a design using the <img> tag that affected layout. (maybe if you go back to the 90s this would have mattered)
labawi 7y ago
Instead of specifying how big your images are in html (or css), you are proposing the browser should magically guess how big your images are going to end up? Or should it not render anything until all your needless images are downloaded? Is there an actual problem in identifying what images correspond to your markup and adding an appropriate attribute? (asking, not a web dev) AFAICT the problem is solved, this is the necessary protocol - not even a bad one, use it and it will work.
- RobertRoberts 7y ago
  If you can give the browser the image size with JS, then the browser can figure it out on it's own. Rarely do we specify the width of many, many objects and they display just fine. (consider tables)
  - labawi 7y ago
    By adding an attribute I meant server side, not client-side if that's what you mean. If you defer (down)loading of images, and layout depends on unavailable size/aspect-ratio of an image, you get layout updates - same would happen if you lazy-loaded contents of tables. What is the problem you would like solved and what do you propose for the browsers to do? Ancestor post was about avoiding layout changes as new layout-critical information arrives. Judging by your sibling comment, you seem to prefer layout updates with content popping up.
    - RobertRoberts 7y ago
      Using the width/height value on an <img> tag feels simply archaic and more importantly doesn't add value to the site visitor. Why? 1. srcset [0]: the browser chooses the size of the image, not the server. 2. CSS/Responsive images [1] : Almost all (I am close to saying 100%) of images I have loaded on websites have their width/height adjusted by CSS. Layout updates are often unavoidable in most circumstances surrounding images, there is just no getting around it. So instead of pining over the past, we should adapt for the future. I feel like this argument is the same I had with print designers in the late 90s who made every page a full image because they couldn't handle not having full control over the layout. [0] https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageEl... [0b] https://cloudfour.com/thinks/responsive-images-101-part-8-css-images/ https://cloudfour.com/thinks/responsive-images-101-part-8-cs... [1] https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimed...

throwanem 7y ago

Refusing to specify your image sizes denies the browser the information it needs to solve this problem.

RobertRoberts 7y ago
Maybe, but I think this is a solvable problem from the browsers perspective. In my experience building websites the need for image dimensions is near zero. 1. The penalty for not displaying image dimensions is nearly insignificant because almost _all_ images that you would put width/height on are from content managers, not designers. 2. Mobile content: On a phone the content moves down after the image is loaded. (everything is just a single column) Which is a preferable action than a big empty space. So, I prefer _not_ including dimensions on user content for phones. 3. Responsive design: All CSS I have been using for years now has "max-width:100%". Therefore (since a lot of traffic is mobile) most (rough guess) of images loaded from sites I've worked on the image dimensions are recalculated as soon as the image is loaded anyway. 4. Srcset: Multiple possible images downloaded that are _chosen_ by the browser at run time. You already have to provide dimensions. But what if they aren't exact? Go back to #1. 5. Web design: I can't even recall the last time I put an image in a design using the <img> tag that affected layout. (maybe if you go back to the 90s this would have mattered)

labawi 7y ago

Instead of specifying how big your images are in html (or css), you are proposing the browser should magically guess how big your images are going to end up? Or should it not render anything until all your needless images are downloaded? Is there an actual problem in identifying what images correspond to your markup and adding an appropriate attribute? (asking, not a web dev) AFAICT the problem is solved, this is the necessary protocol - not even a bad one, use it and it will work.

RobertRoberts 7y ago
If you can give the browser the image size with JS, then the browser can figure it out on it's own. Rarely do we specify the width of many, many objects and they display just fine. (consider tables)
- labawi 7y ago
  By adding an attribute I meant server side, not client-side if that's what you mean. If you defer (down)loading of images, and layout depends on unavailable size/aspect-ratio of an image, you get layout updates - same would happen if you lazy-loaded contents of tables. What is the problem you would like solved and what do you propose for the browsers to do? Ancestor post was about avoiding layout changes as new layout-critical information arrives. Judging by your sibling comment, you seem to prefer layout updates with content popping up.
  - RobertRoberts 7y ago
    Using the width/height value on an <img> tag feels simply archaic and more importantly doesn't add value to the site visitor. Why? 1. srcset [0]: the browser chooses the size of the image, not the server. 2. CSS/Responsive images [1] : Almost all (I am close to saying 100%) of images I have loaded on websites have their width/height adjusted by CSS. Layout updates are often unavoidable in most circumstances surrounding images, there is just no getting around it. So instead of pining over the past, we should adapt for the future. I feel like this argument is the same I had with print designers in the late 90s who made every page a full image because they couldn't handle not having full control over the layout. [0] https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageEl... [0b] https://cloudfour.com/thinks/responsive-images-101-part-8-css-images/ https://cloudfour.com/thinks/responsive-images-101-part-8-cs... [1] https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimed...