أنشئ كود Blurhash لصورك
أداة من KIT تحوّل الصورة إلى كود Blurhash قصير — سلسلة نصية تمثل معاينة ضبابية للصورة تُعرض فورًا أثناء تحميل الملف الأصلي، بدل مربع أبيض فارغ. مخصصة لمطوري المواقع والتطبيقات، وتعمل بالكامل داخل متصفحك دون رفع الصورة إلى أي خادم.
شغّل الأداة مجانًا
تعمل هذه الأداة داخل متصفحك — مجانًا، ولا تُرسل بياناتك إلى أي خادم
لماذا تحتاج معاينة أثناء التحميل
صفحة تعرض عشرات الصور تُظهر مربعات بيضاء فارغة حتى تكتمل كل صورة تحميلها، وهذا يمنح تجربة مقطوعة وبطيئة الإحساس حتى لو كان التحميل سريعًا فعليًا من الناحية التقنية البحتة. كود Blurhash يحل هذه المشكلة: سلسلة نصية قصيرة جدًا تُرسم فورًا كمعاينة ضبابية تحمل ألوان الصورة العامة وتوزيعها التقريبي، ريثما يكتمل تحميل الملف الحقيقي خلفها بهدوء دون أن يشعر الزائر بفراغ الصفحة.
سلسلة نصية بدل صورة مصغّرة
خلافًا لصورة مصغّرة تحتاج تحميل ملف إضافي منفصل عبر الشبكة، كود Blurhash مجرد نص قصير يُخزَّن مباشرة في قاعدة بياناتك مع بيانات الصورة الأخرى دون تكلفة تخزين تُذكر. يُرسم هذا النص فورًا في المتصفح كخلفية ضبابية دون أي طلب شبكة إضافي على الإطلاق، وهو ما يجعله أخف وأسرع بكثير من أي معاينة تعتمد على صورة حقيقية مهما صغُر حجمها المضغوط أصلًا.
أين يُستخدم عادة
معارض الصور، منصات العقار التي تعرض عشرات صور الوحدة الواحدة، ومتاجر إلكترونية بصفحات تصفح طويلة، كلها تستفيد من هذا النمط: تحميل تدريجي يبدو سلسًا بدل مربعات فارغة تظهر وتختفي فجأة أمام عين الزائر المتصفح للصفحة. النتيجة إحساس أسرع بالصفحة كلها حتى لو لم يتغيّر زمن التحميل الفعلي فعليًا من حيث الأرقام المقاسة بدقة تامة على أجهزة القياس المختلفة المستخدمة في الاختبار.
الصيغ والحدود
تقبل الأداة JPG وPNG وWebP حتى 15 MB و12 ميغابكسل، وتعيد كودًا نصيًا قصيرًا لكل صورة ترفعها دون استثناء لأي ملف. يُستخدم هذا الكود مع أي مكتبة عرض تدعم صيغة Blurhash القياسية المفتوحة في الواجهة الأمامية لموقعك أو تطبيقك، دون الحاجة لبناء حل مخصص من الصفر بنفسك أو كتابة كود إضافي معقّد لهذا الغرض التحديدي وحده فقط دون سواه.
حالات الاستخدام
معرض صور عقاري
يعرض موقع عقاري تديره شركة الواحة للتجارة المحدودة عشرات الصور لكل وحدة سكنية. بكود Blurhash لكل صورة، تظهر معاينة ضبابية سلسة أثناء التحميل بدل مربعات فارغة.
متجر إلكتروني بصفحة تصفح طويلة
يولّد مطور موقع متجر كود Blurhash لكل صورة منتج مسبقًا، فتظهر الصفحة سلسة أثناء تمرير المستخدم بين المنتجات دون انتظار كل صورة.
تطبيق جوال لعرض الصور
يستخدم مطور تطبيق جوال أكواد Blurhash لعرض معاينات فورية لصور المستخدمين قبل اكتمال تحميلها، مما يحسّن الإحساس بسرعة التطبيق.
الأسئلة الشائعة
ما فائدة Blurhash تحديدًا مقارنة بصورة مصغّرة عادية؟
كود Blurhash نص قصير جدًا لا يحتاج طلب شبكة إضافيًا، بينما الصورة المصغّرة ملف منفصل يحتاج تحميلًا خاصًا به. لهذا يظهر Blurhash فورًا دون أي تأخير إضافي.
هل الأداة مجانية؟
نعم، تعمل داخل متصفحك دون رفع الصورة، وبلا حد استخدام أو تسجيل.
كيف أستخدم الكود الناتج في موقعي؟
تخزّن الكود النصي مع بيانات كل صورة في قاعدة بياناتك، وتستخدم مكتبة عرض تدعم صيغة Blurhash لرسمه كخلفية ضبابية ريثما يكتمل تحميل الصورة الأصلية.
هل تُرفع صورتي لتوليد الكود؟
لا، يجري توليد الكود بالكامل داخل متصفحك، ولا تغادر الصورة جهازك في أي مرحلة.
هل يمكن توليد الأكواد لدفعة كبيرة من الصور تلقائيًا؟
نعم، عبر الـAPI تولّد كود Blurhash لعدد كبير من الصور دفعة واحدة، مفيد عند استيراد كتالوج منتجات كامل مرة واحدة.
هل يعمل الكود مع كل أطر العمل البرمجية؟
صيغة Blurhash قياسية ومفتوحة، وتتوفر لها مكتبات عرض جاهزة لمعظم أطر العمل الشائعة في الويب والجوال.
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/image/blurhash \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"image":"https://ejemplo.com/imagen.jpg"}'const res = await fetch("https://api.kit.forhosting.com/image/blurhash", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"image": "https://ejemplo.com/imagen.jpg"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/blurhash",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/blurhash", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"image":"https://ejemplo.com/imagen.jpg"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/blurhash", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"image": "https://ejemplo.com/imagen.jpg"
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.blurhash",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الحدود
max_mb | 15 |
max_megapixels | 12 |
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |