‏عکس تار قبل از عکس اصلی، این بار بدون کد

الگوی «اول عکس تار، بعد عکس اصلی» رو همه دیدیم: یه نسخه کوچیک و مات بلافاصله ظاهر می‌شه و چند لحظه بعد جاش رو به عکس واقعی می‌ده. به نوشته Patrick Brosset، هر پیاده‌سازی این الگو مجبوره چهار کار تکراری رو انجام بده: هر دو عکس رو بگیره، نسخه تار رو نشون بده، عوضشون کنه و آخرش تمیزکاری کنه.

الان راه استانداردی براش وجود نداره و هر کسی با ابزار خودش این کارو می‌کنه. Next.js با پراپرتی placeholder="blur" موقع import عکس یه جایگزین تار می‌سازه. کتابخونه blurhash عکس رو به یه رشته خیلی کوتاه تبدیل می‌کنه، یعنی کل پیش‌نمایش تو چند کاراکتر ذخیره می‌شه، و موقع اجرا همون رشته رو روی canvas دیکود می‌کنی. بعضی‌ها هم موقع build پیش‌نمایش می‌سازن و به شکل data URL تو background-image می‌ذارن.

پیشنهادی که تیم Microsoft Edge داده اینه که این کار بره تو خود مرورگر، با یه اتربیوت جدید برای تگ img به اسم previewsrc:

<img previewsrc="tiny-blurry-preview.png" src="full-image.avif">

با این اتربیوت، مرورگر هر دو عکس رو لود می‌کنه ولی همیشه اولویت رو به عکس اصلی می‌ده، پیش‌نمایش رو نشون می‌ده و به‌محض آماده شدن عکس اصلی جاشون رو عوض می‌کنه. یعنی دیگه لازم نیست خودت حالت‌هایی مثل «پیش‌نمایش لود نشد» رو مدیریت کنی.

نویسنده می‌گه این نسخه اول عمداً کم‌دامنه‌ست: نه ترنزیشن قابل‌تنظیم مثل fade داره و نه به‌صورت بومی از فرمت‌های فشرده مثل blurhash پشتیبانی می‌کنه. این دو تا فعلاً به‌عنوان بهبودهای احتمالی آینده روی میزن و تیم Edge دنبال بازخورده که آیا همین حد برای استفاده کافیه یا نه.

درباره نگرانی درخواست شبکه اضافه، جواب نویسنده اینه که مرورگر پیش‌نمایش رو با اولویت پایین و به‌شکل best-effort می‌گیره و اگه به‌دردبخور نباشه کلاً ردش می‌کنه؛ ضمن اینکه هنوز می‌تونی از data URL یا رشته blurhash استفاده کنی تا اصلاً درخواست دومی نباشه. تأکید می‌کنه این یه فیچر پرفورمنسی نیست و جای بهینه‌سازی درست عکس‌ها رو نمی‌گیره، فقط باعث می‌شه رابط کاربری زودتر جون بگیره.

نکات کلیدی:

• پیشنهاد یه اتربیوت جدید به اسم previewsrc برای تگ img، از طرف تیم Microsoft Edge
• مرورگر همیشه اولویت لود رو به عکس اصلی می‌ده و پیش‌نمایش رو best-effort می‌گیره
• نسخه اول نه ترنزیشن سفارشی مثل fade داره و نه پشتیبانی بومی از blurhash
• srcset و sizes و picture مثل قبل کار می‌کنن و با previewsrc سازگارن
• نویسنده می‌گه این جایگزین بهینه‌سازی عکس نیست و فیچر پرفورمنسی حساب نمی‌شه