كيفية ضبط حجم الصورة في HTML بطرق مختلفة

هل تريد إدراج صورة على صفحة الويب الخاصة بك، لكنك لا تعرف كيفية تعديل حجمه ليناسب التصميم؟ هل تريد معرفة كيفية استخدام علامات وسمات HTML لتعديل عرض الصورة وارتفاعها؟ هل تعرف فوائد وعيوب كل طريقة؟ إذا كانت الإجابة بنعم، فهذا المقال لك.

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

ما هي الصورة في HTML وكيفية إدراجها

الصورة في html هي عنصر يسمح لك بالعرض تمثيل مرئي للكائنأو شخص أو منظر طبيعي أو أي شيء آخر. لإدراج صورة في HTML يتم استخدام العلامة ، وهي علامة فارغة، أي. الذي ليس له إغلاق.

الملصق يحتوي على العديد من السمات التي تسمح لك بتحديد معلومات الصورة وخصائصها. أهمها:

• سرك: هي السمة التي تشير إلى مسار أو عنوان ملف الصورة. يمكن أن يكون مسار نسبي (داخل نفس الموقع) أو مسار مطلق (على موقع ويب آخر). على سبيل المثال: أيضاً .
• بديل: هي السمة التي تشير إلى النص البديل للصورة، أي النص الذي يتم عرضه عندما لا يمكن تحميل الصورة أو استخدام قارئ الشاشة. إنها سمة إلزامية ويجب أن يصف محتوى الصورة أو وظيفتها. على سبيل المثال:.
• العنوان: هي السمة التي تشير إلى عنوان الصورة، أي النص المعروض عند تحريك المؤشر عن الصورة. إنها سمة اختيارية ويمكن أن تكون مختلفة عن النص البديل. على سبيل المثال: .

كيفية ضبط الحجم باستخدام سمات العرض والارتفاع

إحدى أسهل الطرق لضبط حجم الصورة في HTML هو استخدام سمات العرض والارتفاع) التي تسمح لك بتحديد عرض الصورة وارتفاعها بالبكسل. على سبيل المثال:

هذه الصفات لها بعض المزايا والعيوب:

• المزايا:
  • فهي سهلة الاستخدام ولا تتطلب أي معرفة إضافية.
  • إنها تسمح لك بحجز المساحة اللازمة للصورة قبل تحميلها، مما يمنع الصفحة من القفز أو التغيير أثناء التحميل.
  • يمنحك خيار تعديل حجم الصورة حسب التصميم الصفحة دون الحاجة إلى تعديل الملف الأصلي.
• العيوب:
  • يمكنهم تشويه نسبة العرض إلى الارتفاع أو جودة الصورة في حالة استخدام قيم أخرى غير الحجم الأصلي.
  • ولا يسمح بتعديل حجم الصورة حسب حجم شاشة المستخدم أو جهازه.
  • أنها لا تسمح بتطبيق التأثيرات أو أنماط إضافية للصورة.

كيفية تغيير حجم الصورة في HTML باستخدام CSS

طريقة أخرى أكثر تقدما ومرونة لضبط حجم الصورة في HTML، عليك استخدام CSS (أوراق الأنماط المتتالية)، وهي لغة تسمح لك بتحديد الأنماط وتطبيقها على عناصر HTML. لاستخدام CSS يمكنك استخدام العلامة داخل مستند html، ملف خارجي بامتداد .css. على سبيل المثال:

img { width: 500px; height: 600px; } أيضاً

استخدام CSS له بعض المزايا والعيوب:

• المزايا:
  • يتيح لك ضبط حجم الصورة بشكل متناسب، باستخدام خاصية ملاءمة الكائن أو وظيفة calc().
  • دعونا نضبط حجم الصورة اعتمادًا على حجم شاشة المستخدم أو جهازه، باستخدام الوحدات النسبية (%، em، vw، vh) أو استعلامات الوسائط.
  • يمكن تطبيق تأثيرات أو أنماط إضافية على الصورة، مثل الحدود أو الظلال أو المرشحات أو التحويلات.
• العيوب:
  • يتطلب معرفة وإتقانًا أكبر للغة CSS.
  • يمكن أن تولد الصراعات أو التناقضات مع الأنماط الأخرى المطبقة على الصفحة أو الصورة.
  • يمكن أن يؤثر ذلك على الأداء أو سرعة تحميل الصفحة إذا تم استخدام عدد كبير جدًا من الأنماط أو التأثيرات.

كيفية ضبط الحجم باستخدام برنامج خارجي

خيار ثالث للتعديل حجم الصورة في HTML هو استخدام برنامج خارجي يسمح لك بتعديل حجم ملف الصورة قبل إدراجه في الصفحة. بعض هذه البرامج هي:

• الأعرج: هو برنامج مجاني ومفتوح المصدر يسمح لك بتحرير الصور ومعالجتها بشكل احترافي. مع برنامج GIMP يمكنك تغيير حجم الصورة استخدام خيار "تحجيم الصورة". من قائمة "الصورة". يمكنك أيضًا تحسين وزن الصورة وجودتها باستخدام خيار "تصدير باسم" في قائمة "ملف". يمكنك تنزيل برنامج جيمب من موقعه الرسمي.
• محل تصوير: هو برنامج إحالة مدفوع الأجر يسمح لك بإنشاء الصور وتحريرها بطريقة متقدمة. باستخدام Photoshop، يمكنك تغيير حجم الصورة باستخدام خيار "حجم الصورة" في قائمة "الصورة". يمكنك أيضًا تحسين الوزن وجودة الصورة باستخدام خيار "حفظ للويب". من القائمة "ملف". يمكنك تنزيل Photoshop من موقعه الرسمي.
• أداة تغيير حجم الصور عبر الإنترنت: هي أداة مجانية عبر الإنترنت تتيح لك تغيير حجم الصورة دون الحاجة إلى تثبيت أي برنامج. باستخدام Online Image Resizer، يمكنك تحميل صورة من جهاز الكمبيوتر الخاص بك أو من عنوان URL، اختر العرض والارتفاع المطلوب، وقم بتنزيل الصورة المعدلة. يمكنك الوصول إلى Online Image Resizer من موقعه الرسمي على الإنترنت.

اضبط الصورة بالطريقة التي تريدها

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

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

إذا أعجبك هذا المقال شاركه مع أصدقائك. وإذا كنت تريد معرفة المزيد من النصائح والحيل حول HTML والتطبيقات الأخرى، فتفضل بزيارة موقعنا على الويب. أرك لاحقًا!