LQIP Comparison Demo

LQIP (Low Quality Image Placeholders) generates efficient placeholder previews of images with the main goal of improving the perceived loading time of image heavy websites.

This demo compares various LQIP techniques. It has been generated with a fork of sqip's excellent demo.

Learn more about this project.

Thumbnail LQIP LQIP modern webp @ 8px LQIP modern jpeg @ 8px LQIP modern webp @ 16px LQIP modern jpeg @ 16px LQIP modern webp @ 32px LQIP modern jpeg @ 32px SQIP default SQIP potrace

300px thumbnail of the original image, minified withmozjpeg

average processing time 0.060s | ø 11.5 kB | ↓ 100.00%

Generated with lqip-cli. This preview is blurred with a filter of 20px.

average processing time 0.388s | ø 887 B | ↓ 7.71%

8px webp thumbnail generated with sharp and an output quality of 20. This preview is blurred with a filter of 20px. (lqip-modern default settings)

average processing time 0.016s | ø 129 B | ↓ 1.13%

config:

{
  "outputFormat": "webp",
  "resize": 8
}

8px jpeg thumbnail generated with sharp and an output quality of 20. This preview is blurred with a filter of 20px.

average processing time 0.003s | ø 244 B | ↓ 2.12%

config:

{
  "outputFormat": "jpeg",
  "resize": 8
}

16px webp thumbnail generated with sharp and an output quality of 20. This preview is blurred with a filter of 20px. (lqip-modern default settings)

average processing time 0.012s | ø 152 B | ↓ 1.32%

config:

{
  "outputFormat": "webp",
  "resize": 16
}

16px jpeg thumbnail generated with sharp and an output quality of 20. This preview is blurred with a filter of 20px.

average processing time 0.003s | ø 274 B | ↓ 2.38%

config:

{
  "outputFormat": "jpeg",
  "resize": 16
}

32px webp thumbnail generated with sharp and an output quality of 20. This preview is blurred with a filter of 20px.

average processing time 0.013s | ø 257 B | ↓ 2.24%

config:

{
  "outputFormat": "webp",
  "resize": 32
}

32px jpeg thumbnail generated with sharp and an output quality of 20. This preview is blurred with a filter of 20px.

average processing time 0.003s | ø 347 B | ↓ 3.02%

config:

{
  "outputFormat": "jpeg",
  "resize": 32
}

Just the default settings

average processing time 1.521s | ø 510 B | ↓ 4.43%

config:

{
  "input": "path/to/file.jpg"
}

Default settings ofsqip-plugin-potrace

average processing time 0.648s | ø 6.51 kB | ↓ 56.59%

config:

{
  "input": "path/to/file.jpg",
  "plugins": [
    "potrace",
    "svgo",
    "data-uri"
  ]
}

100.00%

aaron-burden-151465-unsplash-thumbnail.jpg

Size: 300×225 (4:3)


original	37.6 kB
gzip	17.2 kB	↓55%
brotli	16.9 kB	↓55%

4.63%

aaron-burden-151465-unsplash-lqip.jpg

Size: 10×8 (5:4)


original	1.25 kB
gzip	795 B	↓37%
brotli	772 B	↓39%

0.69%

aaron-burden-151465-unsplash-lqip-modern-webp-8.webp

Size: 8×6 (4:3)


original	103 B
gzip	118 B	↓-14%
brotli	94 B	↓9%

1.40%

aaron-burden-151465-unsplash-lqip-modern-jpeg-8.jpg

Size: 8×6 (4:3)


original	391 B
gzip	241 B	↓39%
brotli	214 B	↓46%

0.84%

aaron-burden-151465-unsplash-lqip-modern-webp-16.webp

Size: 16×12 (4:3)


original	131 B
gzip	144 B	↓-9%
brotli	117 B	↓11%

1.53%

aaron-burden-151465-unsplash-lqip-modern-jpeg-16.jpg

Size: 16×12 (4:3)


original	415 B
gzip	262 B	↓37%
brotli	234 B	↓44%

2.16%

aaron-burden-151465-unsplash-lqip-modern-webp-32.webp

Size: 32×24 (4:3)


