Plaiceholder - 画像をぼかしてプレイスホルダー化 // MOONGIFT Archived

Webサイトやアプリのデザインを考える際に使われるのがプレイスホルダーと呼ばれるモック的な画像です。単純にサイズを明記しただけのものもありますが、多少は情報があった方がそれっぽくなります。今回紹介するPlaiceholderは既存の画像をベースにプレイスホルダー化するライブラリです。

Plaiceholderの使い方

画像をぼかしてプレイスホルダーにします。

モザイクのサイズを粗くした場合。

CSS設定で設定方法を取得できます。

Plaiceholderの結果はCSSの他、SVGやBASE64、ReactのcreateElementなどで取得できます。CSSであれば元の画像によらず適用できるので、自由な画像を当てはめつつも、ぼかすことで情報量を下げるという使い方が可能です。

PlaiceholderはTypeScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。