جاوااسکریپت | JavaScript
پیش‌نمایش تصاویر
در برخی وب‌سایت‌ها که لازم است تصاویر با کیفیت بالا نمایش داده شوند، برای بهبود تجربه کاربری از تصاویر جایگزین کم‌کیفیت استفاده می‌شود. این تصاویر تا زمانی که نسخه اصلی در حال بارگذاری است، دیدی کلی از برخی جزئیات و رنگ‌های تصویر اصلی به کاربر می‌دهند.
این تکنیک با نام LQIP یا Low Quality Image Placeholder نیز شناخته می‌شود و روش‌های مختلفی برای پیاده‌سازی آن وجود دارد؛ حتی با استفاده از CSS. بااین‌حال، روش رایج‌تر این است که یک تصویر از پیش آماده‌شده را به‌صورت پس‌زمینه و در قالب Data URL مبتنی بر Base64 در صفحه قرار دهیم.
<img
src="high-quality.webp"
style="background-image: url(
data:image/png;base64,...
)"
width="..."
height="..."
alt="..."
>
<img> یک عنصر جایگزین‌شونده (replaced element) است. هنگام بارگذاری تصویری که در src مشخص شده، این عنصر عملاً مانند یک محفظه معمولی است که می‌توان برای آن در CSS پس‌زمینه تعیین کرد. تصویر کوچک و محوشده نیز به‌صورت Base64 در HTML قرار می‌گیرد تا برای نمایش آن نیازی به یک درخواست شبکه جداگانه نباشد.
در نتیجه، کاربر بلافاصله یک تصویر محوشده می‌بیند که نمایی کلی از تصویر اصلی ارائه می‌دهد؛ در همین زمان، نسخه باکیفیت تصویر در پس‌زمینه در حال بارگذاری است. پس از بارگذاری نسخه اصلی، محتوای <img> با آن جایگزین می‌شود و پس‌زمینه دیگر کاربردی نخواهد داشت.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
129 ·