تصاویر نگهدارنده مکان را در لبه با thumbhash ایجاد کنید

در ادامه سفرم برای ساختن یک وبلاگ ذخیره شده در لبه عملکردی! این بر روی Cloudflare Workers ساخته شده است، در اینجا آخرین به روز رسانی من در مورد آن بود:

بازی با توابع لبه یک جعبه ماسه‌بازی سرگرم‌کننده بود، و پس از برخورد با یک الگوریتم جالب برای کمینه‌سازی تصاویر، الهام گرفتم که این پروژه را با آن تقویت کنم.

گلوگاه بارگذاری صفحه 🌁

در حالی که استفاده از KV داده‌های توزیع شده در سطح جهانی و تأخیر درخواست کوتاه‌تر را فعال می‌کند، هنوز یک جنبه از عملکرد صفحه وجود دارد که یک گلوگاه اصلی است: بارگذاری تصاویر.

این امر بدون در نظر گرفتن موقعیت سرور، بیشترین تأثیر را بر عملکرد دارد، و در مورد من، حتی اگر داده‌های مرتبط با هر پست در لبه ذخیره می‌شود، تصویر پشت هر URL همچنان باید توسط هر مشتری بارگیری شود.

من به دنبال حل میزبانی تصویر توزیع شده (هنوز) نیستم، بنابراین در همین حین، یک راه حل پردازش تصویر ساده با استفاده از thumbhash ساختم تا یک نسخه کوچک و کدگذاری شده با پایه 64 از تصویر را ذخیره کنم تا در حین دانلود کامل تصویر، نمایش داده شود.

وارد کنید: thumbhash 👍

من با این پست HN از ماه گذشته روبرو شدم که با برخی از آمار عملکرد چشمگیر توجه من را جلب کرد. این مخزن در GitHub است:

در حالی که شبیه به BlurHash است، عملکرد رنگ برای همان اندازه فایل بسیار بهتر است. در اینجا یک نمایش از این صفحه نمایشی (با ThumbHash در وسط و BlurHash در سمت راست) است:

مهمتر از همه، تصاویر تار هستند کوچک (<1% اندازه تصویر اصلی!). این باعث می شود که ذخیره آنها به عنوان رشته های رمزگذاری شده در نظر گرفته شود، که من قصد انجام آن را دارم. این پروژه دارای یک پیاده سازی در JS است و من مطمئن بودم که یک کاندیدای عالی برای افزودن تصاویر مکان نگهدار به سایت خواهد بود!

جزئیات پیاده سازی زیر مختص پروژه من است، اما اصول را می توان در هر جایی که JS سمت سرور وجود دارد اعمال کرد.

ایجاد thumbhash به عنوان بخشی از فرآیند ذخیره سازی لبه 🎞️

با تکیه بر رویکرد ذخیره سازی KV از قبل، می توان یک نمایش base64 از تصویر جلد ایجاد کرد و همراه با داده های پست قرار داد. همانطور که قبلاً گفته شد، نمی‌خواهم نگران میزبانی تصاویر باشم، بنابراین ذخیره تصویر کدگذاری شده به عنوان یک رشته از این امر جلوگیری می‌کند.

دستکاری تصویر با JS سمت کلاینت آسان است canvas، اما از آنجایی که این روی سرور است، برخی از بسته های اضافی این امکان را فراهم می کند. من از jpeg-js برای رمزگشایی تصویر استفاده کردم:

import { decode } from 'jpeg-js'
import pica from 'pica'

const res = await fetch(imageUrl)
const arrayBuf = await res.arrayBuffer()
const decoded = decode(arrayBuf, { useTArray: true })
const { width, height, data } = decoded

سپس پیکا برای تغییر اندازه آن و یک تابع ساده برای برش آن نوشتم:

const imageWidth = Math.floor((width / height) * 100)

const resized = await pica().resizeBuffer({
  src: data,
  width,
  height,
  toWidth: imageWidth,
  toHeight: 100,
})

const cropped = cropMid(resized, imageWidth, 100)

سپس تمام چیزی که نیاز است این است که از این مورد، هش بند ایجاد شود Uint8Array:

import { thumbHashToDataURL, rgbaToThumbHash } from 'thumbhash'

const thumbhash = rgbaToThumbHash(100, 100, cropped)

return thumbHashToDataURL(thumbhash)

خوب! بنابراین اکنون که این نسخه کوچک تار از تصویر در دسترس است، آخرین مرحله برای یک تجربه کاربری خوب این است که ابتدا آن را نمایش دهید و پس از بارگذاری در پس‌زمینه با تصویر واقعی جایگزین کنید.

در حال بارگذاری تصویر در اندازه کامل 😴

معمولاً من برای انجام این کار چند JS سمت کلاینت می‌نویسم، اما از آنجایی که این پروژه صرفاً توسط سرور رندر شده است، ترجیح دادم از یک کتابخانه ساده آزمایش شده و واقعی برای این کار استفاده کنم: lazysizes.

این به سادگی اضافه کردن یک است data-src صفت و lazyload کلاس، با اصل src روی base64 thumbhash که قبلا تولید شده بود تنظیم کنید:

<img 
  class="lazyload blur-up" 
  src={post.thumbhash} 
  data-src={post.cover_image}
/>

سپس پس از گنجاندن تگ اسکریپت در رندر، فقط کار می کند™️! من مراحل را دنبال کردم تا افکت blur/unblur را نیز اضافه کنم، همانطور که از قسمت مشاهده می کنید blur-up کلاس

این اکنون در blog.bryce.io فعال است، آن را بررسی کنید! و اگر اینترنت شما خیلی سریع است که متوجه آن نمی‌شوید، سعی کنید از طریق ابزارهای توسعه‌دهنده به «آهسته 3G» فشار دهید. ممنون که خواندید و منتظر کارهای بعدی من با این پروژه حیوان خانگی باشید 😇