4 ms·
I'm nitpicking, but When images arrive, they come tripping onto the page, pushing other elements around and triggering a clumsy repaint. This is easily avoi
by lysol 14y ago
I'm nitpicking, but
When images arrive, they come tripping onto the page, pushing other elements around and triggering a clumsy repaint.
This is easily avoided by defining the image dimensions in your stylesheet.
- sltkr 14y agoAnd when the dimensions aren't defined, then progressively encoded JPEGs don't offer an advantage either, because with both progressive and non-progressive images, browsers reserve space for images as soon as their size is known, i.e. when the file header is received.
- aerobson 14y agoAgreed. But would you say that progressive jpegs don't offer a visual advantage in this case? Imagine if a photo has a caption below it: baseline starts rendering far away from the caption, but with progressive we'll get the caption in the correct place without a big gap between the caption and where the photo is rendering. In the case of baseline, the photo will draw to "meet" the caption.
- TazeTSchnitzel 14y agoOr in the HTML.
- johncoltrane 14y agoPreferably in the HTML. Unless width="" and height="" have been deprecated on <img> overnight.
- DCoder 14y agoIf you specify width and height explicitly, certain browsers will have issues resizing them (if you set max-width: 100%, Chrome will squish a larger image horizontally but leave the height as it was, IE will scale it proportionally).
- TazeTSchnitzel 14y agoI think that's because Chrome treats width= and height= as if they were CSS. (have a look at the inspector on an element with width and height specified in the HTML)
- DCoder 14y agoThat makes sense (thank you, don't know why I didn't realize that myself), but if I override that with css height: auto; , the browser no longer reserves space for the image while loading it... quite unfortunate.
- TazeTSchnitzel 14y agoMaybe you should submit a WebKit (or possibly Chromium if this is Chrome-specific) bug for this.
- TazeTSchnitzel 14y agoDifferent use cases IMO. If it's a single image of variable size, use width and height. If there are a bunch of images, all the same size (thumbnails for instance), use CSS.
- aerobson 14y agoWhy do you say Preferably in the HTML? Just curious. I vaguely recall there was a reason.
- johncoltrane 14y agoBecause it has been the standard way for a long time. And because it allows browsers to make room for the image and avoid reflowing.