original	423 B
gzip	371 B	↓13%
brotli	344 B	↓19%

1.99%

aaron-burden-151465-unsplash-lqip-modern-jpeg-32.jpg

Size: 32×24 (4:3)


original	515 B
gzip	342 B	↓34%
brotli	317 B	↓39%

3.07%

aaron-burden-151465-unsplash-sqip.svg

Size: 300×225 (4:3)


original	1.04 kB
gzip	528 B	↓50%
brotli	482 B	↓54%

120.91%

aaron-burden-151465-unsplash-sqip-potrace.svg

Size: 300×225 (4:3)


original	59.5 kB
gzip	20.8 kB	↓66%
brotli	18.6 kB	↓69%

100.00%

anthony-esau-173126-unsplash-thumbnail.jpg

Size: 300×225 (4:3)


original	23.6 kB
gzip	10.8 kB	↓55%
brotli	10.7 kB	↓55%

7.40%

anthony-esau-173126-unsplash-lqip.jpg

Size: 10×8 (5:4)


original	1.25 kB
gzip	801 B	↓36%
brotli	783 B	↓38%

1.22%

anthony-esau-173126-unsplash-lqip-modern-webp-8.webp

Size: 8×6 (4:3)


original	115 B
gzip	132 B	↓-14%
brotli	104 B	↓10%

2.25%

anthony-esau-173126-unsplash-lqip-modern-jpeg-8.jpg

Size: 8×6 (4:3)


original	399 B
gzip	244 B	↓39%
brotli	217 B	↓46%

1.52%

anthony-esau-173126-unsplash-lqip-modern-webp-16.webp

Size: 16×12 (4:3)


original	159 B
gzip	165 B	↓-3%
brotli	136 B	↓15%

2.61%

anthony-esau-173126-unsplash-lqip-modern-jpeg-16.jpg

Size: 16×12 (4:3)


original	443 B
gzip	283 B	↓37%
brotli	259 B	↓42%

2.88%

anthony-esau-173126-unsplash-lqip-modern-webp-32.webp

Size: 32×24 (4:3)


original	347 B
gzip	312 B	↓11%
brotli	287 B	↓18%

3.42%

anthony-esau-173126-unsplash-lqip-modern-jpeg-32.jpg

Size: 32×24 (4:3)


original	547 B
gzip	370 B	↓33%
brotli	343 B	↓38%

4.79%

anthony-esau-173126-unsplash-sqip.svg

Size: 300×225 (4:3)


original	1.02 kB
gzip	519 B	↓50%
brotli	464 B	↓55%

38.03%

anthony-esau-173126-unsplash-sqip-potrace.svg

Size: 300×225 (4:3)


original	9.75 kB
gzip	4.12 kB	↓58%
brotli	3.58 kB	↓64%

100.00%

aron-visuals-974734-unsplash-thumbnail.jpg

Size: 300×375 (5:4)


original	22 kB
gzip	9.93 kB	↓55%
brotli	9.79 kB	↓56%

9.17%

aron-visuals-974734-unsplash-lqip.jpg

Size: 10×13 (13:10)


original	1.4 kB
gzip	910 B	↓35%
brotli	895 B	↓37%

1.32%

aron-visuals-974734-unsplash-lqip-modern-webp-8.webp

Size: 6×8 (4:3)


original	115 B
gzip	131 B	↓-13%
brotli	103 B	↓11%

2.48%

aron-visuals-974734-unsplash-lqip-modern-jpeg-8.jpg

Size: 6×8 (4:3)


original	399 B
gzip	246 B	↓39%
brotli	216 B	↓46%

1.49%

aron-visuals-974734-unsplash-lqip-modern-webp-16.webp

Size: 13×16 (16:13)


original	135 B
gzip	148 B	↓-9%
brotli	119 B	↓12%

2.65%

aron-visuals-974734-unsplash-lqip-modern-jpeg-16.jpg

Size: 13×16 (16:13)


original	419 B
gzip	263 B	↓38%
brotli	238 B	↓44%

2.28%

aron-visuals-974734-unsplash-lqip-modern-webp-32.webp

Size: 26×32 (16:13)


