favorite twitter linkedin chevron-right

Lazy loading with responsive images and unknown height

I love asynchronous objects, they speed up page loading and limit the net usage as lazy loading images does, and this is a must especially on mobile.

But one of the problems I encountered using lazy load plugins is due to the required width and height you should set to each image to get the plugin to work properly, without these sizes, in fact, it could cause flashing on images causing an unpleasant effect and give the user the perception that the page is loaded more slowly.

This is what I mean:

lazyload images bad

To avoid to config any height/width attribute and get the blank images to maintain its aspect ratio also on responsive images, then by size in percentage, you can take advantage of the behavior that have some CSS properties applied to elements, for example padding-bottom, where value can be expressed as a percentage. W3 tells us:

The percentage is calculated with respect to the width of the generated box’s containing block.

With really few rows of code we can solve the problem giving to the page the right structure before the lazy load does its job, and this is what I want to achieve:

lazyload images good

So this is the trick:


<a class="thumb lazy-container" href="#">
 <img class="lazy" data-original="image.jpg" alt="">


.lazy-container {
 display: block;
 position: relative;
 height: 0;

.post .lazy-container {
 padding-bottom: 55.3%;

.lazy-container img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
  • .lazy-container: is the class with which I will wrap all my images. This rule place the height to 0 because I will set the right height through the padding-bottom trick (for reusability I’ll put the padding bottom in a separate rule). And set it as relative because its content will be absolute.
  • .post .lazy-container: it’s specific for all images of type “post”, because I assume each set of images has a different ratio, so you need to create a new rule with different padding-bottom of each set of images with same size. Here I set the padding-bottom in percentage respect the width.
  • .lazy-container img: it’s the content, the image that will be replaced by a lazy loading plugin. How you can see the image get an absolute positioning and get the width and height of its parent.

In the example is configured a padding-bottom of 55.3% that is equal to a box of 487×280 pixel, simply with a single value that is aspect-ratio. And here is the formula to get the value:

Padding-bottom = (Height ÷ Width) × 100;

No more flashes on lazy loaded images.


  • Thank you for the inspiration.I remember putting transparent pngs into the container to keep aspect ratio. Thats “ok” (not really), when you have several pictures with the same aspect ration but it falls apart if you need to have pngs for many different ratios because there is one additional request multiplied by your ratios. Did you test this on different devices?

    • Sure it’s pretty supported. I use this technique every time I have to deal with fixed ratio.

  • This technique is a beast. It works for videos and other embeds too. I’d like to show you a lazy loading library that I’ve written and uses this technique. It’s also SEO friendly. Take a look at http://ivopetkov.com/b/lazy-load-responsive-images/

  • Awesome post. You save my time. Thanks a lot.

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>