Liquid images in Chrome: how to avoid redrawing?

Question

I am working on a photographic site with a large number of images, and they do not have a fixed height and width, since I want this site to be 100% liquid: how do you work around the ugly redrawing of images? (that is, the images are first displayed at zero height, and then scaled to their final size, moving around the entire layout).

I tried almost everything, and my last option is to hide the redrawing of the image using a black div, and then set its opacity to 0 when the image loading finishes (BTW, I tried this with a (document). But it seems too early: as if did you do it?)

Answer 1

Specify the height and width attribute of the image / its dimensions.

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

This helps the browser to avoid a second pass to place its page, and it optimizes page loading! :)

Answer 2

Chrome (or any browser really) cannot avoid this “repainting,” since they don’t know what value your images will be on.

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

Answer 3

Its hard to check, but you can try setting the width / height in CSS

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

if you want the images to be complete. This may interfere with full-page redrawing, but, of course, they will be redrawn regardless of image loading. You can also explore what happens with Chromes --show-paint-rects

Hope that helps

Answer 4

I know I'm two years late, but what 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%; /* ... */ 

In addition, an important note from the comments section to which you should pay attention, and improve the original technique:

Good trick. However, if I were you, I would replace the "img" tag with a background image on your div (and background-size: cover or contains). This avoids the position trick, the overflow trick, and a lot of work for the browser.

I hope someone finds this helpful.