original	235 B
gzip	226 B	↓4%
brotli	197 B	↓17%

3.36%

aron-visuals-974734-unsplash-lqip-modern-jpeg-32.jpg

Size: 26×32 (16:13)


original	503 B
gzip	334 B	↓34%
brotli	310 B	↓39%

4.97%

aron-visuals-974734-unsplash-sqip.svg

Size: 300×375 (5:4)


original	990 B
gzip	493 B	↓51%
brotli	439 B	↓56%

30.25%

aron-visuals-974734-unsplash-sqip-potrace.svg

Size: 300×375 (5:4)


original	7.26 kB
gzip	3 kB	↓59%
brotli	2.62 kB	↓64%

100.00%

beach-thumbnail.jpg

Size: 300×188 (75:47)


original	13.4 kB
gzip	6.22 kB	↓54%
brotli	6.15 kB	↓55%

13.03%

beach-lqip.jpg

Size: 10×6 (5:3)


original	1.27 kB
gzip	811 B	↓36%
brotli	787 B	↓38%

2.04%

beach-lqip-modern-webp-8.webp

Size: 8×5 (8:5)


original	111 B
gzip	127 B	↓-14%
brotli	102 B	↓9%

4.07%

beach-lqip-modern-jpeg-8.jpg

Size: 8×5 (8:5)


original	407 B
gzip	253 B	↓38%
brotli	230 B	↓44%

2.35%

beach-lqip-modern-webp-16.webp

Size: 16×10 (8:5)


original	131 B
gzip	146 B	↓-11%
brotli	116 B	↓12%

4.53%

beach-lqip-modern-jpeg-16.jpg

Size: 16×10 (8:5)


original	439 B
gzip	282 B	↓36%
brotli	256 B	↓42%

3.78%

beach-lqip-modern-webp-32.webp

Size: 32×20 (8:5)


original	247 B
gzip	235 B	↓5%
brotli	207 B	↓17%

5.42%

beach-lqip-modern-jpeg-32.jpg

Size: 32×20 (8:5)


original	507 B
gzip	337 B	↓34%
brotli	313 B	↓39%

8.63%

beach-sqip.svg

Size: 300×188 (75:47)


original	1.04 kB
gzip	537 B	↓49%
brotli	484 B	↓54%

67.05%

beach-sqip-potrace.svg

Size: 300×188 (75:47)


original	10.5 kB
gzip	4.17 kB	↓61%
brotli	3.63 kB	↓66%

100.00%

charles-550068-unsplash-thumbnail.jpg

Size: 300×418 (209:150)


original	27.6 kB
gzip	12.5 kB	↓55%
brotli	12.3 kB	↓56%

7.48%

charles-550068-unsplash-lqip.jpg

Size: 10×14 (7:5)


original	1.43 kB
gzip	932 B	↓35%
brotli	912 B	↓37%

1.06%

charles-550068-unsplash-lqip-modern-webp-8.webp

Size: 6×8 (4:3)


original	119 B
gzip	132 B	↓-10%
brotli	123 B	↓-3%

1.99%

charles-550068-unsplash-lqip-modern-jpeg-8.jpg

Size: 6×8 (4:3)


original	403 B
gzip	248 B	↓39%
brotli	222 B	↓45%

1.18%

charles-550068-unsplash-lqip-modern-webp-16.webp

Size: 11×16 (16:11)


original	135 B
gzip	147 B	↓-8%
brotli	118 B	↓13%

2.26%

charles-550068-unsplash-lqip-modern-jpeg-16.jpg

Size: 11×16 (16:11)


original	439 B
gzip	281 B	↓36%
brotli	263 B	↓41%

1.96%

charles-550068-unsplash-lqip-modern-webp-32.webp

Size: 23×32 (32:23)


original	255 B
gzip	244 B	↓5%
brotli	213 B	↓17%

2.79%

charles-550068-unsplash-lqip-modern-jpeg-32.jpg

Size: 23×32 (32:23)


original	519 B
gzip	348 B	↓33%
brotli	324 B	↓38%

3.69%

charles-550068-unsplash-sqip.svg

Size: 300×418 (209:150)


