كيفية ضمان أفضل حجم صورة للهاتف المحمول سرعة موقع الويب

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

هل تعلم أن 53 ٪ من مستخدمي الأجهزة المحمولة سوف يتخلىون عن صفحة إذا استغرق تحميلها أطول من 3 ثوان؟ الآن فكر في ذلك فيما يتعلق بمواقع الويب الخاصة بك. هذه جزء كبير من العملاء المحتملين الذين يختفيون ، لا يعودون أبدًا. أوقات التحميل البطيئة ليست مجرد محبط للزوار ؛ إنهم يؤذون خلاصة القول الخاصة بك. أنها تؤثر على تصنيفات محرك البحث الخاص بك (SERPs) ويجعل من الصعب على الناس العثور عليك في المقام الأول. في هذا المنشور ، سنعرض لك كيفية التحكم في هذه الصفحات الثقيلة وضمان أفضل حجم صورة لسرعة موقع الهاتف المحمول. سنقدم لك أيضًا بعض الأدوات الجيدة ، مثل Divi ، والتي تساعدك على عرض صورك بشكل استجابة.

لماذا سرعة الهاتف المحمول مهمة؟

تأثير موقع الويب البطيء أكثر من مجرد إزعاج. يمكن أن يؤثر على تجربة المستخدم (UX) ، وتحسين محرك البحث (SEO) ، وخلاصة القول الخاصة بك.

تخيل أنك تتصفح لباس صيفي جديد أو أهم سماعات الأذن الجديدة. يمكنك النقر على موقع ويب ، ويبدو أنك تشاهد الطلاء جافًا. بدأ الإحباط ، ومن المحتمل أن تنفخ للعثور على تاجر تجزئة آخر مع موقع أسرع. وهذا ما يسمى ترتد ، وهو أخبار سيئة للشركات عبر الإنترنت. وفقًا لـ DataBox ، يبلغ متوسط ​​معدل الارتداد حوالي 44 ٪. أي شيء أعلى من ذلك يمكن أن يؤدي إلى فقدان الإيرادات ونقص المشاركة ، مما يقتل أعمالًا عبر الإنترنت.

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

ومع ذلك ، فإن تأثير سرعة الهاتف المحمول الضعيف يتجاوز المستخدمين المحبطين والتصنيفات المنخفضة. يمكن أن تصل إلى النتيجة النهائية الخاصة بك. تخيل موقع ويب للتجارة الإلكترونية بطيئة التحميل المصمم باستخدام WordPress. هذه الثواني الإضافية (أكثر من 1-2 طويلة جدًا) يمكن أن تكلفك المبيعات. يعد إبقاء موقعك سريعًا على الأجهزة المحمولة أمرًا ضروريًا للإيرادات ، لذا فإن التأكد من عدم فقدان العملاء لأن موقع الويب الخاص بك يستغرق وقتًا طويلاً لتحميله أمر بالغ الأهمية.

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

أساسيات تحسين الصور لـ WordPress

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

1. اختر تنسيق الصورة الصحيح

يمكنك استخدام العديد من أنواع الصور على موقع WordPress الخاص بك ، بما في ذلك JPG و PNG و WebP. أيهما هو الأفضل لاستخدامه؟ دعنا نحفر بشكل أعمق في كل نوع صورة وأي المواقف الأفضل لاستخدامها.

• JPG: هذه مثل صورك اليومية. إنها رائعة للصور ذات التباين الواسع للألوان والتحولات السلسة ، مثل المناظر الطبيعية أو الصور. إنها جيدة لمعظم المواقف ، مثل خلفيات الأبطال ، وصور الفريق ، وصور منشور المدونة ، وما إلى ذلك. يمكن أن تكون JPGs بحجم غير لائق ، مما يجعلها أكبر في حجم الملف.
• PNG: PNGs مثالية للصور ذات الحواف الحادة ، مثل الشعارات أو الرسومات مع النص. إنها أيضًا رائعة للصور ذات الصور الكبيرة ذات اللون الصلب لأنها تحافظ على ألوان واضحة ونظيفة. ومع ذلك ، تميل PNGs إلى الحصول على حجم ملف أكبر ، لذلك استخدم ملفات PNG لمناطق أصغر من التصميم الخاصة بك لتقليل حجمها.
• WebP: يقدم WebP من Google ، ويب ، في كثير من الأحيان أفضل ضغط ، مما يؤدي إلى حجم ملف أصغر بكثير ، حتى عند استخدام صور كبيرة (مثال: 1920px x 1080px). جودة الصورة ليست جيدة مثل JPG ، ولكن الفرق في الحجم بين الاثنين مهم.

2. تغيير حجم الصور

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

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

3. اضغط على غير ضروري

عندما يتعلق الأمر بحجم الصورة ، يكون أصغر أفضل. عند استخدام الصور في WordPress ، نريد جعل الصور صغيرة قدر الإمكان دون التضحية بالجودة. يمكنك استخدام أدوات الضغط مثل الإضافات تحسين الصور للقيام بالرفع الثقيل لك. أدوات مثل EWWW Image Optimizer جيدة ، لكننا سنغوص في الأدوات لاحقًا في هذا المنشور.

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

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

4. تحميل الصور عندما تكون جاهزة لمشاهدتها

خطوة أخرى يمكنك اتخاذها هي تحميل الصور كسول على WordPress. تخيل التمرير لأسفل صفحة طويلة. هل تحتاج حقًا إلى تحميل جميع الصور في وقت واحد؟ ربما لا. يقوم التحميل البطيء بتحميل الصور التي تحتاجها فقط لعرض الصفحة ، ووضع تلك الموجودة في أسفل الصفحة التي تنتظر التحميل بمجرد الوصول إليها. يمكن بسهولة إضافة المكونات الإضافية ، مثل Rocket WP ، بسهولة إلى تحميل موقع WordPress الخاص بك. سيؤدي إلى تسريع أوقات تحميل الصفحة الأولية ، وهو أمر ضروري لإبقاء زوارك سعداء وحجم صفحتك لأسفل.

أفضل الممارسات بُعد الصورة

عندما يتعلق الأمر بأبعاد الصورة ، فهناك بعض الممارسات الرئيسية التي يجب وضعها في الاعتبار لضمان تحميل موقع الويب الخاص بك بسرعة وتبدو رائعة على جميع الأجهزة:

استخدم أحجام الصور المستجيبة

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

نسبة العرض إلى الارتفاع

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

تجنب الإفراط في الحجم

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

اختبار عبر الأجهزة

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

النظر في ضغط الصورة

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

ما هي أفضل الأدوات لتغيير حجم الصور في WordPress؟

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

1. WordPress Plugins

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

• EWWW Image Optimizer: خيار قوي مع ميزات مثل التحسين بالجملة وتحسين الخلفية والتحويل إلى تنسيق WebP. يوفر EWWW Image Optimizer خطة مجانية مع استخدام محدود وخطط مدفوعة تبدأ من 8 دولارات شهريًا.
• shortpixel: معروف بخوارزميات الضغط الممتازة والقدرة على تقليل أحجام ملفات الصور بشكل كبير مع الحفاظ على الجودة. يقدم ShortPixel خطة مجانية مع استخدام محدود وخطط شهرية تبدأ من 9.99 دولار شهريًا.
• Optimole: يؤكد السرعة والأداء. يستخدم نظامًا قائمًا على السحابة لتحسين الصور والتسليم. يقدم Optimole خطة مجانية مع استخدام محدود وخطط مدفوعة تبدأ من 22.99 دولار شهريًا.
• WP Smush : خيار شائع ومصنف للغاية. تقدم Smush خططًا مجانية ومدفوعة (بدءًا من 3 دولارات شهريًا) مع ميزات مثل التحسين التلقائي ، والضغط المفقود/الخسارة ، والتحميل البطيء ، وتحويل الويب.
• Imagify: مكون إضافي يعمل بذات منظمة العفو الدولية يركز على ضغط عالي الجودة مع الحد الأدنى من الخسارة. يوفر Imagify خطة مجانية مع استخدام محدود وخطط مدفوعة تبدأ من 11.99 دولار شهريًا.

2. Divi (موضوع WordPress و Page Builder)

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

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

تغيير الصور للشاشات الصغيرة

ضمن أي وحدة تصميم تحتوي على صورة ، تتيح لك عناصر التحكم المستجيبة لـ Divi عرض صورة خلفية واحدة لسطح المكتب بينما يتم عرض واحدة مختلفة للأجهزة اللوحية والأجهزة المحمولة. على سبيل المثال ، أثناء تحرير قسم Hero على موقع ويب Divi ، يمكنك إضافة صورة خلفية تقيس 1920 بكسل × 1080 بكسل ، وهو الحجم المثالي للشاشات الكبيرة. قد لا تبدو عرض الصورة نفسها على جهاز محمول جيدًا ، اعتمادًا على الصورة المستخدمة. لذلك ، يتضمن Divi إعدادات تتيح لك إضافة صورة خلفية أصغر (أو صورة مختلفة تمامًا) للشاشات الأصغر.

وضع الخلفية

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

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

يحتوي Divi على تحميل كسول مدمج

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

لمعرفة المزيد حول استخدام الصور داخل Divi ، تحقق من دليلنا النهائي لاستخدام الصور داخل Divi.

احصل على ديفي

3. ديفي الذكاء الاصطناعي

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

على سبيل المثال ، تحتاج إلى صورة لسلسلة جبال مسيرة مغطاة بالثلوج لأعمال تأجير التزلج على الجليد. لقد بحثت عن مواقع صور خالية من الملوك ولكن لا يمكنك العثور على ما تريد. يمكن لـ Divi AI إنشاء تلك الصورة لك مع الحجم الذي تحدده.

وبفضل عناصر التحكم المستجيبة لـ Divi ، يمكنك أيضًا استخدام Divi AI لإنشاء صور للشاشات الأصغر.

Divi AI لا يخلق صورًا جميلة فقط. يخلق صورًا ذكية . يمكنك إخبار Divi AI بالضبط ما هو الحجم الذي تحتاجه ، ويوفره.

احصل على Divi AI

يقدم Divi تغيير حجم الصور لمواقع الويب المحمولة نسيم

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

لمزيد من التحكم ، استفد من قوة الإضافات مثل EWWW Image Optimizer لزيادة ضغط الصور وضبط سرعة موقع الويب الخاص بك. يتيح لك الجمع بين نقاط قوة Divi والأدوات القوية إنشاء موقع ويب يبدو مذهلاً ويتم تحميله بسرعة ، مما يجعل زوارك سعداء وعملك يزدهرون.

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

• كيفية تعزيز نقاط Google PageSpeed ​​Insights لـ WordPress
• 12 أفضل ملحقات تحسين سرعة WordPress (في المرتبة)
• تحسين سرعة Divi: الدليل النهائي
• 5 أسرع شركات استضافة WordPress (تم اختبارها)