Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリです。このライブラリはとても軽量です。具体的には、プログレッシブ形式を使用して画像を表示します。プログレッシブ形式とは、画像の解像度を低く表示して、徐々に高解像度（細かい画像）で表示する方式のことです。対比するのが、ベースライン形式での表示で、元の画像を徐々に読み込む方式です。
こちらの方が一般的ですが、容量の重い画像ですと、画像の表示まで時間がかかる場合があります。それを解決してくれるのがPilpilということです！詳しく見ていきましょう。
Pilpil
Pilpilの実際のデモは以下になります。
Pilpilの具体的な挙動ですが、ページ読み込みの際、画像にぼかし効果が使用され、すべての読み込みが完了すると本来の画像が表示されるというものです。たとえば、画像サイズがMB級のものを表示させたい場合や、多くの画像を表示させることでサイト自体が重たくなってしまう場合などに効果的なJSライブラリです。
どこに画像が表示されるのかが、あらかじめユーザーにも分かりやすく伝わり、ユーザーに優しい設計がされたサイトに近づけます。画像の読み込みに時間がかかると、「もういいや」とページを離脱する可能性も高くなります。そんな時には、このPilpilを活用しましょう。
ダウンロードしたPilpilのファイルにある、「pilpil.css」と「pilpil.js」を必ず読み込んでください。
構造はいたってシンプルです。最初に小さいもの（低解像度）が、最終的に本来の画像（高解像度）が表示されるといったイメージです。実装方法もとても簡単です。小さめの画像（低解像度）と本来の画像（高解像度）の2つを準備し、それぞれを読み込み［figure class］でまとめます。具体的な読み込み形式は、プラグインサイトで丁寧に記載されています。
これだけで基本的な作業は終わりです。あとは、Pilpilにすべておまかせです。これでユーザーのストレスは解消ですね。
Pilpilのダウンロードや詳しい使い方は以下からどうぞ。
