ستساعدك المقالة التالية: كيفية تحسين الصور على موقع الويب الخاص بك
يعد تحسين الصورة أحد العوامل التي يمكن أن تؤثر بشكل كبير على موقع الويب الخاص بك. يعتمد كل شيء بدءًا من وقت تحميل الصفحة وحتى إمكانية الزحف إلى الموقع عليها، ومع ذلك تظل واحدة من أكثر المعلمات التي يتم تجاهلها شيوعًا لتحسين الموقع.
ومع ذلك، إذا كنت تريد أن تأخذ تحسين محركات البحث (SEO) الخاص بك على محمل الجد وتجني المكافآت العديدة التي تأتي مع امتلاك موقع ويب محسّن جيدًا، فإن تعلم تحسين صورك هو أمر لا مفر منه.
إذا كانت هذه أولوية بالنسبة لك، فواصل القراءة لأن هذه المقالة ستتعمق في ماهية تحسين الصورة بالضبط وكيف يمكنك ممارستها بنجاح على موقع الويب الخاص بك للتأكد من توافقك مع أفضل الممارسات لموقعك.
ما هو تحسين الصورة؟
ببساطة، إنها ممارسة الحصول على صور بأعلى جودة ممكنة مع الحفاظ على حجم ملف الصورة منخفضًا في نفس الوقت. السبب وراء أهمية ذلك هو أنه يحسن وقت تحميل الصفحة.
الجانب الثاني لتحسين الصورة هو جانب تحسين محركات البحث (SEO). يتضمن ذلك تحسين صورك بهدف الحصول على صور مزخرفة وصور منتجات من موقع الويب الخاص بك، وخاصة مواقع التجارة الإلكترونية، بحيث يتم تصنيفها على محركات بحث الصور مثل Google.
ينصب التركيز الرئيسي لتحسين الصورة على كيفية تقليل حجم ملف الصورة دون فقدان الجودة بحيث تبدو صورك رائعة سواء تم عرضها على سطح المكتب أو الهاتف المحمول. ومن خلال إيجاد توازن بين العديد من المعلمات، يمكننا ضمان أن تكون صورنا بأفضل جودة ممكنة دون التأثير على أداء الويب.
ما أهمية تحسين الصورة؟
فلماذا تتحمل متاعب تحسين صورك على الإطلاق؟ حسنًا، تشكل الصور جزءًا كبيرًا من وزن موقع الويب الخاص بك، خاصة إذا لم يتم تحسينها. وهذا يعني أنها تؤثر على الوقت الذي يستغرقه تحميل موقع الويب الخاص بك بشكل كبير. في الواقع، إنها أحد أهم العوامل التي تهم وقت تحميل صفحتك.
يعد الوقت الذي يستغرقه تحميل المحتوى على موقعك أو تحميل الصفحة مهمًا جدًا لأنه هو ما يتعامل معه المشاهدون أثناء الوصول إلى موقع الويب الخاص بك. خاصة إذا كنت تدير موقعًا للتجارة الإلكترونية، فإن وقت تحميل الصفحة يؤثر بشكل كبير على مبيعاتك. لا ترغب في أن ينتظر العملاء حتى يتم تحميل صفحتك، خاصة عندما يمكنهم تغيير رأيهم بشأن عملية شراء إذا لم يتمكنوا من إجرائها بسرعة.
قد يكون الوقت الذي يستغرقه وصول البايت الأول من البيانات من خادم الويب إلى متصفحك بالمللي ثانية، ولكن في حالة تأخيره لمدة ثانية أو ثانيتين، يمكن أن يؤثر ذلك بشكل كبير على كيفية تصنيف خوارزمية Google لموقعك. والأهم من ذلك، أنه يمكن لجمهورك أو عملاء موقعك معرفة متى لا يتم تحميل الصفحة على الفور ومن المحتمل أن ينتقلوا إلى مصدر آخر للمعلومات أو المحتوى. كل هذا يمكن تجنبه من خلال تحسين صورك بشكل جيد.
كيف يمكنك تحسين الصور على موقع الويب الخاص بك؟
دعنا ننتقل مباشرة إلى بعض المعلمات المشاركة في تحسين موقع الويب. هذه بالتأكيد بعض من أهم الأمور التي يجب وضعها في الاعتبار عند تحسين موقعك، على الرغم من وجود العديد من الأشياء الأخرى التي يمكنك الاستفادة منها.
اختيار التنسيق الصحيح
هناك ثلاثة تنسيقات ملفات من المهم وضعها في الاعتبار أثناء اختيار تنسيق لصور الويب الخاصة بك. دعنا نلقي نظرة وكيف يمكنك التأكد من أنك اخترت التنسيق الصحيح.
- بي إن جي التنسيق ينتج أعلى جودة للصورة. ولسوء الحظ، فهو يحتوي أيضًا على أكبر حجم للملف. يتم استخدامها عندما تريد ضمان جودة صورة عالية لأنها غير مضغوطة وعلى الرغم من عدم فقدانها، يمكن تهيئتها لتمكين الضغط مع فقدان البيانات.
- جبيغ هو حل وسط بين جودة الصورة وحجم الملف. من خلال ضبط مستوى جودة JPEG، يمكنك تقليل الجودة قليلاً والحصول على حجم ملف أصغر بكثير.
- صور GIF رائعة للرسوم المتحركة وتدعم 256 لونًا فقط. تتميز ملفات GIF بضغط بدون فقدان البيانات، ونادرًا ما يتم استخدامها للصور الثابتة.
تعد ملفات JPEG رائعة لأنها تحتوي على وضعين للعرض يمكنك استخدامهما. يعرض التحميل الأساسي الصورة ذات الجودة الكاملة من أعلى إلى أسفل، ويبدأ التحميل التدريجي بصورة منخفضة الجودة ويزيد الجودة تدريجيًا مع تحميل الصفحة. بالنسبة للأشخاص الذين لديهم اتصالات إنترنت بطيئة، يمكن أن يؤدي استخدام ملفات JPEG إلى إنشاء تجربة مستخدم رائعة.
وبصرف النظر عن ذلك، يمكن لتنسيقات الجيل التالي مثل WebP وJPEG-XR تقديم جودة عالية مع وجود أحجام ملفات أصغر في نفس الوقت، وهو ما تريده بالضبط إذا كنت تتطلع إلى تقليل حجم ملف الصورة دون فقدان الجودة. إنها رائعة أيضًا لتحسين محركات البحث، ولكن لا تدعم جميع المتصفحات هذا التنسيق، لذلك قد يكون من الضروري إعداد صورة احتياطية بتنسيق آخر لعرضها.
تحسين أسماء الصور
يدرك أي شخص على دراية جيدة بتحسين محركات البحث (SEO) أن محركات البحث تزحف إلى أسماء ملفات الصور مع النص الموجود على صفحة الويب. لذا فإن التأكد من أن صورك تحتوي على أسماء ملفات وصفية وغنية بالكلمات الرئيسية وذات صلة يعد أمرًا مهمًا جدًا لتحسين محركات البحث للصور.
إذا كان موقعك يلبي قطاعًا محددًا من المحتوى، ففكر في الكلمات الرئيسية التي تتوافق مع هدف البحث الذي قد يكون لدى جمهورك. هذه تشكل أسماء رائعة لملفات الصور الخاصة بك. إذا لم تتمكن من التفكير في أسماء محددة للغاية، فاهدف إلى أن تكون وصفيًا.
تعد هذه طريقة رائعة لتحسين محركات البحث على الصفحة بالإضافة إلى الحصول على تصنيف أعلى في صفحات نتائج محرك البحث. بصرف النظر عن تحسين الصورة، إذا كان تحسين محركات البحث على الصفحة الخاص بك أمرًا جادًا بشأنه، فمن المفيد الحصول على أداة تحسين محركات البحث لمساعدتك في ذلك. من الواضح أن هذا يساعدك في تحسين الكلمات الرئيسية، وهو أمر تحتاجه لتسمية ملفات الصور الخاصة بك، ولكنه يساعد أيضًا في العديد من أفضل الممارسات الأخرى لتحسين محركات البحث.
التخزين المؤقت
يعد التخزين المؤقت طريقة رائعة لضمان ألا تكون أوقات تحميل الصفحة طويلة جدًا، خاصة إذا كان لديك الكثير من الصور على صفحاتك. مع التخزين المؤقت، يتم تخزين ملفات الصور في ذاكرة التخزين المؤقت للمتصفح أو الخادم الوكيل. يمكن أن يساعد هذا في تقليل الجانب الذي تم تنزيله وكذلك طلبات التطبيق لكل صفحة.
يتطلب هذا إعداد تخزين للصور على العديد من خوادم نقاط التواجد الموجودة حول العالم. يتم تقديم الصور من أقرب خادم ونتيجة لذلك يتم تسريع أوقات تحميل الصفحة بشكل ملحوظ.
تغيير حجم الصور
يؤثر الوقت الذي تستغرقه صفحتك للتحميل على تصنيفك، ولكن هذا يعني أيضًا أن أوقات التحميل الأسرع تعمل لصالحك. لن ينتظر معظم المستهلكين أكثر من بضع ثوانٍ حتى يتم تحميل صفحتك، لذلك من مصلحتك التأكد من تقليل أوقات تحميل صفحتك إلى الحد الأدنى.
إحدى الطرق للقيام بذلك هي تغيير حجم الصور الخاصة بك. يعد الموازنة بين الحجم والدقة عاملاً مهمًا يجب عليك مراعاته. كلما كانت الدقة أفضل، كلما زاد حجم الملف. حاول الاحتفاظ بالصور بأصغر حجم بحيث لا يزال يوفر التأثير البصري المطلوب. يمكنك أيضًا عرض صورة مصغرة فقط وتقديم الصورة كاملة الدقة عند الطلب فقط.
يمكن العثور على مثال رائع على ذلك في شركة المراتب الأمريكية موقع أميريسليب. لاحظ الصور المصغرة على جانب صورة المنتج. لا يتم تحميل الصورة بالحجم الكامل ذات الدقة العالية إلا بعد قيام المشاهد بالنقر فوق الصورة المصغرة المطلوبة. بهذه الطريقة، يتم تحسين الصور حتى لا تؤثر على أوقات تحميل الصفحة.
على الرغم من الصعوبة بعض الشيء، إلا أن القاعدة الأساسية الجيدة هي الاحتفاظ بالصور، خاصة لمواقع التجارة الإلكترونية، بحجم أقل من 70 كيلو بايت. تذكر أن امتلاك موقع ويب بطيء يكلفك إيرادات في الواقع، لذا خذ هذا الأمر على محمل الجد.
استخدم خرائط مواقع الصور
لا يستطيع Google الزحف إلى الصور التي لم يتم استدعاؤها على وجه التحديد في التعليمات البرمجية المصدر لصفحة الويب. تستخدم العديد من مواقع الويب النوافذ المنبثقة للصور ومعارض JavaScript وميزات أخرى مماثلة لتحسين تجربة التسوق بشكل عام. تكمن المشكلة في ذلك في أن برامج زحف الويب لا يمكنها تحديد موقع هذه الصور والزحف إليها، ونتيجة لذلك لن يساعد ذلك في ترتيبك.
الحل لهذه المشكلة هو حل بسيط. ما عليك سوى إدراج موقع هذه الصور في خريطة موقع الصور. يمكنك القيام بذلك إما من خلال سطر من التعليمات البرمجية في ملف robots.txt الخاص بك أو باستخدام Google Search Console لإرسال خريطة الموقع إلى Google. لا تنس إضافة علامات محددة إلى الصور التي تستخدمها، وإذا أردت، فلا تتردد في إنشاء خريطة موقع منفصلة معًا لسرد الصور حصريًا.
باستخدام خرائط مواقع Google، فإنك تسمح أيضًا لـ Google بالعثور على مزيد من المعلومات حول الصور الموجودة على موقع الويب الخاص بك مقارنةً بما قد يفعله بنفسه. هذا لا يضمن أن الصور ستتم فهرستها بواسطة Google، ولكنها بالتأكيد ممارسة رائعة لتحسين محركات البحث والتي يمكن أن تساعد موقع الويب الخاص بك في الحصول على تصنيف أعلى في صفحات نتائج محرك البحث أو SERPs.
تحسين السمات البديلة
في بعض الأحيان، لا تتمكن المتصفحات دائمًا من عرض الصور بشكل صحيح، وبالتالي فهي تحتوي على سمات بديلة تعمل كبدائل نصية للصور. تلعب سمات Alt أيضًا دورًا كبيرًا في إمكانية الوصول إلى الويب. حتى بعد عرض الصورة، اعتمادًا على إعدادات المتصفح الخاص بك، يمكنك التمرير فوق الصورة لرؤية نص السمة البديلة.
بالإضافة إلى قيمة تحسين محركات البحث (SEO) التي تضيفها السمات البديلة إلى موقع الويب الخاص بك، فإنها تلعب أيضًا دورًا مهمًا في مساعدتك على التصنيف بشكل أفضل على صفحات نتائج محرك البحث. شريطة أن تكون قد أضفت الكلمات الرئيسية ذات الصلة إلى الصور الموجودة على موقع الويب الخاص بك. إذا كنت تدير متجرًا للتجارة الإلكترونية، فمن المحتمل أن يكون هذا أمرًا عليك أن تأخذه على محمل الجد حتى يتم تصنيف منتجاتك في صور Google ونتائج البحث.
أدوات تحسين الصورة
أدوبي فوتوشوب ربما يكون البرنامج الأكثر شهرة عندما يتعلق الأمر بأي شيء متعلق بالصور. ولكن دون علم الكثيرين، تسمح لك Adobe بحفظ الصور التي تعمل عليها والتي تم تحسينها خصيصًا للويب.
للقيام بذلك، افتح الصورة التي تعمل عليها وحدد الخيار ملف >> حفظ للويب. في مربع الحوار المنبثق، سترى خيارات التنسيق المتنوعة التي يمكنك تحديدها. إذا قمت بتحديد JPEG، فيمكنك اختيار جودة الصورة التي تريدها وسيتم عرض حجم الملف ذي الصلة أسفلها.
إذا كنت تبحث عن المزيد من الخيارات، فاطلع على مقالتنا حول بدائل Adobe Photoshop المجانية.
تايني PNG هي أداة رائعة أخرى قائمة على المتصفح تعمل على تقليل حجم ملفات PNG الخاصة بك من خلال تقنية الضغط الذكية التي تؤدي إلى فقدان البيانات. كل ما عليك فعله هو الانتقال إلى موقع الويب الخاص بهم وسحب الصورة التي تختارها وإسقاطها، وسيسمحون لك بتنزيل النسخة المضغوطة. لديهم أيضًا موقع ويب مشابه للصور بتنسيق JPEG.
نصائح وحيل إضافية
هناك عدد قليل من الاختراقات التي يمكنك استخدامها عندما يتعلق الأمر بتحسين الصور على موقع الويب الخاص بك. دعونا نلقي نظرة على اثنين منها وكيف يمكن أن يساعدوا في تحسين وقت تحميل صفحة الويب الخاصة بك.
تحميل كسول
فكر في الطريقة التي تتصفح بها صفحة الويب عادةً. إذا كان المحتوى الذي تقرأه مثيرًا للاهتمام وجذابًا، فلن تقوم عادةً بالتمرير لأسفل بسرعة. وبدلاً من ذلك، فإنك تقضي قدرًا كبيرًا من الوقت في ما تقرأه وتتحرك ببطء نحو أسفل الصفحة. يستخدم التحميل البطيء نمط السلوك هذا لصالحه.
نظرًا لأنك تحتاج فقط إلى عرض الصور المرتبطة بالمحتوى الذي تقرأه والتي تقع ضمن نطاق رؤية القارئ، فليست هناك حاجة حقيقية لتحميل الصور على الفور في أسفل الصفحة. بدلاً من ذلك، يمكنك ببساطة تحميل صورة عنصر نائب وتحميل تلك الصور فقط عندما يقوم العارض بالتمرير لأسفل بدرجة كافية حتى تصبح مرئية.
لاحظ هذا المقال بواسطة مجلة لاك ماج على أفضل المكاتب الدائمة. ونظرًا لأنه يحتوي على عدد من المنتجات المعروضة، فهناك العديد من الصور لتحميلها على كل صفحة. ولكي لا يتأثر وقت التحميل بهذا، تم تمكين التحميل البطيء، كما يمكن رؤيته من خلال فحص عنصر الصورة.
من خلال تحميل تلك الصور فقط داخل المتصفح والتي يتم عرضها أولاً وترك صورة العنصر النائب في كل مكان آخر والتي يتم تحميلها فقط عندما يقوم العارض بالتمرير لأسفل لعرض الصورة المذكورة، يمكننا زيادة وقت تحميل الصفحة بشكل كبير دون المساس بجودة الصور. هناك العديد من المكونات الإضافية التي يمكن استخدامها للسماح بالتحميل البطيء.
طمس
تعد تقنية Blur Up طريقة رائعة لمنح جمهورك وهم وقت التحميل الأسرع. على الرغم من أن هذا لا يؤدي في الواقع إلى تحسين وقت تحميل صفحتك، إلا أن استخدام هذه التقنية على صورك هو الأفضل لأنها لا تزال أفضل من جعل جمهورك ينظر إلى شاشة فارغة.
على الرغم من أنك ترغب بشكل مثالي في تقليل حجم ملف الصورة دون فقدان الجودة، إلا أن هذا غير ممكن في بعض الأحيان، ويتبقى لك العمل مع ملفات صور كبيرة على الصفحة، مما يتسبب في بطء وقت التحميل. لإعطاء الوهم بوقت تحميل أسرع ضمن طريقة Blur Up، يمكنك تحميل LQI أو صورة ذات جودة أقل أولاً ثم الصورة بالحجم الكامل لاحقًا.
يعتقد المستخدم أن الصور يتم تحميلها بشكل أسرع مما هي عليه بالفعل، بل إن لديه شيئًا لينظر إليه بدلاً من شاشة فارغة. وهذا يخلق تجربة ممتعة أكثر للمستخدم وهو أحد أكثر الحيل المفيدة التي يمكنك توظيفها على موقعك.
اختبر، اختبر مرة أخرى، ثم اختبر المزيد
الهدف الأساسي من تحسين الصور على موقعك هو الحصول على نتائج أفضل، وهذا يعني معرفة موقعك قبل البدء. لا يمكنك قياس التحسن إذا كنت لا تعرف ما الذي يحتاج إلى تحسين. ولهذا السبب فإن الاختبار مهم للغاية. ابدأ بقياس السرعة والأداء الحاليين لموقعك.
بعد ذلك، اختبر العديد من الصور التي تحتاجها بالفعل على صفحتك. هل تحتاج إلى صور زخرفية في الخلفية؟ هل كل صورة منتج على موقعك ضرورية؟ ما هو عدد الصور التي ترغب في إزالتها من أجل تحسين وقت تحميل الصفحة؟ هذه كلها أسئلة مهمة عليك أن تطرحها على نفسك.
أخيرًا، حاول تحديد ما يصلح وما لا يصلح من خلال عملية الإزالة. إذا لاحظت نتائج رائعة من خلال ممارسات معينة، فقم بتدوينها، وإذا لم ترى أي نتائج، فاستمر في التجربة. تعد التجربة والخطأ طريقة رائعة لتحديد ما يجب الاستمرار فيه وما يجب تجاهله. تعتبر النقاط الموجودة في هذه الصفحة مكانًا رائعًا للبدء، ولكن تأكد من تحديث نفسك باستمرار بأحدث التنسيقات والتوصيات وأفضل الممارسات المتعلقة بتحسين الصورة. المكافآت دائما تستحق العناء.