Pilpil

JavaScript

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

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

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

Pilpil

デモ

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

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

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

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

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

Pilpil

関連記事

  1. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  2. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  3. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  4. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  5. no-image

    JavaScript

    あらかじめ設定したリストなどから複数タグを選択できる「Tokenize2」

    Tokenize2は、あらかじめ設定したリストやAjaxから複数のタグ…

  6. sticky-items

    JavaScript

    HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」

    sticky-itemsは指定したHTML要素をWebページの上部に付…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP