[GBKS]

The best way to avoid this altogether is to set the image width and height in the img tag. That way, content can be shown right away, even before the images are loaded.

Another thing to be careful with are social buttons, whose height may change after the initial item is rendered. That's easily avoided with a fixed CSS height, though.

[kennethlove]

Yes. We specify a height and width in the HTML and the CSS, but it's still nice to pay attention to the images' loaded status.

[danso]

It depends on the backend workflow, no? If your system pulls in images and does the resizing, including the determination of horizontal vs. vertical, then outputting defined css selectors is straightforward.

However, if you're only in control of the front-end and are just reading from an API of photos where you're given a stream of image urls...how do you determine which css-selector (i.e. '.vert-image' and 'horz-image' with defined h/w dimensions) to put out? You can obviously just restrict everything to a one-size box, but either the vertical or the horizontal images are going to be given short shrift.