تحسين الصور لموقع الويب الخاص بك على WordPress (في 4 خطوات بسيطة)

نشرت: 2015-06-17
تحديث في

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

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

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

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

سيؤدي تقليل حجم الصورة إلى تسريع موقعك ؛ والتي قد تكون فوائدها أكبر مما تعرف.

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

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

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

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

يوضح مخطط المعلومات الرسومي KissMetrics هذا بإيجاز سبب أهمية سرعة الموقع.
يوضح مخطط المعلومات الرسومي KissMetrics هذا بإيجاز سبب أهمية سرعة الموقع.

والأهم من ذلك ، يجب أن تفهم أنه مقابل كل ثانية تتأخر فيها صفحتك ، يمكن أن تلاحظ انخفاضًا بنسبة 7٪ في التحويلات . إذا أخذنا هذا الرقم كمؤشر ، إذا ربحت ، على سبيل المثال ، 3000 دولار شهريًا من موقعك ، فستفقد 210 دولارات من الإيرادات في كل قلب في التقويم - 2520 دولارًا من الخسائر على مدار العام.

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

قامت Google بتجربة شيقة لتقييم تأثير سرعة الموقع. بعد أن قال بعض المستخدمين إنهم يفضلون 30 نتيجة بحث لكل صفحة ، جربتها الشركة على بضع صفحات. ما وجدوه هو أن إضافة النتائج الإضافية أضاف نصف ثانية لأوقات التحميل - وخفض حركة المرور بنسبة 20٪.

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

الخطوة 1: قص صورك

أمثلة على اقتصاص الصورة

هذه الخطوة الأولى بسيطة نوعًا ما: قص صورك.

لماذا ا؟ سببان:

  1. النداء الجمالي.
  2. حجم ملف أقل.

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

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

الخطوة 2: اختر نوع الملف الصحيح

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

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

فيما يلي تنسيقات الملفات الرئيسية التي يجب أن تضعها في اعتبارك:

JPEG

مثال JPEG
مثال على صورة غير مضغوطة (أعلى) مقابل ضغط JPEG "المنقوص" (أسفل).

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

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

GIF

مثال GIF

على الرغم من كونها أقدم أنواع ملفات الصور الشائعة الاستخدام اليوم ، لا تزال ملفات GIF مفيدة.

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

بي إن جي

مثال على خصائص شفافية PNG.
مثال على خصائص جودة وشفافية PNG الواضحة.

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

SVG

مثال SVG
مثال على خصائص تحجيم SVG.

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

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

شعار TinyPNG
TinyPNG هي أداة ضغط الصور المفضلة لدي.

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

تقوم برامج تحسين الصور بالكثير من الرفع الثقيل. فيما يلي بعض الأشياء الرائعة:

  • TinyPNG. يقلل هذا التطبيق المستند إلى الويب بشكل انتقائي من عدد الألوان في ملف PNG ، مما يقلل حجم الملف مع اختلاف شبه غير مرئي في جودة الصورة.
  • JPEG ميني. يعتمد هذا البرنامج على تقنية معلقة ببراءة اختراع تسعى إلى تقليل حجم الصورة قدر الإمكان دون التأثير على الجودة. يمكنك الحصول على نسخة تجريبية مجانية أو الدفع مقابل استخدامها بشكل مستمر.
  • الشغب. تستخدم أداة Radical Image Optimization Tool ، التي يمكنك تنزيلها مجانًا ، مجموعة متنوعة من الأساليب لتقليل حجم ملف الصور. البرنامج أنيق لأنه يمنحك عرضًا جنبًا إلى جنب للصورة الأصلية والصورة المحسّنة حديثًا.
  • ImageOptin. هذا تطبيق مجاني لنظام التشغيل Mac يستخدم أيضًا مجموعة متنوعة من التقنيات لتقليل حجم الصورة مع الحفاظ على الجودة قدر الإمكان.

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

  1. محسن صور EWWW
  2. TinyPNG لـ WordPress
  3. الفسفور الابيض Smush.it

الخطوة 4: إنشاء الصور المصغرة

لقطة شاشة لـ WordPress تعرض مستخدمًا يقوم بتبديل خيار "ارتباط إلى" تعد الصور المصغرة طريقة رائعة لتحقيق التوازن بين حجم الملف الصغير والصور الكبيرة عالية الدقة.

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

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

خاتمة

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

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

اعتمادات الصورة: ويكيميديا