original	903 B
gzip	460 B	↓50%
brotli	402 B	↓56%

32.36%

charles-550068-unsplash-sqip-potrace.svg

Size: 300×418 (209:150)


original	10.3 kB
gzip	4.03 kB	↓61%
brotli	3.59 kB	↓66%

100.00%

eric-marty-780304-unsplash-thumbnail.jpg

Size: 300×300 (1:1)


original	28.6 kB
gzip	12.9 kB	↓56%
brotli	12.7 kB	↓56%

7.34%

eric-marty-780304-unsplash-lqip.jpg

Size: 10×10 (1:1)


original	1.44 kB
gzip	944 B	↓35%
brotli	923 B	↓36%

1.04%

eric-marty-780304-unsplash-lqip-modern-webp-8.webp

Size: 8×8 (1:1)


original	119 B
gzip	134 B	↓-12%
brotli	106 B	↓11%

1.90%

eric-marty-780304-unsplash-lqip-modern-jpeg-8.jpg

Size: 8×8 (1:1)


original	403 B
gzip	244 B	↓40%
brotli	221 B	↓46%

1.09%

eric-marty-780304-unsplash-lqip-modern-webp-16.webp

Size: 16×16 (1:1)


original	127 B
gzip	140 B	↓-10%
brotli	114 B	↓11%

2.10%

eric-marty-780304-unsplash-lqip-modern-jpeg-16.jpg

Size: 16×16 (1:1)


original	427 B
gzip	270 B	↓37%
brotli	247 B	↓43%

1.78%

eric-marty-780304-unsplash-lqip-modern-webp-32.webp

Size: 32×32 (1:1)


original	239 B
gzip	229 B	↓5%
brotli	201 B	↓16%

2.69%

eric-marty-780304-unsplash-lqip-modern-jpeg-32.jpg

Size: 32×32 (1:1)


original	519 B
gzip	346 B	↓34%
brotli	320 B	↓39%

4.10%

eric-marty-780304-unsplash-sqip.svg

Size: 300×300 (1:1)


original	1.05 kB
gzip	527 B	↓50%
brotli	468 B	↓56%

54.36%

eric-marty-780304-unsplash-sqip-potrace.svg

Size: 300×300 (1:1)


original	19.1 kB
gzip	6.99 kB	↓64%
brotli	6.16 kB	↓68%

100.00%

ian-dooley-298769-unsplash-thumbnail.jpg

Size: 300×450 (3:2)


original	8.71 kB
gzip	4.04 kB	↓54%
brotli	4.04 kB	↓54%

19.69%

ian-dooley-298769-unsplash-lqip.jpg

Size: 10×15 (3:2)


original	1.25 kB
gzip	796 B	↓37%
brotli	777 B	↓38%

2.77%

ian-dooley-298769-unsplash-lqip-modern-webp-8.webp

Size: 5×8 (8:5)


original	99 B
gzip	112 B	↓-13%
brotli	89 B	↓11%

5.81%

ian-dooley-298769-unsplash-lqip-modern-jpeg-8.jpg

Size: 5×8 (8:5)


original	391 B
gzip	235 B	↓40%
brotli	209 B	↓47%

3.12%

ian-dooley-298769-unsplash-lqip-modern-webp-16.webp

Size: 11×16 (16:11)


original	111 B
gzip	126 B	↓-13%
brotli	101 B	↓10%

6.23%

ian-dooley-298769-unsplash-lqip-modern-jpeg-16.jpg

Size: 11×16 (16:11)


original	403 B
gzip	252 B	↓38%
brotli	227 B	↓44%

4.06%

ian-dooley-298769-unsplash-lqip-modern-webp-32.webp

Size: 21×32 (32:21)


original	155 B
gzip	164 B	↓-5%
brotli	135 B	↓13%

6.93%

ian-dooley-298769-unsplash-lqip-modern-jpeg-32.jpg

Size: 21×32 (32:21)


original	447 B
gzip	280 B	↓38%
brotli	257 B	↓43%

11.97%

ian-dooley-298769-unsplash-sqip.svg

Size: 300×450 (3:2)


