Pilpil

JavaScript

プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリです。このライブラリはとても軽量です。具体的には、プログレッシブ形式を使用して画像を表示します。プログレッシブ形式とは、画像の解像度を低く表示して、徐々に高解像度(細かい画像)で表示する方式のことです。対比するのが、ベースライン形式での表示で、元の画像を徐々に読み込む方式です。

こちらの方が一般的ですが、容量の重い画像ですと、画像の表示まで時間がかかる場合があります。それを解決してくれるのがPilpilということです!詳しく見ていきましょう。

Pilpil

デモ

Pilpilの具体的な挙動ですが、ページ読み込みの際、画像にぼかし効果が使用され、すべての読み込みが完了すると本来の画像が表示されるというものです。たとえば、画像サイズがMB級のものを表示させたい場合や、多くの画像を表示させることでサイト自体が重たくなってしまう場合などに効果的なJSライブラリです。

どこに画像が表示されるのかが、あらかじめユーザーにも分かりやすく伝わり、ユーザーに優しい設計がされたサイトに近づけます。画像の読み込みに時間がかかると、「もういいや」とページを離脱する可能性も高くなります。そんな時には、このPilpilを活用しましょう。

ダウンロードしたPilpilのファイルにある、「pilpil.css」と「pilpil.js」を必ず読み込んでください。

構造はいたってシンプルです。最初に小さいもの(低解像度)が、最終的に本来の画像(高解像度)が表示されるといったイメージです。実装方法もとても簡単です。小さめの画像(低解像度)と本来の画像(高解像度)の2つを準備し、それぞれを読み込み[figure class]でまとめます。具体的な読み込み形式は、プラグインサイトで丁寧に記載されています。

これだけで基本的な作業は終わりです。あとは、Pilpilにすべておまかせです。これでユーザーのストレスは解消ですね。

Pilpil

関連記事

  1. Salvattore
  2. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

  3. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  4. ajSlider

    JavaScript

    シンプルでさりげないアニメーションが素敵なスライドショー実装「ajSlider」

    ajSliderはシンプルなスライドショーを実装することができるjQu…

  5. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  6. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP