2

ادارة الصور والفيديوهات في صفحات الويب

عندما نقوم بالتدريب على تصميم صفحات الويب ك frontend نستعمل صور صغيرة الحجم لا يصل حجمها الى 1mg ومضبوطة الأبعاد ومتناسقة مع التصميم المطلوب تنفيذه ..

لكن عند البدء بتنفيذ فكرة خارجية لموقع ما أرى ان تعاملي يكون مع صور كبيرة الحجم يصل الى 3 و 4 mg ومأخوذة عن طريق الموبايل او الكاميرا فأبعادها مختلفة وغير موحدة ..

وكذلك نفس الحديث بالنسبة للفيديوهات ..

ارجوا اعطائي نصائح او خطواط اقوم باتباعها قبل كتابة الكود وعند كتابته للتعامل مع الصور بكل احترافية وتجهيزها للتصميم ..

لأنه اذا للصور دور كبير جدا في جمالية الموقع..

وارجوا من الناصح الأخذ بعين الاعتبار ان الحديث عن المواقع الستاتيك والمواقع الديناميكية كلاهما .

وشكرا 🩶


1
Mustafa_Suleiman أضف ردا

عند التعامل مع الصور عليك بالتالي:

استخدام صور حجمها ضعف المساحة التي تريد عرضها بها، مثلاً لو لديك مساحة عرض بحجم 500 بكسل استخدم صورة بحجم 1000 بكسل أو أو أكبر من 500 إن لم تجد 1000 لنفس الصورة وهكذا، حتى لا تظهر الصورة مشوشة على بعض الشاشات التي تستخدم خاصية dual pixel أي بحاجة إلى ضعف البكسلات لعرض الصورة بشكل أكثر وضوحًا من الشاشات الأخرى.

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

وعند ضبط حجم الصورة من خلال CSS استخدم العرض width فقط وسيتم ضبط الطول تلقائيًا وتلك هي الطريقة الأفضل لتجنب تشوش الصورة وحدوث مشكلة في نسب الأبعاد.

وبخصوص تنسيقات الصور من خلال CSS فستجد شرح مفصل هنا: