الصورة التي تبدو ممتازة على شاشة كبيرة قد تكون عبئًا غير ضروري على الهاتف. تحسين الصور يبدأ باختيار أبعاد تناسب موضع العرض، ثم توفير نسخ تسمح للمتصفح باختيار المورد الملائم.
الفكرة الأساسية
تصف srcset أحجام الصور المتاحة، وتساعد sizes المتصفح على تقدير مساحة العرض. أما تحديد العرض والارتفاع فيحجز نسبة الأبعاد ويقلل تغير التخطيط أثناء التحميل. ضغط الملف مهم، لكنه لا يعوّض إرسال صورة أكبر بكثير من الحاجة.
خطوات عملية
- صدّر نسخًا محددة العرض واختبر جودة التفاصيل بعد الضغط.
- ضع نصًا بديلًا يصف المعنى عندما تحمل الصورة معلومات، واترك الزخارف دون وصف متكرر.
- استخدم التحميل الكسول للصور البعيدة عن بداية الصفحة، وراجع صورة الواجهة الرئيسية بشكل مستقل.
مثال تطبيقي
غلاف مقال بعرض متوسط لا يحتاج النسخة الأصلية المخصصة للطباعة. قارن حجم النقل ووضوح النص داخل الصورة على هاتف حقيقي قبل اعتماد النسخة النهائية.
خطأ شائع ينبغي تجنبه
لا تجعل كل الصور كسولة التحميل تلقائيًا؛ الصورة الظاهرة أولًا قد تتأخر بذلك. كما أن النص البديل ليس مكانًا لحشو كلمات البحث.
مثال تقني مبسّط
المقتطف التالي يوضح الفكرة، ويحتاج إلى تكييف مع بنية مشروعك ومساراته والتحقق المناسب قبل استخدامه.
<img src="cover-640.jpg"
srcset="cover-640.jpg 640w, cover-1200.jpg 1200w"
sizes="(max-width: 640px) 100vw, 600px"
width="1200" height="800"
alt="وصف المعنى الذي تنقله الصورة">للتوسع في الموضوع
صور توضيحية: الغلاف من Unsplash، الصورة الداخلية من Unsplash. ترخيص الاستخدام.
