كيفية تحديد حجم الصورة المناسب لصفحات الويب

المشكلة هنا غالباً أنك تقوم بتغيير الحجم بشكل بسيط عن طريق تغيير الأبعاد فقط، هذا سيخرب ما ندعوه بال aspect ratio الخاص بالصورة، و هو نسبة بين عرض و ارتفاع الصورة، و تغييرها سيؤدي إلى تشوه الصورة.

الحل هو التحجيم بناء على ذلك، أي تغيير الحجم مع الحفاظ على ال aspect ratio، أي برنامج تعديل على الصور حتى paint3d الموجود ضمن ويندوز بشكل افتراضي يمكنه القيام بذلك.

لكن هنا قد لا يمكنك الوصول إلى الحجم الذي تريده، فالحفاظ على ال aspect ratio يضع قيوداً على تغيير الحجم، لذلك هناك طريقتين:

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

و لكن هذا يفترض أن تجد صورة قريبة نظرياً مما تريده، أي مثلاً لنفترض تريد صورة طولية (كخلفية الموبايل مثلاً)، فلن ينجح أن تجلب صورة عريضة و تطبق ما سبق، عليك على الأقل جلب صورة طولية بحيث لا يكون هناك فرق كبير في ال aspect ratio بين ما تريده و ما لديك.

قبل اختيار الصورة، قم بتحديد الأبعاد المطلوبة للصورة على صفحتك. قم بتحديد العرض والارتفاع المناسبين للمكان الذي تنوي وضع الصورة فيه. يمكنك استخدام وحدات القياس مثل بكسل (px) أو نسبة (٪) حسب احتياجاتك.

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

يمكنك استخدام خاصية CSS "max-width" للصورة في صفحتك للتحكم في حجمها. عند تعيين قيمة "max-width" للصورة، ستتم تحجيمها تلقائيًا لتناسب المساحة المتاحة دون تشويه الشكل. على سبيل المثال:

img { 
  max-width: 100%; height: auto;
}

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

أولاً عليك بتحديد المساحة التي تريد من الصورة أن تشغلها، ولتكن مثلاً 500px هنا يجب عليك إختيار صورة بمساحة 1000px حتى يتم عرضها بشكل سليم وواضح على الشاشات التي تعتمد على تنقية double pixels مثل شاشات Retina من آبل.

وتستطيع تصغير مساحة الصورة في حال كانت كبيرة باستخدام موقع مثل https://squoosh.app أو باستخدام أحد برامج تحرير الصور مثل فوتوشوب.

بعد ذلك عليك تحديد عرض وطول للعنصر الحاوي للصورة وليكن كالتالي:

.container {
  width: 500px;
  height: 500px;
}

وللصورة عليك تحديد العرض فقط بنسبة 100% من مساحة العنصر الأب وذلك ليتم حساب النسبة بين الطول والعرض  aspect ratio بشكل تلقائي وستظهر الصورة كما هي بدون مشكلة كالتالي:

img { 
  width: 100%
}

وفي حال كانت الصورة لا تظهر بالشكل الذي تريده فيمكنك استخدام خواص:

• background-image
• background-size
• object-fit
• object-position