منشئ Srcset
جديدأنشئ وسم <img> متجاوبًا بسمتي srcset وsizes انطلاقًا من عروضك.
<img> uses the extension above. width/height to reserve space and prevent layout shift (CLS). Runs entirely in your browser. Nothing is uploaded.
أنشئ srcset وsizes وترميز picture في مكان واحد
كتابة ترميز الصور المتجاوبة يدويًا أمر شاق — قائمة srcset، وخاصية sizes المطابقة، وكتلة <picture> مع fallbacks لـ WebP وAVIF — وخطأ مطبعي واحد يجعل المتصفح يُنزّل الملف الخاطئ في صمت. يبني هذا مولّد srcset العلامة كاملةً نيابةً عنك: أدخل اسم الملف وعروضك، وسيُنتج عنصر <img> أو <picture> متجاوبًا كاملًا وجاهزًا للنسخ مع أوصاف صحيحة، وتحميل مؤجل، وفك تشفير غير متزامن.
إنه مولّد صور متجاوبة مجاني يعمل بالكامل في المتصفح — بدون تسجيل، ولا يُرفع شيء، ويستمر في العمل دون اتصال بمجرد تحميله.
شرح srcset وsizes
تحتاج الصورة المتجاوبة إلى جزأين يعملان معًا. srcset هو قائمة الملفات وعروضها الفعلية — hero-640.jpg 640w يخبر المتصفح بأن هذا الملف عرضه 640 بكسل. sizes يصف مدى اتساع عرض الصورة في تخطيطك، مثل (max-width: 600px) 100vw, 600px. يقرأ المتصفح sizes، ويضرب في نسبة بكسل الجهاز، ويُنزّل أقرب مرشح srcset.
بدّل الواصف إلى x للحصول على ترميز كثافة البكسل — logo.png 1x, logo@2x.png 2x — مثالي للصور ذات الحجم الثابت كالشعارات والأيقونات على شاشات Retina، حيث سيكون استخدام واصفات w وsizes مبالغًا فيه.
متى تستخدم عنصر picture بدلًا من ذلك
يتعامل srcset البسيط مع التبديل بين الدقات — نفس الصورة بأحجام مختلفة. استخدم عنصر <picture> عندما تحتاج إلى مزيد من التحكم: تقديم تنسيقات حديثة مع fallback، أو التوجيه الفني (اقتصاص مختلف على الجوال عن سطح المكتب).
في وضع <picture>، تُصدر هذه الأداة <source type="image/avif">، و<source type="image/webp">، وعنصر <img> كـ fallback بتنسيق JPEG أو PNG، حتى تحصل المتصفحات الحديثة على أصغر تنسيق ولا تزال المتصفحات القديمة ترى الصورة.
تغيير حجم صورتك إلى كل عرض محليًا
الترميز نصف العمل فحسب — لا تزال بحاجة إلى الملفات المُعاد تحجيمها فعليًا. أسقط صورة في الأداة وستقوم بتغيير حجمها إلى كل عرض من عروضك مباشرةً على canvas HTML، ثم تتيح لك تنزيل المجموعة الكاملة بأسماء ملفات تتطابق تمامًا مع الترميز المُولَّد (hero-320.jpg، hero-640.jpg، وهكذا).
لا رفع للملفات ولا مسار بناء. نظرًا لأن التكبير بما يتجاوز الأصل لا يضيف إلا ضبابية، تُعلّم الأداة أي عرض أكبر من مصدرك لكي تظل مجموعة صورك دقيقة.
مقارنة بـ Squoosh وResponsivebreakpoints.com وCloudflare Image Resize
Squoosh (من Google) يتفوق في ضغط الصور الفردية وتحويلها — رائع لاختيار إعداد الجودة الصحيح لـ WebP أو AVIF. لكنه لا يُولّد ترميز srcset ولا ينتج علامة صورة متجاوبة كاملة للصقها في HTML. إنه أداة ضغط، لا مولّد ترميز.
Responsivebreakpoints.com من Cloudinary يرفع صورتك إلى خوادم Cloudinary لحساب نقاط التوقف المثلى وإنشاء صور مُعاد تحجيمها. النتائج جيدة، لكن ملفك يغادر جهازك وتسري شروط Cloudinary. Cloudflare Image Resize وImgix خدمات CDN تعالج الصور وقت التسليم لكنها تتطلب إعداد حساب وتكاملًا مع API وفوترة مستمرة. يقع مولّد srcset الخاص بـ UtiloKit في موضع مختلف: يُولّد ترميز HTML كاملًا ويُعيد تحجيم الصور محليًا على جانب العميل، بدون رفع، بدون حساب، بدون تكلفة وبدون حدود لحجم الملف.
العروض ونقاط التوقف ومقاييس Core Web Vitals
مجموعة العروض الموثوقة هي 320 و640 و960 و1280 و1920، تتضاعف تقريبًا عند كل خطوة لتغطي الهواتف حتى شاشات Retina الكبيرة؛ أضف 2560 للصور التي تملأ الشاشة بالكامل. تقديم صورة بالحجم الصحيح هو أحد أكبر المكاسب في Core Web Vitals: عدد بايتات أقل يعني أداءً أسرع لـ Largest Contentful Paint، وإضافة خاصيتي width وheight يمنع اضطراب التخطيط (CLS) الذي يضر بالمستخدمين والترتيبات على حدٍّ سواء.
أضف loading="lazy" للصور خارج الشاشة حتى تُحمَّل فقط عند التمرير إليها، وfetchpriority="high" لصورة hero الخاصة بك لتُحمَّل أولًا — كلاهما أزرار تبديل بنقرة واحدة هنا.
خاص وفوري ويعمل دون اتصال — يعمل على أي جهاز
لا شيء للتثبيت ولا حساب للإنشاء. تُجمَّع كل علامة في متصفحك أثناء الكتابة، وأي صورة تُعيد تحجيمها تُعالَج محليًا باستخدام canvas API — لا يُرفع شيء أبدًا. يعمل المولّد دون اتصال بمجرد تحميل الصفحة، حتى تتمكن من إنشاء ترميز img srcset و<picture> المتجاوب في أي مكان — في طائرة، أو على هاتف، بدون Wi-Fi.
Frequently asked questions
ما هو srcset وماذا يفعل؟
تتيح لك خاصية srcset إدراج نسخ متعددة من الصورة ذاتها بعروض مختلفة حتى يتمكن المتصفح من تنزيل النسخة الأنسب للجهاز. بدلًا من إرسال ملف كبير لكل الزوار، تكتب srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w" ويختار المتصفح أصغر صورة تبدو حادة — توفيرًا للنطاق الترددي على الهواتف وتقديمًا لصور واضحة على أجهزة الكمبيوتر المحمولة ذات شاشات Retina، كل ذلك بدون JavaScript.
متى أستخدم srcset؟
استخدم srcset عندما تُعرض صورة ما بأحجام مختلفة على شاشات مختلفة — لافتات hero، وصور المقالات، وصور المنتجات، وأي شيء سائل. إنه الأداة الصحيحة للتبديل بين الدقات: نفس الصورة، فقط أكبر أو أصغر. إذا احتجت لتغيير الاقتصاص أو الصورة الفعلية عند نقاط توقف معينة (التوجيه الفني)، استخدم عنصر picture. الأيقونات والشعارات الصغيرة ذات الحجم الثابت لا تحتاج إلى srcset على الإطلاق.
كيف أستخدم srcset وsizes معًا؟
srcset يُدرج الملفات وعروضها الحقيقية بالبكسل (640w تعني أن الملف عرضه 640 بكسل)؛ وsizes تُخبر المتصفح بمدى اتساع الصورة قبل حساب التخطيط. معًا: srcset="img-640.jpg 640w, img-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px". يقرأ المتصفح sizes ويحسب البكسلات اللازمة (عرض العرض × نسبة بكسل الجهاز)، ثم يختار أقرب مرشح srcset.
ما الفرق بين واصفات w وx؟
واصفات w تصف العرض الفعلي لكل ملف بالبكسل — image-640.jpg 640w — ويجب إقرانها بـ sizes؛ يقوم المتصفح بعد ذلك بالحساب لأي شاشة. واصفات x تصف كثافة البكسل فقط — image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x — وتناسب الصور ذات الحجم الثابت كالشعار الذي يحتاج فقط إلى أن يبدو حادًا على شاشات Retina. استخدم w للصور السائلة المُحرَّكة بالتخطيط وx للصور ذات الأبعاد الثابتة.
كيف أُقدّم WebP وAVIF مع fallback؟
استخدم picture مع source لكل تنسيق حديث وimg عادي كـ fallback: source type="image/avif" srcset="…"، ثم source type="image/webp" srcset="…"، ثم img src="hero.jpg" …. يستخدم المتصفح أول تنسيق يدعمه ويرجع إلى img بتنسيق JPEG أو PNG إذا لم يفهم أيًا منها — حتى تظل المتصفحات القديمة ترى الصورة.
ما أعراض الصورة التي يجب إنشاؤها؟
مجموعة جيدة للأغراض العامة هي 320 و640 و960 و1280 و1920 — تغطي الهواتف الصغيرة حتى شاشات Retina الكبيرة — بتضاعف تقريبي عند كل خطوة. للصور التي تملأ الشاشة بالكامل أضف 2560؛ للمحتوى الذي لا يتجاوز عرضه 800 بكسل، لا تحتاج لشيء أعرض من نحو 1600 (800 × 2 لـ Retina). لا تُولّد عروضًا كثيرة تصبح الفجوات بينها لا معنى لها؛ أربعة إلى ستة عروض تكفي عادةً.
لماذا لا يعمل srcset الخاص بي؟
المتهمون المعتادون: (1) أنت تختبر على شاشة قرر فيها المتصفح بشكل صحيح أن الملف الأكبر غير ضروري — غيّر حجم النافذة أو خفّض السرعة إلى اتصال بطيء لمشاهدة التبديل؛ (2) sizes مفقودة أو خاطئة، لذا يفترض المتصفح 100vw ويأخذ ملفًا كبيرًا؛ (3) الملفات المُدرجة غير موجودة فعليًا في تلك المسارات (تحقق من علامة تبويب الشبكة لمعرفة الأخطاء 404)؛ (4) الذاكرة المؤقتة تُقدّم حجمًا محمَّلًا بالفعل. srcset مجرد إشارة توجيهية، والمتصفح مسموح له باختيار صورة أكبر من الذاكرة المؤقتة — هذا تصميم مقصود.
Related tools
عرض كل الأدوات
جديد ترميز / فك ترميز JSON
رمّز النص الخام إلى سلسلة آمنة لـ JSON وفُكّ ترميزها مجددًا.
جديد رموز حالة HTTP
مرجع قابل للبحث لرموز حالة HTTP بمعانٍ مبسّطة.
جديد ورقة مرجعية للتعبيرات المنتظمة
مرجع قابل للبحث لرموز التعبيرات المنتظمة وأعلامها.
جديد جدول ASCII
رموز أحرف قابلة للبحث بالنظام العشري والسِّت عشري والثُّماني والثنائي.
جديد محوّل PX إلى REM
حوّل بين px وrem وem وpt بالنسبة إلى حجم الخط الجذري.
جديد محوّل أعمدة جداول البيانات
حوّل رقم عمود جدول البيانات إلى حرفه (1 ← A) والعكس.