Pilpil.js

Progressive Image Loading



Have you noticed how images load on my website? If not, refresh the page and take a look. Pay attention to those three large images — they load instantly, right?


The story behind pilpil.js

Back in 2015, I first noticed how Medium smoothly loads their images. The seamless experience left me wondering — how do they do it? I was fascinated by the way they managed large images without causing any noticeable lag.

I couldn’t let it go. So, I started digging into the techniques and algorithms behind image loading. After months of experimenting, I created pilpil.js — a library designed to help load large images quickly and efficiently, just like what I saw on Medium.

The name Pilpil comes from Progressive Image Loading (PIL). I repeated it twice — Pil + Pil = Pilpil — because I liked how it sounded and wanted to highlight the process.

Pilpil.js uses advanced techniques to load images smoothly, improving user experience and reducing load times. It’s simple, yet effective, and it's now part of how I optimize my websites!

Why pilpil.js matters

It's the best way to load an image.

  • No dependencies. Pure JavaScript.
  • Progressive image loading with a blur effect.
  • Reduce page loading time.
  • Better user experience.
  • Wow.

Give it a try on your website and see the difference!

Bonus tips

However, keep in mind that pilpil.js doesn’t save you in the real world — image optimization starts with how you save your images.

You need to make sure your images are properly optimized before you even load them on your site. I’ll show you how you can optimize them manually!

Below, I’ve provided three image sources:

  • ~cdn-medium
  • ~figma
  • ~adobe-photoshop

Take a look at the size differences between them! The smaller the image file, the faster your image will load.

241.82 KB ~ cdn-images
1.07 MB ~ figma
97.48 KB ~ adobe
3.83 MB ~ cdn-images
3.50 MB ~ figma
365.66 KB ~ adobe
89.35 KB ~ cdn-images
436.35 KB ~ figma
122.11 KB ~ adobe

Final thoughts

pilpil.js makes image loading smooth, but proper image optimization is key for fast websites. If you need help with pilpil.js or optimizing your images, feel free to reach out — I’m happy to help!

And if you like pilpil.js, a star on the GitHub repo is much appreciated!

Tabaq
Zafree, available for hire
Hire me
I’m a designer who codes, very much focused on design, and design implementation. I like to work with the core technologies such as HTML, CSS, JavaScript, but there’s a good chance I’m using the latest frameworks like React, React-native, or any.

Read more