SVGをプレースホルダーとして使用する

画像からSVGを生成することは、プレースホルダーに使用できます。



迅速なダウンロードのために画像と写真を最適化しています。 最も興味深い研究分野の1つはプレースホルダーです。画像がまだ読み込まれていないときに何を表示するかです。



最近、SVGを使用するいくつかのブート方法に出くわしました。この投稿でそれらを説明したいと思います。



この投稿では、次のトピックについて説明します。

• さまざまなタイプのプレースホルダーの概要
• SVGベースのプレースホルダー（概要、形状、シルエット）
• プロセス自動化。

---

翻訳はEDISON Softwareによってサポートされました。EDISON SoftwareはWordPressで企業ウェブサイトを専門的に作成し 、企業アイデンティティのためのキャラクターをデザインしています 。

---

さまざまなタイプのプレースホルダーの概要

前回の投稿で、Placeholder'eと画像の遅延読み込みについて書き、それについても話しました。 画像の遅延読み込みを行うときは、プレースホルダーとして何をすべきかを考えることをお勧めします。これはユーザーの認識に大きな影響を与える可能性があるためです。 最近、いくつかのオプションについて説明しました。







画像領域を読み込む前に塗りつぶすためのいくつかのオプション。



画像スペースを空白のままにする ：レスポンシブデザインの世界では、これによりコンテンツの移動が防止されます。 これらのレイアウトの変更は、ユーザーの観点からも、プレゼンテーションにとっても悪いことです。 ブラウザーは、イメージのサイズを取得するたびにレイアウト計算を実行するように強制され、スペースを残します。

• プレースホルダー ：ユーザープロフィール写真を表示していると想像してください。 画像の場所にシルエットを表示できます。 メイン画像の読み込み時だけでなく、クエリが失敗したとき、またはユーザーがプロファイル画像をまったく設定していないときにも表示されます。 これらの画像は通常ベクトルベースであり、サイズが小さいため、埋め込む必要がある適切な候補です。
• 単色 ：画像から色を取得し、プレースホルダーの背景色として使用します。 これは、支配的な色、最も鮮明な色である可能性があります...アイデアは、ダウンロード可能な画像に基づいており、画像上の「画像なし」間の移行をよりスムーズにするのに役立つということです。
• ぼやけた画像 ：ぼやけた手法とも呼ばれます。 イメージの小さなバージョンを作成してから、完全なイメージに進みます。 初期画像は、ピクセルとサイズの両方で小さいです。 アーチファクトを除去するために、画像は拡大縮小され、ぼかされます。 これについてはこれらの記事で以前に書いた。 どのようにプログレッシブ画像の読み込みを行うか 、 WebPを使用して小さなプレビュー画像を作成する 、プログレッシブ画像読み込みのその他の例 。
• 他の多くのオプションがあり、多くの賢い人がプレースホルダーを作成するための他の方法を開発していることがわかります。

その1つは、単色ではなくグラデーションを使用することです。 グラデーションは、最小限のコスト（ペイロードの増加）で最終画像のより正確なプレビューを作成できます。









背景としてグラデーションを使用します。 オンラインではなくなったGradifyのスクリーンショット。 GitHubコード 。



別の方法は、画像ベースのSVGを使用することです。

SVGベースのプレースホルダー

SVGはベクター画像に最適であることを知っています。 ほとんどの場合、ビットマップをロードするため、問題は画像をどのようにベクトル化するかです。 一部のオプションでは、アウトライン、形状、および領域が使用されます。

アウトライン

以前の投稿で、画像の輪郭を見つけてアニメーションを作成する方法を説明しました。 私の最初の目標は、画像をベクトル化して領域を描画しようとすることでしたが、その方法を知りませんでした。 輪郭の使用も革新的であることに気づき、輪郭を復活させて「描画」の効果を生み出すことにしました。









コードペン



エッジ検出とSVGアニメーションを使用した画像の描画

フォーム

SVGを使用して、アウトライン/境界線を使用せずに画像から領域を描画することもできます。 ある意味では、ビットマップをベクトル化してプレースホルダーを作成します。



私はかつて三角形で似たようなことをしようとしました。 CSSConfとRender Confの会話で結果を見ることができます。







上記のコードペンは、245個の三角形で構成されるSVGベースのプレースホルダーの概念の証明です。 三角形の生成は、 Possan polyserverを使用したDelaunay三角形分割に基づいています。 予想どおり、SVGが使用する三角形が多いほど、ファイルサイズが大きくなります。

プリミティブおよびSQIP、SVGベースのLQIPメソッド

Tobias Baldaufは、 SQIPと呼ばれるSVGを使用した別の低品質の画像メソッドに取り組んでいます。 SQIPを掘り下げる前に、SQIPのベースとなっているライブラリーであるPrimitiveの概要を説明します。



プリミティブはかなり楽しいので、ぜひ試してみることをお勧めします。 ラスターイメージを、重なり合う形状で構成されるSVGに変換します。 サイズが小さいため、ページに直接オーバーレイするのに適しています。 別の適切なオプション、および初期HTMLロードの重要なプレースホルダー。



プリミティブは、三角形、長方形、円（およびその他のいくつか）などの形状に基づいて画像を生成します。 すべてのステップで、彼は新しいものを追加します。 ステップが増えると、結果の画像は元の画像に近くなります。 SVG出力がある場合、これは出力コードのサイズが大きくなることも意味します。



プリミティブがどのように機能するかを理解するために、いくつかの画像を見ていきました。 10個の図形と100個の図形を使用して、アートワーク用のSVGを生成しました。







写真へ（10個の図形と100個の図形を使用してプリミティブでこの画像を処理します。）







画像で10個の図形を使用すると、元の画像の理解が始まります。 プレースホルダー画像のコンテキストでは、このSVGをプレースホルダーとして使用できます。 実際、10桁のSVGのコードは非常に小さく、約1030バイトであり、SVGOを介して出力を送信すると、約640バイトに低下します。



<path fill=”#817c70" d=”M0 0h1024v1024H0z”/><path fill=”#03020f” d=”M178 994l580 92L402–62"/><path fill=”#f2e2ba” d=”M638 894L614 6l472 440"/><path fill=”#fff8be” d=”M-62 854h300L138–62"/><path fill=”#76c2d9" d=”M410–62L154 530–62 38"/><path fill=”#62b4cf” d=”M1086–2L498–30l484 508"/><path fill=”#010412" d=”M430–2l196 52–76 356"/><path fill=”#eb7d3f” d=”M598 594l488–32–308 520"/><path fill=”#080a18" d=”M198 418l32 304 116–448"/><path fill=”#3f201d” d=”M1086 1062l-344–52 248–148"/><path fill=”#ebd29f” d=”M630 658l-60–372 516 320"/>







100個のシェイプで生成された画像は予想どおり大きく、SVGOの後に約5K（以前は8K）の重量がありました。 彼らは小さなペイロードで高レベルの詳細を持っています。 使用する三角形の数の決定は、画像のタイプ（コントラスト、色の数、複雑さなど）と詳細レベルに大きく依存します。



cpeg-dssimに似たスクリプトを作成して、 構造的類似性のしきい値（または最悪の場合は形状の最大数）に達するまで使用する形状の数を変更できます。



これらのSVGは、背景画像としての使用にも最適です。 サイズに制限があり、ベクターに基づいているため、それらはヒーローの画像や、そうでなければアーティファクトを表示する大きな背景の良い候補です。

SQIP

トバイアスによると ：

SQIPは、これら2つの両極端のバランスをとろうとする試みです： プリミティブを使用してSVGを生成します。SVGは、画像内に表示される主要なオブジェクトに近似するいくつかの単純な形状で構成され、SVGをSVGOで最適化し、ガウスぼかしフィルターを追加します。 これにより、重量がわずか800〜1000バイトで、すべての画面で滑らかに見えるSVGプレースホルダーが生成され、画像コンテンツの視覚的なレプリカが提供されます。

結果は、ぼかしテクノロジーにプレースホルダーの小さな画像を使用するのと似ています（ Mediumや他のサイトが行うように ）。 違いは、JPGやWebPなどのビットマップを使用する代わりに、プレースホルダーがSVGであることです。



ソースイメージに対してSQIPを実行すると、次の結果が得られます。







最初の画像と2番目の画像にSQIPを使用して画像を出力します。



出力SVGは約900バイトであり、コードを確認すると、 feGaussianBlur



フィルターが形状グループに適用されていることがわかります。









SQIPは、エンコードされたSVG Base 64のコンテンツを含む画像タグを出力することもできます。



<img width="640" height="640" src="example.jpg” alt="Add descriptive alt text" style="background-size: cover; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw…<stripped base 64>…PjwvZz48L3N2Zz4=);">

シルエット

アウトラインとプリミティブシェイプにSVGを使用することを検討しました。 別の可能性は、画像をベクトル化して「描画」することです。 数日前、 Mikael Ainalemはコードペンを共有し、プレースホルダーとして2色のシルエットを使用する方法を示しました。 結果は非常に美しいです：







この場合のSVGは手動で作成されましたが、この手法により、プロセスを自動化するツールとの統合がすぐに生まれました。

• Reactを使用した静的サイトジェネレーターであるGatsbyは、これらのレンダリングされたSVGをサポートします。 JS PORT potraceを使用して画像をベクトル化します。
  
  
  
  
  
  
  
  
  
  
• Craft 3 CMS 。シルエットのサポートも追加されました。 potraceのPHPポートを使用します 。
  
  
  
  
  
  
  
  
  
  
• image-trace-loaderは、potraceを使用して画像を処理するWebpackローダーです。
  
  
  
  
  
  
  
  
  
  

Emil Webpackローダー（potraceに基づく）とMikaelの手描きSVGの出力の比較を見るのも興味深いです。







potraceによって生成された出力ではデフォルトのオプションが使用されると想定しています。 ただし、カスタマイズすることはできます。 ほとんどがpotraceに渡される Image-trace-loaderのオプションを確認します 。

合計

画像からSVGを生成し、プレースホルダーとして使用するためのさまざまなツールと方法を検討しました。 WebPはサムネイルの素晴らしい形式でもあり、SVGはプレースホルダーでの使用にも興味深い形式です。 詳細レベル（およびサイズ）を制御できます。非常に圧縮されており、CSSとJSを使用して簡単に制御できます。

追加のリソース

• Geometrizeは、Haxeで記述されたプリミティブポートです。 ブラウザで直接試すことができるJS実装もあります 。
• Primitive.js 、これはJSのPrimitiveポートです。 さらに、 primitive.nextgenは、Primitive.jsおよびElectronを使用したPrimitiveデスクトップアプリケーションポートです。
• プリミティブとジオメトリを使用して作成された画像の例を見ることができるいくつかのTwitterアカウントがあります。 @PrimitivePicと@Geometrizerをチェックしてください。
• imagetracerjsは、JavaScriptで記述されたビットマップトレーサーおよびベクトライザーです。 JavaおよびAndroid用のポートもあります。