تحسين الصور (Compression, Formats, Alt Text)
يا هلا والله بالجميع! اليوم بنتكلم عن موضوع مهم جداً لأي موقع أو تطبيق: تحسين الصور. ليش مهم؟ عشان موقعك يصير أسرع، تجربة المستخدم أحسن، ومحركات البحث تحبك أكثر. يلا نبدأ.
1. ضغط الصور (Compression)
أول شي لازم نفهمه هو ضغط الصور. الصور الكبيرة تبطئ موقعك، فلازم نصغر حجمها بدون ما نخرب جودتها.
فيه نوعين رئيسيين للضغط: Lossy و Lossless.
- Lossy (فقدان البيانات): هذا النوع يقلل حجم الصورة بشكل كبير عن طريق حذف بعض البيانات اللي العين البشرية ما تلاحظها. مثالي لصور الفوتوغرافيا زي الـ
JPEG.- Lossless (بدون فقدان البيانات): هذا يحافظ على كل بيانات الصورة الأصلية، والضغط يكون أقل. يستخدم لصور الشعارات، الأيقونات، والرسومات اللي فيها تفاصيل حادة، زي الـ
PNG.
كيف تضغط الصور؟
- أدوات أونلاين: فيه مواقع كثيرة زي
TinyPNGأوCompressor.io. - برامج: فوتوشوب، GIMP، أو حتى أدوات سطر الأوامر زي
ImageMagick. - بلجنات (للووردبريس مثلاً): فيه بلجنات تسوي الشغل هذا تلقائي زي
SmushأوEWWW Image Optimizer.
نصيحة سريعة: دائماً جرب وشوف الفرق. أحياناً ضغط بسيط يفرق كثير في الأداء بدون ما يأثر على الجودة.
2. صيغ الصور (Formats)
مو كل الصور زي بعض، وكل صيغة لها استخدامها الأفضل.
- JPEG: الأفضل للصور الفوتوغرافية اللي فيها تدرجات ألوان كثيرة. تدعم ضغط
Lossy. - PNG: ممتازة للرسومات، الشعارات، الصور اللي فيها شفافية (transparent background). تدعم ضغط
Lossless. فيهPNG-8لألوان أقل وPNG-24لألوان أكثر. - GIF: للصور المتحركة (animations) أو الصور البسيطة جداً بألوان محدودة.
الصيغ الحديثة (Modern Formats):
هذي الصيغ صممت خصيصاً للويب عشان توفر جودة ممتازة بحجم أقل بكثير.
- WebP: من قوقل، يدعم ضغط
LossyوLosslessوالشفافية. حجمه أصغر بكثير منJPEGوPNGبنفس الجودة. - AVIF: أحدث وأكثر كفاءة من
WebPفي كثير من الحالات. يوفر جودة أعلى بحجم أصغر، لكن الدعم لسه مو منتشر زيWebP.
كيف تستخدم الصيغ الحديثة بذكاء؟
استخدم وسم الـ <picture> عشان المتصفحات الحديثة تحمل الصيغة الأفضل، وإذا ما تدعم، ترجع للصيغة التقليدية.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="وصف الصورة هنا" loading="lazy">
</picture>في الكود اللي فوق، المتصفح بيحاول يحمل image.avif أول شي، إذا ما قدر، بيجرب image.webp، وإذا ما ضبط، بيرجع لـ image.jpg. كذا تضمن أفضل أداء وأوسع دعم.
3. النص البديل (Alt Text)
الـ alt text (أو alt attribute) هو وصف نصي للصورة. ليش مهم؟
- إمكانية الوصول (Accessibility): قارئات الشاشة (screen readers) تستخدمه عشان توصف الصورة للمكفوفين أو ضعاف البصر.
- تحسين محركات البحث (SEO): قوقل وغيره ما يقدرون يشوفون الصورة، لكن يقرأون الـ
alt textعشان يفهمون محتواها ويرتبونها في نتائج البحث. - في حال فشل تحميل الصورة: إذا الصورة ما تحملت لأي سبب، النص البديل بيظهر بدالها.
كيف تكتب alt text ممتاز؟
- كن وصفيًا ودقيقًا: صف محتوى الصورة باختصار ووضوح.
- استخدم كلمات مفتاحية (Keywords): إذا فيه كلمات مفتاحية ذات صلة بمحتوى الصورة وموقعك، استخدمها بشكل طبيعي.
- لا تحشي كلمات مفتاحية: لا تكرر الكلمات المفتاحية بشكل مبالغ فيه، هذا يضر بالـ SEO وتجربة المستخدم.
- لا تبدأ بـ "صورة لـ..." أو "صورة تظهر...": قارئات الشاشة تعرف إنها صورة.
أمثلة:
صورة لقطار سريع يمر بمدينة الرياض.
<img src="riyadh-train.jpg" alt="قطار سار فائق السرعة يعبر أفق مدينة الرياض الحديثة">صورة شعار شركة "تقنية المستقبل".
<img src="tech-logo.png" alt="شعار شركة تقنية المستقبل">صورة زخرفية (ليست ذات معنى مهم للمحتوى).
<img src="decorative-line.png" alt="">إذا كانت الصورة مجرد ديكور وما تضيف أي معلومة للمحتوى، خلي الـ
altفاضي (alt=""). كذا قارئات الشاشة تتجاهلها وما تزعج المستخدم.
الخلاصة
تحسين الصور مو بس رفاهية، هو ضرورة لأي موقع ويب ناجح. اهتم بضغط الصور، اختر الصيغة المناسبة، ولا تنسى الـ alt text. بتشوف فرق كبير في أداء موقعك وتجربة المستخدم. بالتوفيق يا وحوش!