اختيار صيغ الصور للويب

01أي صيغة لأي صورة

غالبًا ما تكون الصور أثقل جزء في الصفحة، لذلك يؤثر اختيار الصيغة في السرعة. دليل مختصر:

• JPEG: الصور الفوتوغرافية، بضغط مع فقدان.
• PNG: الصور بلا فقدان والشفافية، مثل لقطات الشاشة.
• WebP وAVIF: صيغ حديثة تعطي عادة ملفات أصغر بجودة مماثلة. وكلتاهما مدعومة في المتصفحات الرئيسية الحالية.
• SVG: الأيقونات والشعارات والرسوم البسيطة. وهي متجهية فتبقى حادة بأي حجم.

عند الشك، ابدأ بأبسط خيار: SVG للرسوم المسطحة، وصيغة حديثة للصور الفوتوغرافية، وPNG فقط عند الحاجة إلى خصائصه.

02الصور المتجاوبة

لا يحتاج الهاتف إلى صورة بعرض 2400 بكسل. تتيح السمتان <code>;srcset<;/code>; و<code>;sizes<;/code>; للمتصفح اختيار ملف مناسب:

في الترميز تُعطى المتصفح قائمة بملفات الصورة وعرض كل منها في السمة <code>;srcset<;/code>;، ثم تُوضَّح في السمة <code>;sizes<;/code>; المساحة التي ستشغلها الصورة في الصفحة، فيختار المتصفح الملف الأنسب لكل شاشة.

يمكن لعنصر <code>;picture<;/code>; أن يعرض AVIF أو WebP أولًا مع JPEG كبديل.

وفّر بديلًا احتياطيًا. فالمتصفحات التي لا تفهم صيغة أحدث تستخدم المصدر التالي في القائمة، فتظهر الصورة دائمًا. أبقِ ملف JPEG أو PNG الأصلي خيارًا أخيرًا.

03امنع اهتزاز التخطيط وحمّل بحكمة

• اضبط السمتين <code>;width<;/code>; و<code>;height<;/code>; ليحجز المتصفح المساحة فلا تقفز الصفحة أثناء تحميل الصور.
• أضف <code>;loading="lazy"</code>; للصور أسفل الشاشة الأولى لتُحمَّل عند الحاجة فقط.
• لا تحمّل الصورة الرئيسية الظاهرة أعلى الصفحة تحميلًا كسولًا، لأن ذلك يؤخر ما يراه الناس أولًا.
• اكتب دائمًا نص <code>;alt<;/code>; ذا معنى للصور المعلوماتية.

تبطئ الصور الكبيرة التحميل، خاصة على اتصالات الجوال. تتضمن مؤشرات Core Web Vitals، الموصوفة في web.dev، مؤشر LCP (أكبر عنصر محتوى مرسوم) الذي يكون غالبًا صورة، ومؤشر CLS (إزاحة التخطيط التراكمية) الذي قد تزيده الصور غير المحددة الأبعاد. والملفات الأصغر المحضّرة جيدًا تحسّن الاثنين.

• لا ترفع الصورة الأصلية من الكاميرا. غيّر حجمها أولًا.
• قارن النتيجة المضغوطة بالأصل بالحجم المعروض.
• احتفظ بـ PNG للصور التي تحتاج إلى شفافية أو حواف حادة، وتجنبه للصور الفوتوغرافية الكبيرة.

04التحضير قبل الرفع

1. غيّر حجم الصورة إلى أكبر حجم ستُعرض به.
2. اختر الصيغة: SVG للرسوم، وJPEG أو WebP أو AVIF للصور.
3. اضغطها وقارن النتيجة بصريًا.
4. صدّر عرضين أو ثلاثة لاستخدامها في srcset.
5. أضف الأبعاد ونص alt وسمة التحميل الكسول حيثما كان ذلك مناسبًا.

أدرج هذه الخطوات في تسليم التصميم. فملاحظة قصيرة تحدد الصيغة والعروض المطلوبة لكل صورة توفر جولة تصحيح لاحقة، وتبقي الأصول الثقيلة بعيدًا عن بيئة الإنتاج.

افحص الصفحة النهائية مع تقييد سرعة الشبكة في أدوات المطور في المتصفح.

05المصادر

• MDN Web Docs. Responsive images. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images
• web.dev. Browser-level image lazy-loading for the web. https://web.dev/articles/browser-level-image-lazy-loading