Zenn
🌳

Unpic：unpic-imgによって画像最適化する

2024/02/13に公開
Next.js
React
frontend
image
unpic
tech

Unpicとは

  • Unpicとはウェブ上で画像を扱うためのツールの集まりです。
  • unpic-img unpic lib unpic placeholder unpic pixelsといったツールがあります。

https://unpic.pics/

unpic-imgとは

  • Unpicのコアとなるのがunpic-imgで、さまざまなフロントエンドライブラリ、フレームワーク用の画像コンポーネントです。例えばNext.jsを使ってたらnext/imageによって画像を最適化することができますが、そのような画像コンポーネントがないライブラリ、フレームワークを使ってる場合にunpic-imgを使うことによって画像を最適化することができます。
  • 具体的には主にこちらのライブラリ、フレームーワークにunpic-imgを使用することができます。
    ex). Angular, Astro, Lit, Preact, Qwik, React, Solid, Svelte, Vue, WebC
  • 因みにNext.jsにもunpic-imgを使用することはできます。next/imageとの主な違いはunpic-imgはサポートされるCDNを通じて画像を直接リサイズ・ロードし、画像処理を一回限りにしCDNの機能を最大限に活用します。（後述のunpic libとはと関連します）またnext/imageと異なってunpic-imgはデフォルトでobject-fit: coverを使用し、アスペクト比に応じて画像をクロップします。CDNは自動的に検出され、多くのCDNをサポートしているためローダーの指定が不要です。またfixed constrained fullWidthのレイアウトモードを提供し、srcsetとsizes属性の生成を最適化します。こちらにイメージが載っております。

https://unpic.pics/img/react/#differences-from-nextimage

unpic-imgによって画像最適化する

  • 例えばReactにunpic-imgを使用する場合は@unpic/reactをnpmからインストールし、Imageを使用することによって画像最適化することができます。
npm install @unpic/react

import { Image } from "@unpic/react";

<Image
  src="https://cdn.shopify.com/static/sample-images/bath.jpeg"
  layout="constrained"
  width={400}
  height={300}
  alt="A lovely bath"
/>

unpic libとは

  • unpic libとは異なる画像CDNのURLを検出し、それらを変換するための統一インターフェースを提供するライブラリです。CMSやユーザー生成コンテンツなど、さまざまなソースからの画像URLを扱うことができ、これらの画像がどのCDNから来たものであっても、またすでに変換が施されてても一貫した方法で画像を管理し最適化できます。

  • unpic libとunpic-imgを使用することによって画像をローカルにダウンロードしてリサイズしたり、別の画像サービスで再処理せず、直接元のCDNを利用して画像を変換できます。これにより開発者は画像の配信と最適化を効率的に行いウェブサイトのパフォーマンスとUXを向上できます。

unpic placeholderとは

  • unpic placeholderとは画像からドミナントカラー（同じ色相で統一された複数の色）を抽出またはBlurHash値をレンダリングして、低品質の画像プレースホルダー（LQIP）を生成します。これらのプレースホルダーは画像ロード中に表示され、LCP時間（ページ内で最も大きいコンテンツの読み込み時間）を短縮し見た目を改善します。約150バイトのサイズで、img要素の背景として適用できます。unpic-imgと組み合わせることで、ウェブ開発の効率化とUXの向上が期待できます。

unpic pixelsとは

  • unpic pixelsとはDenoやNodeなどのJavaScriptランタイムを使用してPNGまたはJPEG画像の生データまたはURLからピクセルを読み込み、デコードするモジュールです。このプロセスを通じて、画像のデコードされたピクセルと寸法を取得できます。

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！👏
また、なにか間違ってましたらご指摘いただけますと幸いです！🙏

Discussion