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

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

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

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

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

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

يمكنك ضبط الصورة بحيث تلائم المحتوى باستخدام HTML و CSS عن طريق تعيين خصائص محددة. 

مثلا للتحكم في حجم الصورة، يمكن استخدام الخاصيتين `width` و `height` في عنصر الصورة في HTML.

  ```
  <img src="image.jpg" alt="description" style="width:100%; height:auto;">
  ```

2. يمكن أيضا استخدام CSS لتحديد حجم الصورة وتنسيقها بشكل دقيق، على سبيل المثال، يمكنك استخدام الخاصية `max-width` لتحديد أقصى عرض للصورة دون تشويه النسبة.

  ```css
  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
  }
  ```

باستخدام هذه الخصائص في HTML و CSS، يمكن تعديل حجم الصور بشكل يتناسب مع المحتوى والتأكد من عرضها بشكل صحيح على مختلف الشاشات أيضا،

يجب التعامل مع الصور والفيديوهات في تطوير الواجهة الأمامية لمواقع الويب بشكل إحترافي حيث أن الصور والفيدوهات هي أكبر الموارد التي يتم استخدامها في الموقع

لذلك يجب عليك الإهتمام بالنصائح والخطوات التالية:

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

وفي النهاية قم بتحليل أداء الموقع باستخدام أدوات مثل PageSpeed Insights من Google. ستقدم هذه الأدوات توصيات لتحسين أداء التحميل وتحسين سرعة الموقع.

قبل كتابة الكود، يجب تغيير حجم الصور والفيديوهات إلى الأبعاد المناسبة للتصميم المطلوب، لذلك يمكن استخدام أدوات مثل Photoshop أو GIMP للقيام بذلك يدويا أو خدمات مثل Kraken أو Cloudinary التي تقوم بذلك تلقائيا ثم ضغط الصور والفيديوهات لتقليل حجم الملفات قدر الإمكان. يمكن استخدام أدوات مثل TinyPNG أو TinyJPG لضغط الصور أو HandBrake أو FFMPEG لضغط الفيديوهات. كما يمكنك استخدام إضافات ووردبريس مثل Imagify أو Smush لضغط الصور تلقائيا على موقع الويب.