تحسين الصور للويب: تقنيات تحسين محركات البحث 2022 وسرعة الموقع

نُشر في الأصل في أغسطس 2020 وتم تحديثه للشمول في أكتوبر 2022.

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

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

الآن ، هناك الكثير من تقنيات تحسين الصور. لهذا السبب ينقسم هذا الدليل إلى قسمين:

• تحسين الصور لتحسين محركات البحث وإمكانية الوصول إليها :

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

• تحسين الصور لسرعة الموقع وتجربة المستخدم :

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

مع وضع ذلك في الاعتبار ، لنبدأ.

تقنيات تحسين الصور: تحسين محركات البحث وإمكانية الوصول

دعنا نبتعد عن الطريق:

الصور غير المحسّنة ستؤذي تصنيفاتك العضوية. فترة.

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

اختبر تحسينات صور NitroPack القوية على موقعك

في الوقت الحالي ، تظهر الصور في كل من بحث Google وصور Google.

على سبيل المثال ، إليك SERP للكلمة الرئيسية شديدة التنافسية - "وصفة بولونيز".

(إذا كنت تقرأ هذا قبل الغداء مباشرة ، فأنا آسف)

ابحث عن نفس الكلمة الرئيسية في صور Google وستجد نفس الصورة.

يوضح هذا المثال تمامًا قوة تحسين الصورة لتحسين محركات البحث.

باستخدام صورة واحدة فقط ، ينقر موقع BBC على مصدرين هائلين لحركة المرور .

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

دعونا نرى كيف يمكننا الوصول إلى هناك.

إعادة تسمية ملفات الصور الخاصة بك

بشكل افتراضي ، يتم تسمية معظم ملفات الصور بشيء مثل "IMG_010204".

هذا ليس مفيدًا بشكل خاص لأي شخص ، بما في ذلك Google.

تريد التأكد من أن Google تفهم ما تصوره كل صورة. هذا هو السبب في أن إعطاء ملفات صورك اسمًا وصفيًا يعد فوزًا سهلاً.

على سبيل المثال ، هذا هو اسم ملف صورة السباغيتي أعلاه:

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

كما ترى ، الاسم ليس خياليًا ، لكنه ينجز المهمة.

وهذا أفضل شيء في أسماء الملفات:

لا يحتاجون إلى أن يكونوا أكثر تفصيلاً . هذه هي وظيفة وصف بديل.

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

على سبيل المثال ، إذا كان اسم ملف الصورة هو "amazing-spaghetti-fettuccine-pasta-dish-recipe-cook.jpg" ، فستكون مرشحًا رئيسيًا لعقوبة حشو الكلمات الرئيسية.

باختصار ، اجعل أسماء الملفات بسيطة ووصفية . انها ليست علم الصواريخ.

استخدم نص بديل وصفي

النص البديل هو وصف الصورة (أو ما يعادله).

تعد إضافته أمرًا بالغ الأهمية بالنسبة لـ Google وللأشخاص الذين لديهم برامج قراءة الشاشة.

من المهم للغاية كتابة نص بديل جيد لجميع صورك. إنها أيضًا سهلة للغاية.

ما عليك سوى إضافة سمة alt إلى علامة الصورة ، مثل هذا:

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

إذن ، كيف تكتب نصًا بديلاً جيدًا؟

أولاً ، يجب أن تكون وصفيًا باستخدام النص البديل أكثر من اسم الملف.

دعنا نعود إلى صورة الوصفة الخاصة بنا:

هذا مثال على النص البديل الرائع - إنه وصفي ومفصل ، بدون أدوات اقتران أو كلمات رئيسية غير ضرورية.

يمكن لأي شخص تصور الصورة دون حتى النظر إليها.

لذا فإن كونك وصفيًا هو أولويتك الأولى.

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

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

كي تختصر:

• وصف الصورة بالتفصيل.

• تجنب حشو الكلمات الرئيسية ؛

• لا تكتب توضيحات زائدة عن الحاجة مثل "هذه صورة ..."

إذن ، كيف تكتب وصفًا بديلًا للصورة أدناه؟

مصدر صور الأسهم - https://unsplash.com/photos/eDXRq-2LfNM

نسخة جيدة ستكون "فورد موستانج السوداء الحديثة متوقفة بالقرب من الشجرة عند غروب الشمس".

يمكنك استخدام أدوات مثل Ahrefs و Screaming Frog للتحقق من جميع صور موقع الويب الخاص بك بحثًا عن نص بديل. إنه أسهل بكثير من القيام بذلك باليد.

يعد ملحق Alt Text Tester Chrome رائعًا أيضًا لهذا الغرض.

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

