4 ms·

Please don't make me (as a designer) know what the exact width of an image is, ahead of time.

by pcunite 10y ago

humbledrone 10y ago
Please don't make me (as a user) deal with pages that re-flow every three seconds as images load, pushing the paragraph I was reading off-screen.
- kevingadd 10y ago
  The size of an image is in the header right at the front, so arguably it's not that hard to avoid the reflow. Just prefetch the headers. This is already done for video files and audio files that have the relevant info. It's still ideal to put the sizes inline if you can, though.
  - kevingadd 10y ago
    For the people who are downvoting, some more details on how this would work from a person who actually works on web platforms and standards: Along with crypto and improved compression, HTTP2 offers multiplexing. HTTP also has historically offered range requests, where you can request a small subrange of a file. This means that a browser could collect image URLs when doing its initial parse of the page (pretty easy, since you want a small, simple page for AMP anyway) and then issue a set of requests for the headers of all the images - for PNG, at least, you know the header will be of known, relatively small size. The header requests can all be multiplexed by HTTP2, which means that you will be able to get all the headers before you start getting the full bodies of the images. You won't have to download the headers or images twice since you can download the rest of the image bodies with another range request. Range requests could also be cached under this scenario. This optimization can be implemented (in theory) by every browser engine and doesn't require changes to developers' content or web servers. And it would be an improvement that is web-wide instead of just focused on AMP.
    - querulous 10y ago
      you can do even better with http2. on a request to get a page the server can just optimistically send the image headers to the client up front with the page text then backfill the image bodies in whatever order the client wants
      - kevingadd 10y ago
        Oh yeah, I forgot about server-driven preloading. There's some great stuff in HTTP2, thanks for pointing it out!
    - cramforce 10y ago
      This already happens, but the extra roundtrip still kills performance. Not having to make an extra HTTP request is the only way to get good performance in this case.
kevingadd 10y ago
The result of this will probably be websites doing even more work on the server to conform to the requirements of AMP, which if done correctly will increase request latency. Then the AMP developers get to look at their (client-side) metrics and go look how much smaller we made our numbers! (I still think AMP is a good idea, but side-effects need to be considered at scale) An ideal solution for simple pages would be to run a build tool before deployment that adds width/height attributes to all your image tags by checking the files. You could probably do this pretty easily before minification.
tomjen3 10y ago
Unfortunately as a user I either have to deal with tons of reflows as the page loads or make you specify the image size up front. Since you know what the size of the image is, the last part doesn't seem that big of a deal.
- AstralStorm 10y ago
  It is usually not the images that cause the reflows, but the unsized containers for actual contents. Also reflowing paragraphs of text. No, you should not have to specify sizes of every span in existence of insert manual line breaks. That makes the pages just fall to render properly on current multitude of screen sizes.
cramforce 10y ago
This would typically be added by a CMS or similar software. Note, that only the aspect ratio is required (including support for media queries), so you don't have to know actual pixels which may be device specific.

Please don't make me (as a designer) know what the exact width of an image is, ahead of time.

by pcunite 10y ago

Please don't make me (as a designer) know what the exact width of an image is, ahead of time.

Please don't make me (as a user) deal with pages that re-flow every three seconds as images load, pushing the paragraph I was reading off-screen.

kevingadd 10y ago
The size of an image is in the header right at the front, so arguably it's not that hard to avoid the reflow. Just prefetch the headers. This is already done for video files and audio files that have the relevant info. It's still ideal to put the sizes inline if you can, though.
- kevingadd 10y ago
  For the people who are downvoting, some more details on how this would work from a person who actually works on web platforms and standards: Along with crypto and improved compression, HTTP2 offers multiplexing. HTTP also has historically offered range requests, where you can request a small subrange of a file. This means that a browser could collect image URLs when doing its initial parse of the page (pretty easy, since you want a small, simple page for AMP anyway) and then issue a set of requests for the headers of all the images - for PNG, at least, you know the header will be of known, relatively small size. The header requests can all be multiplexed by HTTP2, which means that you will be able to get all the headers before you start getting the full bodies of the images. You won't have to download the headers or images twice since you can download the rest of the image bodies with another range request. Range requests could also be cached under this scenario. This optimization can be implemented (in theory) by every browser engine and doesn't require changes to developers' content or web servers. And it would be an improvement that is web-wide instead of just focused on AMP.
  - querulous 10y ago
    you can do even better with http2. on a request to get a page the server can just optimistically send the image headers to the client up front with the page text then backfill the image bodies in whatever order the client wants
    - kevingadd 10y ago
      Oh yeah, I forgot about server-driven preloading. There's some great stuff in HTTP2, thanks for pointing it out!
  - cramforce 10y ago
    This already happens, but the extra roundtrip still kills performance. Not having to make an extra HTTP request is the only way to get good performance in this case.

kevingadd 10y ago

The result of this will probably be websites doing even more work on the server to conform to the requirements of AMP, which if done correctly will increase request latency. Then the AMP developers get to look at their (client-side) metrics and go look how much smaller we made our numbers! (I still think AMP is a good idea, but side-effects need to be considered at scale) An ideal solution for simple pages would be to run a build tool before deployment that adds width/height attributes to all your image tags by checking the files. You could probably do this pretty easily before minification.

tomjen3 10y ago

Unfortunately as a user I either have to deal with tons of reflows as the page loads or make you specify the image size up front. Since you know what the size of the image is, the last part doesn't seem that big of a deal.

AstralStorm 10y ago
It is usually not the images that cause the reflows, but the unsized containers for actual contents. Also reflowing paragraphs of text. No, you should not have to specify sizes of every span in existence of insert manual line breaks. That makes the pages just fall to render properly on current multitude of screen sizes.

cramforce 10y ago

This would typically be added by a CMS or similar software. Note, that only the aspect ratio is required (including support for media queries), so you don't have to know actual pixels which may be device specific.