original	978 B
gzip	484 B	↓51%
brotli	433 B	↓56%

54.50%

ian-dooley-298769-unsplash-sqip-potrace.svg

Size: 300×450 (3:2)


original	5.05 kB
gzip	2.2 kB	↓57%
brotli	1.93 kB	↓62%

100.00%

meric-dagli-487815-unsplash-thumbnail.jpg

Size: 300×450 (3:2)


original	42 kB
gzip	19 kB	↓55%
brotli	18.8 kB	↓56%

6.21%

meric-dagli-487815-unsplash-lqip.jpg

Size: 10×15 (3:2)


original	1.76 kB
gzip	1.18 kB	↓33%
brotli	1.16 kB	↓35%

0.70%

meric-dagli-487815-unsplash-lqip-modern-webp-8.webp

Size: 5×8 (8:5)


original	119 B
gzip	134 B	↓-12%
brotli	106 B	↓11%

1.27%

meric-dagli-487815-unsplash-lqip-modern-jpeg-8.jpg

Size: 5×8 (8:5)


original	399 B
gzip	242 B	↓40%
brotli	217 B	↓46%

0.94%

meric-dagli-487815-unsplash-lqip-modern-webp-16.webp

Size: 11×16 (16:11)


original	175 B
gzip	178 B	↓-1%
brotli	149 B	↓15%

1.49%

meric-dagli-487815-unsplash-lqip-modern-jpeg-16.jpg

Size: 11×16 (16:11)


original	443 B
gzip	284 B	↓36%
brotli	259 B	↓42%

1.65%

meric-dagli-487815-unsplash-lqip-modern-webp-32.webp

Size: 21×32 (32:21)


original	351 B
gzip	314 B	↓11%
brotli	286 B	↓19%

2.05%

meric-dagli-487815-unsplash-lqip-modern-jpeg-32.jpg

Size: 21×32 (32:21)


original	571 B
gzip	390 B	↓32%
brotli	363 B	↓37%

2.65%

meric-dagli-487815-unsplash-sqip.svg

Size: 300×450 (3:2)


original	1.01 kB
gzip	504 B	↓51%
brotli	446 B	↓56%

11.92%

meric-dagli-487815-unsplash-sqip-potrace.svg

Size: 300×450 (3:2)


original	5.21 kB
gzip	2.27 kB	↓57%
brotli	2 kB	↓62%

100.00%

mona-lisa-thumbnail.jpg

Size: 300×447 (149:100)


original	36.1 kB
gzip	16.4 kB	↓55%
brotli	16.2 kB	↓56%

6.40%

mona-lisa-lqip.jpg

Size: 10×15 (3:2)


original	1.59 kB
gzip	1.05 kB	↓34%
brotli	1.03 kB	↓36%

0.78%

mona-lisa-lqip-modern-webp-8.webp

Size: 5×8 (8:5)


original	111 B
gzip	128 B	↓-15%
brotli	101 B	↓10%

1.47%

mona-lisa-lqip-modern-jpeg-8.jpg

Size: 5×8 (8:5)


original	399 B
gzip	242 B	↓40%
brotli	222 B	↓45%

0.99%

mona-lisa-lqip-modern-webp-16.webp

Size: 11×16 (16:11)


original	155 B
gzip	163 B	↓-5%
brotli	133 B	↓15%

1.71%

mona-lisa-lqip-modern-jpeg-16.jpg

Size: 11×16 (16:11)


original	435 B
gzip	281 B	↓36%
brotli	257 B	↓41%

1.47%

mona-lisa-lqip-modern-webp-32.webp

Size: 21×32 (32:21)


original	255 B
gzip	242 B	↓6%
brotli	207 B	↓19%

2.20%

mona-lisa-lqip-modern-jpeg-32.jpg

Size: 21×32 (32:21)


original	535 B
gzip	362 B	↓33%
brotli	338 B	↓37%

3.23%

mona-lisa-sqip.svg

Size: 300×447 (149:100)


original	1.02 kB
gzip	531 B	↓49%
brotli	471 B	↓54%

62.82%

mona-lisa-sqip-potrace.svg

Size: 300×447 (149:100)