لا تضع نصًا مهمًا في صورة

هذه ليست تقنية بقدر ما هي الحس السليم.

ومع ذلك ، لا يزال الناس يخطئون في كل وقت.

لذا ، دعني أوضح ذلك:

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

تحقق من هذا المثال:

مصدر صور الأسهم - https://unsplash.com/photos/l8p1aWZqHvE

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

لكن هذه الطريقة في نقل المعلومات يمكن أن تدمر مُحسنات محركات البحث لديك.

إليكم السبب:

لا تستطيع Google رؤية هذا النص وتفسيره. إذا لم تكن قد قمت بتدوينها في HTML ، فلن تقوم بترتيب الكلمات الرئيسية المهمة.

الأشخاص الذين لديهم برامج قراءة الشاشة سيفقدون كل ذلك أيضًا.

علاوة على ذلك ، لا يمكن للزوار تمييز النص أو نسخه ، مما قد يكون مزعجًا للغاية.

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

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

استخدم البيانات المنظمة للمنتجات ومقاطع الفيديو والوصفات

البيانات المنظمة هي رمز مكتوب بتنسيق معين يسهل على محركات البحث تفسيرها.

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

لنلقي نظرة على مثال.

تحقق من كيفية تقديم Google لشذرات صغيرة من المعلومات تحت هذه الصورة:

البيانات المنظمة تجعل هذا ممكنًا.

وإليك كيف تبدو في كود الصفحة:

مثال آخر هو صفحة الوصفات الخاصة بنا من قبل:

هذه الكثير من المعلومات المفيدة للزوار قبل أن ينقروا على الرابط.

ومن خلال الجمع بين البيانات المنظمة وتقنيات تحسين محركات البحث الأخرى ، تحتل هذه الوصفة المرتبة الأولى والثانية في SERP:

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

يمكنك العثور على الكثير من النصائح والحيل لتطبيق البيانات المنظمة عبر الإنترنت.

لكن في نهاية المطاف ، لا أحد يستطيع أن يخبرك كيف تفعل ذلك بشكل أفضل من Google.

لذلك ، اتبع دائمًا إرشادات Google الرسمية لـ:

• إضافة الترميز إلى صفحات المنتج ؛

• إضافة الترميز إلى صفحات الفيديو ؛

• إضافة الترميز إلى الوصفات

قم بإنشاء ملف Sitemap للصور

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

تساعد ملفات Sitemap هذه Google في العثور على الصور التي ربما فاتتها بخلاف ذلك.

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

مرة أخرى ، اتبع إرشادات Google الرسمية لإنشاء خريطة موقع للصور.

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

وبهذا ، انتهينا من نصائح تحسين صورة تحسين محركات البحث وإمكانية الوصول.

دعنا ننتقل إلى السرعة وتجربة المستخدم.

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

لا يمكنك الحصول على موقع ويب سريع يحتوي على صور غير محسّنة.

والموقع الإلكتروني السريع أمر بالغ الأهمية لإرضاء زوارك.

فيما يلي بعض الأمثلة على قوة سرعة الصفحة:

• في عام 2012 ، خفضت شركة Walmart وقت تحميل موقعها بمقدار ثانية واحدة وشهدت زيادة بنسبة 2٪ في التحويلات ؛

• في عام 2017 ، خفضت Zitmaxx Wonnen وقت التحميل إلى 3 ثوانٍ وشهدت زيادة بنسبة 50٪ في تحويلات الأجهزة المحمولة وزيادة بنسبة 98.7٪ في أرباح الأجهزة المحمولة ؛

• أخيرًا ، في عام 2020 ، خفضت NDTV معدل الارتداد بنسبة 50٪ من خلال تحسين LCP و CLS.

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

بالطبع ، يعد تحسين السرعة أكثر من مجرد تحسين للصور.

ولكن هذا هو الشيء المهم:

غالبًا ما تكون الصور هي السبب الأكبر لبطء وقت تحميل موقع الويب. في الواقع ، حوالي 50٪ من جميع البايت في الصفحة المتوسطة عبارة عن بايتات للصور. ومنذ عام 2011 ، زادت وحدات بايت الصور بمعدل 5 أضعاف تقريبًا على الصفحة المتوسطة لسطح المكتب وأكثر من 7 أضعاف على متوسط ​​صفحة الجوّال!

المصدر - حالة صور أرشيف HTTP

هذا هو السبب في أن تحسين صورك يعد فوزًا كبيرًا في سرعة الموقع.

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

صعد سرعة موقعك على الويب باستخدام NitroPack - لا تتطلب مهارات تشفير

