Fluid images in Chrome: how to avoid repaint?

Question

I'm working on a photography site with a lot of images and they have no fixed height and width as I want this site to be 100% fluid: how do you work around the ugly Chrome repaint of the images? (i.e. Images are first displayed at zero height and then rescaled to their final size moving around the entire layout)

I've tried pretty much everything and my last option is to hide the image repaint with a black div and then set its opacity to 0 when images are finished loading (BTW, I've tried this with a (document).ready call but it seems too soon: how would you do it?)

Zhianc · Answer 1 · 2011-11-17T12:09:21.493

3

Specify your image's height and width attribute / its dimensions.

<img src="img.jpg" width="125" height="60" alt="My First Photograph ever">

This helps the browser avoid a second pass to layout your page and it optimizes page load as well! :)

edited Nov 17 '11 at 12:09

answered Nov 17 '11 at 11:47

Zhianc

1,411
3
20
37

This is how I would do it too. This makes the blank space before the image is rendered the correct size. – jimplode Nov 17 '11 at 11:49
1

Well, that pretty much defeats the purpose of having flexible images! – teolives Nov 17 '11 at 15:05
@teolives don't forget to mark this as ur answer if it solved ur problem. THanks! – Zhianc Nov 22 '11 at 22:41

score 1 · Answer 2 · answered Dec 16 '13 at 19:14

I know I am more than two years late, but how about the practice suggested here?

<div class="embed-container ratio-16-9">
      <img src="imgage.jpg"/>
</div>


.embed-container {
    position: relative;   
    height: 0;
    overflow: hidden;
    background-color:black;  
}

.ratio-16-9{
    padding-bottom:56.25%; /* 9/16*100 */
}

.ratio-4-3{
    padding-bottom:75%; /* 3/4*100 */
}

.ratio-1-1{
padding-bottom:100%; /* ... */

Also, an important remark from the comments section to pay attention to, and improve upon the original technique:

Nice trick. However, if I was you, I would replace the "img" tag with a background image on your div (and background-size: cover or contain). That would avoid you the position trick, the overflow trick, and a lot of work for the browser.

I hope someone will find this useful.

score 1 · Answer 3 · answered Nov 17 '11 at 12:11

1

Chrome (or any browser really) cannot avoid this 'repainting', since they don't know on forehand what size your images will be.

Thus, you will need to explicitly specify the sizes of your images, either in the image width and height properties itself, or via CSS.

answered Nov 17 '11 at 12:11

Willem Mulder

12,974
3
37
62

I disagree, only webkit browsers seem to start with 0 height during rendering: FF, IE, opera, all save room for the pictures without rescaling the entire layout. – teolives Nov 17 '11 at 15:09

score 0 · Answer 4 · answered Mar 24 '12 at 05:51

It’s hard to test, but you could try setting width/height in CSS

img {display: block; width: 100%; height: auto;}

if you want the images to be full-width. This might prevent a full-page repaint, but of course there’ll be some repaint regardless as images load. You can also investigate what’s happening with Chrome’s --show-paint-rects

Hope that helps

Fluid images in Chrome: how to avoid repaint?

4 Answers4