كيفية تغيير حجم صورة للويب

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

لماذا نقوم بتغيير حجم الصور للويب؟

نريد أن نجعل الصور تبدو جيدة على الشاشة وتنزيلها بسرعة لزوار الموقع.

ستحتل مواقع الويب التي تحتوي على صور سريعة التحميل مرتبة أعلى في محركات البحث.

لأن محركات البحث تفضل إرسال المستخدمين إلى مواقع الويب التي تقدم تجربة جيدة.

هناك خطوتان للحصول على صورة سريعة التحميل:

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

يُعرف تنفيذ هاتين المهمتين - تغيير الحجم والضغط - بتحسين صورة للويب.

سأعرض لك أفضل الممارسات لتغيير حجم الصورة وكيفية القيام بذلك.

المضاعفات مع الصور سريعة الاستجابة

لنبدأ بالنظر إلى الصور سريعة الاستجابة - تلك التي يتم تغيير حجمها لتبدو جيدة على أحجام الشاشات المختلفة.

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

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

بالنسبة للجهاز المحمول ، يكون العرض الجيد جدًا للصورة هو 640 بكسل. يمكن أن يكون الارتفاع أي شيء تتمناه.

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

الصور على أجهزة مختلفة

دعنا نفكر في نفس الصورة على شاشة كبيرة جدًا أو شاشة تلفزيون - نعم يمكن الآن الوصول إلى مواقع الويب عبر التلفزيون الذكي الخاص بك.

قد تكون الصورة موضوعة في عمود على يسار النص.

قد يمتد عرض الشاشة كما هو الحال في إصدار الهاتف المحمول. نسمي هذه الصور البطل.

تخيل كم يجب أن تكون هذه الصورة كبيرة الآن؟

بالنسبة للتلفزيون ، ستكون صورة البكسل المثالية بعرض 1920 بكسل - أو أكثر.

إذا كنت قد قمت بالفعل بتقليص حجم الصورة 640 بكسل للهاتف المحمول ، فسيبدو الأمر مروعًا إذا حاولت الارتقاء بها إلى 1920 بكسل. كنت ستمتد أكثر من 400٪.

لا يبدو تحجيم الصور جيدًا - تتمدد وحدات البكسل وتظهر الصورة مشوشة.

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

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

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

ملحقات WordPress للصور التكيفية

هناك عدد قليل من مكونات WordPress الإضافية التي تساعد في تقديم حجم الصورة الصحيح للجهاز ، والتي تسمى الصور التكيفية.

في الأساس يتم تنزيل صورة صغيرة أولاً - سواء كان ذلك بالحجم أو الدقة.

إذا كانت دقة الشاشة كبيرة ، فإن المكون الإضافي يوفر الإصدار الأكبر. هذا يسرع وقت انتظار الزائر.

هذا هو الحل إذا كنت تريد استخدام صور البطل الكبيرة ولكنك قلق بشأن وقت التنزيل.

فيما يلي نوعان من الإضافات التكيفية للصور التي أحبها:

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

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

قم بتغيير حجم الصورة أولاً وضغط الحد الأدنى لإخراج KB. بمجرد تحميله على WordPress ، سيقوم المكوِّن الإضافي للصور التكيفية بالباقي.

لنبدأ في تغيير حجم الصورة للويب.

تغيير حجم صورة للويب - بالبكسل

مع وضع كل ما ناقشناه في الاعتبار ، اختر عرض صورتك.

• يحتاج المصور إلى صور عالية الجودة. لعرضها بملء الشاشة على شاشة كبيرة جدًا ، ستحتاج إلى صورة كبيرة جدًا. حجم الصور إلى ما لا يقل عن 1920 بكسل.
• أي شخص آخر ، أنصح بالذهاب إلى 1200 بكسل. هذا توازن جيد. سيرى الأشخاص على الشاشات الكبيرة جدًا بكسلًا على الصور ذات العرض الكامل ، لكنها مقايضة للحصول على صورة سريعة التحميل.

بالنسبة إلى موقع الويب والمدونة الخاصة بي ، أستخدم صورًا بحد أقصى 1200 بكسل عرضًا ، معظمها على الصفحات 800. وإليك السبب:

• لا يتم استخدام الصور ذات العرض الكامل على موقع الويب الخاص بي. أحب أن أبقي كل شيء سريعًا حقًا.
• عملي ليس مرئيًا بشكل خاص ، فالناس لا يحتاجون إلى رؤية صوري بهذه الدقة العالية.
• أستخدم صورًا منفصلة ذات حجم دقيق لـ Open Graph والتي لا تتطلب أي شيء أكبر من 1200.
• من Google Analytics ، أعلم أن الأشخاص الذين يزورون موقعي يستخدمون جهازًا محمولاً أو كمبيوتر محمولاً. معلومات مفيدة.

أترك الأمر لتقديرك.

برنامج مجاني لتحرير الصور

هناك الكثير من الأدوات المجانية المتاحة لك عبر الإنترنت بالإضافة إلى برامج تحرير الصور التي يمكن تنزيلها.

للصور التزم بتنسيق ملف JPEG ، وهذا ما سنغطيه هنا.

بالنسبة إلى المتجهات ، انتقل إلى PNG أو SVG - وهذا لبرنامج تعليمي مستقبلي.

برنامج تحرير الصور GIMP

برنامج GIMP (برنامج معالجة الصور GNU) هو محرر صور مجاني تمامًا.

قم بتنزيل الإصدار الثابت الحالي من GIMP من موقع الويب.

يوفر برنامج GIMP برنامجًا تعليميًا حول تغيير حجم (أبعاد) الصورة (مقياس).

محرري الصور على الإنترنت

سيمنحك البحث السريع عن "صورة تغيير حجمها عبر الإنترنت" في Google مجموعة كاملة من الخيارات لتمكينك من تحميل وتغيير حجم وضغط وتنزيل ملف Jpeg.

أول نتيجة وجدتها كانت resizeimage.net. سهل الاستخدام للغاية - فهو يقوم بقص الصورة وتغيير حجمها وضغطها.

إذا كنت ترغب في اقتصاص الصورة ، فاستخدم الخيار رقم 2 ، لكنني تجاوزت ذلك وذهبت مباشرة إلى الخيار رقم 4 حيث يمكنني تغيير حجمها بالبكسل.

ضع 1200 في حقل العرض ، نان في الارتفاع وحدد المربع للحفاظ على نسبة العرض إلى الارتفاع.

سيكون تنسيق صورة الإخراج JPG.

اختر خيار ضغط.

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

قلل جودة الصورة بحوالي 75٪ ، اعتمادًا مرة أخرى على مدى قسوة الصورة التي تريدها.

تغيير حجم الصورة في KBs - ضغط

يختلف الضغط كثيرًا عن تغيير الحجم. يجب ضغط جميع الصور قبل التحميل ، حتى إذا كنت تستخدم مكونًا إضافيًا للصور.

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

أثناء مرحلة الضغط ، حاول عدم المساس بجودة الصورة أكثر من اللازم.

حاول تحقيق التوازن بين الصورة التي تبدو جيدة وتنزيلها بسرعة.

يمكن ضغط الصور باستخدام برنامج GIMP أيضًا.

برنامج GIMP التعليمي حول تغيير حجم (حجم الملف) من Jpeg.