مع وضع ذلك في الاعتبار ، لنبدأ.

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

فيما يلي قائمة تحقق سريعة لاختيار تنسيق الصورة الصحيح:

• عندما يمكنك التضحية بالجودة من أجل الأداء ، استخدم JPEG . يمكن أن تساعدك أداة تحسين الصورة المجانية مثل Optimizilla في ضبط مستوى الضغط (سنتحدث عن الضغط قليلاً) لاختبار نسب جودة / حجم مختلفة ؛

• عندما تحتاج إلى الحفاظ على التفاصيل وتقديم صورة بأعلى جودة ممكنة ، استخدم PNG . لكن احرص على عدم الإفراط في استخدامه. كلما زادت الجودة ، زاد حجم الملف ؛

• بالنسبة للشعارات والأشكال الهندسية والفنون الجميلة ، استخدم SVG . بشكل عام ، استخدم الصور المتجهة كلما أمكن ذلك. تبدو مذهلة على جميع الأجهزة ولا تفقد الجودة عند توسيعها أو تقليصها ؛

• أخيرًا ، يمكن لتنسيق الصور من الجيل التالي مثل WebP تعزيز الأداء بشكل أكبر ، دون التضحية بالجودة. وفقًا لـ Google ، صور WebP أصغر بنسبة 26٪ من ملفات PNG و 25-34٪ أصغر من صور JPEG بجودة مماثلة. الجانب السلبي الوحيد هو أن تنسيقات الجيل التالي (بما في ذلك WebP) لا تدعم المتصفح بنسبة 100٪. وهذا يجعل تقديمها أكثر صعوبة نظرًا لأنه يتعين عليك الاحتفاظ بنسخة احتياطية في مكانها للمتصفحات القديمة.

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

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

هناك طريقتان لضغط حجم ملف الصورة - ضغط ضياع وبدون فقدان.

يزيل ضغط الصورة المفقود بعض بيانات البكسل. ضغط بلا خسارة لا.

في الواقع ، يتمثل الاختلاف بين تنسيقات الصور التي تحدثنا عنها للتو (JPEG و PNG و WebP وما إلى ذلك) في كيفية تطبيق هذين النوعين من الضغط.

JPEG هو مثال كلاسيكي لنوع الصورة المفقودة. PNG هو نوع غير ضياع. ويستخدم WebP كلاً من ضغط البيانات المنقوص وغير المنقوص.

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

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

هذا ما أعنيه:

إذا كان لديك مدونة أو موقع إخباري أو أي موقع آخر لا يتطلب صورًا فائقة الجودة ، فيمكنك زيادة الضغط المفقود.

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

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

لن ترى انخفاضًا كبيرًا في حجم الملف ، لكنك ستحافظ على الجودة المذهلة .

هناك العديد من أدوات ضغط الصور التي يمكنك استخدامها:

• بالنسبة للجمهور الأكثر تقنية ، يمكن لـ Guetzli و Imagemin القيام بعمل رائع ؛

• حتى الأدوات المجانية عبر الإنترنت مثل Compress JPEG و TinyJPG و Optimizilla يمكن أن تحقق نتائج جيدة ؛

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

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

وليس هناك طريقة أخرى للقيام بذلك إلى جانب الاختبار.

مؤخرًا فقط ، أصدرنا ميزة جديدة متطورة تقلل من أحجام ملفات الصور الخاصة بك حتى 4x - Adaptive Image Sizing. يستهدف هذا النوع من التحسين جميع الصور التي تم تحديدها بواسطة عنصر ترميز لصورة في HTML (بما في ذلك المعارض ، ودوامات العرض ، وشرائح التمرير ، وصور الجزء العلوي والسفلي).

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

استخدم شبكة توصيل المحتوى (CDN)

يعد إعداد CDN أحد أفضل الأشياء التي يمكنك القيام بها من أجل سرعة الموقع بشكل عام.

هذا ينطبق أيضا على تحسين الصورة.

إذا لم تكن معتادًا على شبكات CDN ، فراجع دليل CDN للمبتدئين. في الوقت الحالي ، إليك TL السريع ؛ DR:

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

المسافة كبيرة جدًا لدرجة أن زمن الانتقال أمر لا مفر منه.

تحل شبكات CDN هذه المشكلة.

إليك الطريقة:

تخزن CDN الإصدارات المخزنة مؤقتًا من موقع الويب الخاص بك في مواقع جغرافية مختلفة .

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

وينطبق الشيء نفسه على الزائرين في أمريكا الجنوبية أو إفريقيا أو آسيا أو في أي مكان آخر حيث يمتلك مزود CDN خوادم.