original	28.6 kB
gzip	10.3 kB	↓64%
brotli	9.12 kB	↓69%

100.00%

quino-al-101314-unsplash-thumbnail.jpg

Size: 300×200 (3:2)


original	16.5 kB
gzip	7.5 kB	↓55%
brotli	7.45 kB	↓55%

8.45%

quino-al-101314-unsplash-lqip.jpg

Size: 10×7 (10:7)


original	1.03 kB
gzip	634 B	↓39%
brotli	612 B	↓41%

1.71%

quino-al-101314-unsplash-lqip-modern-webp-8.webp

Size: 8×5 (8:5)


original	111 B
gzip	128 B	↓-15%
brotli	99 B	↓11%

3.27%

quino-al-101314-unsplash-lqip-modern-jpeg-8.jpg

Size: 8×5 (8:5)


original	399 B
gzip	245 B	↓39%
brotli	224 B	↓44%

2.15%

quino-al-101314-unsplash-lqip-modern-webp-16.webp

Size: 16×11 (16:11)


original	151 B
gzip	161 B	↓-6%
brotli	133 B	↓12%

3.75%

quino-al-101314-unsplash-lqip-modern-jpeg-16.jpg

Size: 16×11 (16:11)


original	439 B
gzip	281 B	↓36%
brotli	256 B	↓42%

3.45%

quino-al-101314-unsplash-lqip-modern-webp-32.webp

Size: 32×21 (32:21)


original	279 B
gzip	259 B	↓8%
brotli	228 B	↓19%

4.91%

quino-al-101314-unsplash-lqip-modern-jpeg-32.jpg

Size: 32×21 (32:21)


original	547 B
gzip	368 B	↓33%
brotli	343 B	↓38%

6.55%

quino-al-101314-unsplash-sqip.svg

Size: 300×200 (3:2)


original	936 B
gzip	491 B	↓48%
brotli	436 B	↓54%

67.96%

quino-al-101314-unsplash-sqip-potrace.svg

Size: 300×200 (3:2)


original	12.5 kB
gzip	5.1 kB	↓60%
brotli	4.44 kB	↓65%

100.00%

shane-young-769905-unsplash-thumbnail.jpg

Size: 300×300 (1:1)


original	21.8 kB
gzip	10 kB	↓55%
brotli	9.88 kB	↓55%

8.98%

shane-young-769905-unsplash-lqip.jpg

Size: 10×10 (1:1)


original	1.38 kB
gzip	898 B	↓36%
brotli	877 B	↓37%

1.48%

shane-young-769905-unsplash-lqip-modern-webp-8.webp

Size: 8×8 (1:1)


original	135 B
gzip	148 B	↓-9%
brotli	121 B	↓11%

2.46%

shane-young-769905-unsplash-lqip-modern-jpeg-8.jpg

Size: 8×8 (1:1)


original	399 B
gzip	246 B	↓39%
brotli	221 B	↓45%

1.49%

shane-young-769905-unsplash-lqip-modern-webp-16.webp

Size: 16×16 (1:1)


original	139 B
gzip	149 B	↓-7%
brotli	120 B	↓14%

2.75%

shane-young-769905-unsplash-lqip-modern-jpeg-16.jpg

Size: 16×16 (1:1)


original	431 B
gzip	275 B	↓37%
brotli	249 B	↓43%

2.35%

shane-young-769905-unsplash-lqip-modern-webp-32.webp

Size: 32×32 (1:1)


original	247 B
gzip	235 B	↓5%
brotli	209 B	↓16%

3.41%

shane-young-769905-unsplash-lqip-modern-jpeg-32.jpg

Size: 32×32 (1:1)


original	515 B
gzip	341 B	↓34%
brotli	317 B	↓39%

5.33%

shane-young-769905-unsplash-sqip.svg

Size: 300×300 (1:1)


original	1.03 kB
gzip	533 B	↓49%
brotli	498 B	↓52%

86.01%

shane-young-769905-unsplash-sqip-potrace.svg

Size: 300×300 (1:1)


original	23.3 kB
gzip	8.6 kB	↓64%
brotli	7.61 kB	↓68%