هذه هي قوة CDN - فهي تقصر المسافة بين زوارك وموقعك على الويب .

ومثل الأجزاء الأخرى من موقع الويب الخاص بك ، تصل الصور أيضًا إلى الزوار بشكل أسرع.

يمكنك أيضًا استخدام CDNs للصور - وهي CDN مصممة خصيصًا لتسليم الصور. لديهم بعض الفوائد الجيدة ولكنها ليست ضرورية. بالنسبة لمعظم مواقع الويب ، فإن CDN العادي سيفي بالغرض.

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

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

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

إلا أن الأمر ليس بهذه البساطة.

إذا كان عرض صورتك 700 بكسل ، فقد تبدو جيدة على شاشة 300 بكسل. ولكن لا يزال يتعين معالجة كل 700 بكسل . هذا مضيعة هائلة لعرض النطاق الترددي.

لذا ، كيف يمكنك الحفاظ على جودة صورتك وعدم إضاعة النطاق الترددي؟

استخدم السمة srcset .

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

لنلق نظرة على مثال سريع.

هذا رمز HTML قياسي لتحميل صورة:

يستخدم هذا الجزء من التعليمات البرمجية السمة src ، التي تخبر المتصفح بمكان العثور على الصورة.

دعنا نضيف srcset إلى المزيج:

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

هذه هي قوة srcset . تبدو صورنا رائعة دائمًا ، ولا يتعين علينا فعل أي شيء بعد الإعداد الأولي. يقوم المتصفح بكل المهام الثقيلة.

يستخدم موقع Airbnb هذا النهج:

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

للقيام بذلك ، استخدم DevTools من Chrome.

افتح صفحتك ، وانقر بزر الماوس الأيمن وحدد "فحص". تحتوي علامة التبويب "العناصر" على معلومات حول صورك.

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

ملاحظة أخيرة: يقوم WordPress (منذ الإصدار 4.4) تلقائيًا بإنشاء إصدارات مختلفة من صورك. يقوم أيضًا بإضافة سمة srcset .

إذا كنت من مستخدمي WordPress ، فأنت تحتاج فقط إلى توفير أحجام الصور الصحيحة.

قم بإزالة الصور غير الضرورية

هذه هي أبسط نصيحة لتحسين الصور وأكثرها إغفالًا.

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

إليك ما يمكنك فعله:

• افتح أهم صفحاتك وفكر فيما يحاولون تحقيقه ؛

• أثناء استعراضها ، سيتضح لك ما هي الصور التي يجب أن تكون موجودة وأيها لا ينبغي. لكن لا تبدأ في الحذف بعد ؛

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

• من المهم أن تبني هذا القرار على البيانات وليس على رأيك الشخصي. من خلال حفظ هذه البيانات ، يمكنك مقارنة صفحتك قبل وبعد إزالة الصور المعنية ؛

• اختبر كلا الإصدارين لبضعة أسابيع واختر فائزًا.

وإذا كنت تريد مقارنة كلا الإصدارين في الوقت الفعلي ، فيمكنك استخدام أداة مثل Google Optimize.

لا تفرط في استخدام صور المخزون

لا تفهموني خطأ - أنا أحب الأشياء المجانية بقدر ما أحب الرجل التالي.

والأشخاص الذين يقدمون صورهم عالية الجودة مجانًا يستحقون الكثير من الثناء.

ولكن…

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

على سبيل المثال ، كم مرة رأيت هؤلاء الأشخاص في مقال حول العمل الجماعي أو التعاون أو موضوع عام مشابه:

مصدر الصور الفوتوغرافية - https://unsplash.com/photos/Oalh2MojUuk

أو هذه الصورة في مواقع بيع الدورات أو الخدمات القانونية:

مصدر الصور الفوتوغرافية - https://unsplash.com/photos/5fNmWej4tAA

يؤدي البحث العكسي السريع عن الصورة لأول صورة إلى إرجاع حوالي 5800 نتيجة .

وحوالي 13500 للثاني.

نعم ، هذا ليس أصليًا للغاية. لكن مع ذلك ، هل هذه مشكلة كبيرة حقًا؟

نعم إنه كذلك.

تؤكد الأبحاث الحديثة أن الصور المخزنة يمكن أن تؤثر سلبًا على كل من صورة علامتك التجارية وتحسين محركات البحث . أوصي بشدة بقراءته.

إذا لم يكن لديك متسع من الوقت ، فإليك عرض أسعار يصف بشكل مثالي المشكلات المتعلقة بالصور المخزنة:

أسوأ جزء هو أنهم يظهرون نقصًا تامًا في الجهد.

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

لكن من فضلك ، كن استراتيجيًا حيال ذلك.

أعني بذلك ثلاثة أشياء:

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

• ثانيًا ، عندما يتعين عليك استخدام الصور المخزنة ، ابحث بشكل أعمق قليلاً وابحث عن تلك التي لم يتم استغلالها كثيرًا. فيما يلي قائمة تضم 24 موقعًا فريدًا لصور الأسهم يمكنك تصفحها.

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

نصيحة إضافية: تحميل كسول (تأجيل) الصور خارج الشاشة

لا تتعلق هذه النصيحة الأخيرة بتحسين الصورة حقًا ، ولكن يمكن أن يكون لها تأثير كبير على وقت التحميل الأولي.

في الواقع ، يمكن أن يؤدي تحميل الصور البطيئة إلى تسريع أوقات التحميل حتى أكثر من تحسين الصورة!

وإليك كيف يعمل:

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

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

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

إليك مثال على كيفية عمل التحميل البطيء:

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

الآن ، هناك طرق مختلفة لتنفيذ هذه التقنية:

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

• يمكنك استخدام مراقب التقاطع لتسجيل الصور التي يجب تحميلها ببطء. تتطلب هذه الطريقة كتابة القليل من JavaScript. يمكنك العثور على مثال رائع لمراقب التقاطع أثناء العمل هنا ؛

• يمكنك أيضًا أتمتة العملية باستخدام NitroPack. تقوم خدمتنا بتحميل جميع الصور (بما في ذلك الصور الخلفية).

للتعمق في هذا الموضوع ، راجع مقالتنا حول تأجيل الصور خارج الشاشة.

تحسين الصور باستخدام إضافات وخدمات WordPress

عادةً ، لا تتم معظم التحسينات التي تمت مناقشتها هنا يدويًا ، خاصةً على مواقع WordPress.

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

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

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

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

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

تحسين الصور وأساسيات الويب الأساسية من Google

إذا كنت تهتم بـ SEO ، فمن المحتمل أنك تهتم أيضًا بـ Core Web Vitals.

يمكن أن يتأثر اثنان من العناصر الأساسية الثلاثة للويب - أكبر رسم محتوى (LCP) وتغيير التخطيط التراكمي (CLS) - بشكل كبير من خلال تحسين الصورة.

إليكم السبب:

• يقيس LCP الوقت الذي يستغرقه ظهور أكبر عنصر فوق الجزء المرئي على الصفحة. هذا العنصر عادة ما يكون صورة. إذا لم يتم تحسين الصورة وتسليمها بسرعة ، فإن LCP يأخذ نجاحًا ، مما قد يؤدي إلى ضعف أداء Core Web Vitals ؛

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

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

ومع ذلك ، هناك كلمة تحذير عندما يتعلق الأمر بالتحميل البطيء:

يعد التحميل البطيء للصور دون توفير مساحة كافية لها وصفة لكارثة.

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

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

افكار اخيرة

الآن بعد أن فهمت ما يمكن أن يفعله تحسين الصورة ، دعني أكرر ثلاث نقاط مهمة:

• أولاً ، عندما يتعلق الأمر بـ SEO ، اتبع دائمًا أفضل ممارسات Google للعمل مع الصور. أنت حقًا لا تحتاج إلى معلم هنا. تمنحك Google جميع المعلومات مجانًا ؛

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

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

على سبيل المثال ، إليك ما يمكن أن يفعله NitroPack لك:

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

• تحويل WebP. بالنسبة لجميع المتصفحات التي تقدم دعم WebP ، سيقدم NitroPack إصدار WebP من صورك ؛

• تحجيم الصورة الاستباقي. NitroPack يحل مشكلة فقدان سمات العرض والارتفاع دون إضافتها. يؤدي هذا إلى تسريع عملية التقديم وتقليل تحولات التخطيط ؛

• تحجيم الصورة التكيفي (متوفر في الإصدار التجريبي). تعمل هذه الميزة على التأكد من تطابق الصور وعدم تجاوز حاوياتها ؛

• يأتي NitroPack أيضًا مع CDN مدمج ويقوم تلقائيًا بتحميل جميع الصور ومقاطع الفيديو وإطارات iFrames.

أخيرًا ، يحتوي NitroPack على كل ما تحتاجه لموقع ويب سريع.

إذا كنت ترغب في اختبار كل هذه الميزات ، فقم بالتسجيل للحصول على خطة NitroPack مجانية اليوم (لا يلزم وجود بطاقة ائتمان).