ثق بنا ، فأنت لا تريد أن تكره Google موقع الويب الخاص بك. لحسن الحظ ، يمكنك تقليل أحجام ملفات صورتك للمساعدة في تحسين أداء موقع الويب الخاص بك. تتمثل إحدى مشكلات تنسيقها في أن التعديلات غالبًا ما تقلل من جودتها (والتي بدورها قد تجعل الزائر يكره موقع الويب الخاص بك). هذا ليس شيئًا سيئًا طالما أنك لا تجعلهم قبيحين. هناك بعض الحيل والتقنيات التي تتيح لك تقليل حجم ملف الصورة مع الاحتفاظ بها بشكل كافٍ لعرضها بفخر على موقع الويب الخاص بك. لذلك دعونا نلقي نظرة على كيفية تنسيق صورك دون جعلها قبيحة ، وكذلك كيفية تحسين الصور للويب والأداء .
جرب نسخة تجريبية مجانية
ماذا يعني تحسين الصور؟
تعمل الصور الكبيرة على إبطاء صفحات الويب الخاصة بك مما يخلق تجربة مستخدم أقل من الأمثل. تحسين الصور هو عملية تقليل حجم ملفها ، باستخدام إما مكون إضافي أو نص برمجي ، مما يؤدي بدوره إلى تسريع وقت تحميل الصفحة. الضغط الخاسر وغير المنقوص هما طريقتان تستخدمان بشكل شائع.
أولاً ، لماذا تحتاج إلى تنسيق صورك؟ ما هي المنافع؟ هناك العديد من الفوائد لتحسين أداء صورك. وفقًا لأرشيف HTTP ، اعتبارًا من نوفمبر 2018 ، تشكل الصور في المتوسط 21٪ من إجمالي وزن صفحة الويب . لذلك عندما يتعلق الأمر بتحسين موقع وورد بريس الخاص بك ، فبعد محتوى الفيديو ، فإن الصور هي إلى حد بعيد المكان الأول الذي يجب أن تبدأ فيه!
إنها أكثر أهمية من النصوص والخطوط. ومن المفارقات أن سير عمل تحسين الصور الجيد هو أحد أسهل الأشياء التي يمكن تنفيذها ، ومع ذلك يتجاهل الكثير من مالكي مواقع الويب ذلك.
متوسط البايت لكل صفحة (كيلو بايت)
متوسط البايت لكل صفحة (كيلو بايت)
هنا نظرة على الفوائد الرئيسية.
سيؤدي ذلك إلى تحسين سرعة تحميل صفحتك (راجع دراسة الحالة أدناه لمعرفة مدى تأثيرها على سرعتك). إذا كانت صفحتك تستغرق وقتًا طويلاً لتحميلها ، فقد يتعب الزائرون من الانتظار وينتقلون إلى شيء آخر. لمزيد من المعلومات حول تحسين وقت تحميل صفحتك ، راجع دليل تحسين سرعة الصفحة التفصيلي الخاص بنا .
بالاقتران مع مكون إضافي SEO وورد بريس رائع ، فإنه يحسن SEO الخاص بك . موقعك سيحتل مرتبة أعلى في نتائج محرك البحث. الملفات الكبيرة تبطئ موقعك وتكره محركات البحث المواقع البطيئة. من المحتمل أيضًا أن يزحف محرك بحث Google إلى صورك ويفهرسها بشكل أسرع للبحث عن الصور من Google. هل تشعر بالفضول بشأن النسبة المئوية لحركة المرور التي تأتي من بحث الصور من Google؟ يمكنك استخدام مكون إضافي لبرنامج Google Analytics وورد بريس أو مقطع للتحقق من حركة البحث عن الصور من Google .
سيكون إنشاء النسخ الاحتياطية أسرع.
تستخدم أحجام ملفات الصور الأصغر نطاقًا تردديًا أقل. الشبكات والمتصفحات ستقدر هذا.
يتطلب مساحة تخزين أقل على الخادم الخاص بك (يعتمد هذا على عدد الصور المصغرة التي تقوم بتحسينها)
تشكل الصور في المتوسط 21٪ من الوزن الإجمالي لصفحة الويب. 😮 تحسينها!
انقر للتغريد
الهدف الأساسي من تنسيق صورك هو إيجاد التوازن بين أقل حجم للملف وجودة مقبولة . هناك أكثر من طريقة لإجراء كل هذه التحسينات تقريبًا. واحدة من أكثر الطرق شيوعًا هي ضغطها ببساطة قبل التحميل إلى وورد بريس . عادة ، يمكن القيام بذلك في أداة مثل Adobe Photoshop أو Affinity Photo. يمكن أيضًا تنفيذ بعض هذه المهام باستخدام المكونات الإضافية ، والتي سنناقشها أكثر أدناه.
الأشياء الأساسية اثنين للنظر هي تنسيق الملف و نوع الضغط الذي تستخدمه. باختيار التركيبة الصحيحة من تنسيق الملف ونوع الضغط ، يمكنك تقليل حجم صورتك بما يصل إلى 5 مرات. سيتعين عليك تجربة كل صورة أو تنسيق ملف لمعرفة الأفضل.
قم بتغيير مضيف وورد بريس الخاص بك لتحسين صورك ومشاهدة زيادة في السرعة تزيد عن 45٪ في تحميل الصفحة. جرب Kinsta مجانًا .
قبل أن تبدأ في تعديل صورك ، تأكد من أنك اخترت أفضل نوع ملف . هناك عدة أنواع من الملفات التي يمكنك استخدامها:
PNG – تنتج صورًا عالية الجودة ، ولكن لها أيضًا حجم ملف أكبر. تم إنشاؤه كتنسيق صورة بدون فقد ، على الرغم من أنه يمكن أن يكون أيضًا مع فقدان البيانات.
JPEG – يستخدم تحسينًا مع فقدان البيانات وبدون فقدان البيانات . يمكنك ضبط مستوى الجودة لتحقيق توازن جيد بين الجودة وحجم الملف.
GIF – يستخدم 256 لونًا فقط. إنه الخيار الأفضل للصور المتحركة. يستخدم فقط ضغط بدون خسارة.
هناك العديد من الأنواع الأخرى ، مثل JPEG XR و WebP ، لكنها غير مدعومة عالميًا من قبل جميع المتصفحات . من الناحية المثالية ، يجب عليك استخدام JPEG أو JPG للصور التي تحتوي على الكثير من الألوان و PNG للصور البسيطة.
(القراءة المقترحة: JPG مقابل JPEG: فهم تنسيق ملف الصور الأكثر شيوعًا )
فيما يلي مثال لما يمكن أن يحدث عند ضغط الصورة أكثر من اللازم. الأول هو استخدام معدل ضغط منخفض للغاية ، مما ينتج عنه أعلى جودة (لكن حجم ملف أكبر). والثاني هو استخدام معدل ضغط مرتفع للغاية ، مما ينتج عنه صورة منخفضة الجودة للغاية (لكن حجم ملف أصغر). ملحوظة: الصورة الاصلية التي لم تمسها هي 2.06 ميغا بايت.
ضغط منخفض عالي الجودة jpg
ضغط منخفض (جودة عالية) JPG – 590 كيلوبايت
ضغط عالي جودة منخفضة jpg
ضغط عالي (جودة منخفضة) JPG – 68 كيلوبايت
كما ترى الصورة الأولى أعلاه هي 590 كيلو بايت. هذا كبير جدًا لصورة واحدة! من الأفضل عمومًا الاحتفاظ بإجمالي وزن صفحة ويب أقل من 1 أو 2 ميغابايت. 590 كيلو بايت سيكون ربع ذلك بالفعل. من الواضح أن الصورة الثانية تبدو مروعة ، لكنها لا تتجاوز 68 كيلوبايت. ما تريد القيام به هو العثور على وسيط سعيد بين معدل الضغط (الجودة) وحجم الملف.
لذلك أخذنا الصورة مرة أخرى بمعدل ضغط متوسط وكما ترى أدناه ، تبدو الجودة جيدة الآن وحجم الملف هو 151 كيلوبايت ، وهو مقبول لصورة عالية الدقة. هذه الصورة أصغر بمقدار 4 مرات تقريبًا من الصورة الأصلية ذات الضغط المنخفض. عادةً ما تكون الصور الأبسط مثل PNG أقل من 100 كيلوبايت أو أقل للحصول على أفضل أداء.
ضغط متوسط jpg بجودة متوسطة
ضغط متوسط (جودة رائعة) JPG – 151 كيلوبايت
من المهم أيضًا أن تفهم أن هناك نوعين من الضغط يمكنك استخدامهما ، ضياع وغير ضياع.
ضياع – هذا عامل تصفية يزيل بعض البيانات. سيؤدي هذا إلى تدهور الصورة ، لذلك عليك توخي الحذر بشأن مقدار تقليل الصورة. يمكن تصغير حجم الملف بمقدار كبير. يمكنك استخدام أدوات مثل Adobe Photoshop أو Affinity Photo أو برامج تحرير الصور الأخرى لضبط إعدادات جودة الصورة. المثال الذي استخدمناه أعلاه يستخدم ضغطًا مع فقدان البيانات.
ضياع – هذا هو عامل التصفية الذي يضغط البيانات. هذا لا يقلل من الجودة ولكنه سيتطلب فك ضغط الصور قبل أن يتم عرضها. يمكنك إجراء ضغط ضياع على سطح المكتب باستخدام أدوات مثل فوتوشوب، FileOptimizer ، أو ImageOptim .
من الأفضل تجربة تقنيات الضغط لمعرفة الأفضل لكل صورة أو تنسيق. إذا كانت أدواتك تحتوي على الخيار ، فتأكد من حفظ الصورة للويب. هذا خيار في العديد من برامج تحرير الصور وسيمنحك تعديلات الجودة حتى تتمكن من أداء الضغط الأمثل. ستفقد بعض الجودة ، لذا جرب للعثور على أفضل توازن يمكنك دون جعل الصور قبيحة.
هناك الكثير من الأدوات والبرامج المتاحة ، سواء المتميزة أو المجانية ، التي يمكنك استخدامها لتحسين صورك. يمنحك البعض الأدوات اللازمة لأداء التحسينات الخاصة بك والبعض الآخر يقوم بالعمل نيابة عنك. نحن شخصياً من كبار المعجبين بـ Affinity Photo ، لأنه رخيص ويمنحك ميزات متطابقة تقريبًا مع ميزات Adobe Photoshop.
تقارب الصورة
ضغط الصورة في Affinity Photo
فيما يلي بعض الأدوات والبرامج الإضافية التي يمكنك التحقق منها:
أدوبي فوتوشوب
الأعرج
Paint.NET
GIFsicle
JPEGtran
JPEG ميني
OptiPNG
بابوا نيو غينيا
FileOptimizer
ImageOptim
تريميدج
ImageResize.org
في الماضي ، كان من المهم جدًا تحميل الصور لتغيير حجمها وعدم السماح لـ CSS بتغيير حجمها. ومع ذلك ، لم يعد هذا مهمًا لأن وورد بريس 4.4 يدعم الآن الصور المتجاوبة (لم يتم تصغيرها بواسطة CSS). بشكل أساسي ، يقوم وورد بريس تلقائيًا بإنشاء عدة أحجام لكل صورة يتم تحميلها إلى مكتبة الوسائط. من خلال تضمين الأحجام المتوفرة للصورة في إحدى srcset السمات ، يمكن للمتصفحات الآن اختيار تنزيل الحجم الأنسب وتجاهل الأحجام الأخرى. شاهد مثالاً لما تبدو عليه شفرتك بالفعل أدناه.
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
مثال على الصور المتجاوبة srcset في الكود
مثال على الصور المتجاوبة srcset في الكود
لذلك مع المزيد والمزيد من شاشات HiDPI في الوقت الحاضر ، قد يكون من الجيد العثور على وسيط سعيد. قل 2x أو 3x عمود موقع الويب الخاص بك أو حجم div ، ولكن لا يزال أقل من الحجم الأصلي. سيعرض المتصفح المتصفح الصحيح بناءً على دقة الجهاز.
تنشئ مكتبة وسائط وورد بريس صورًا مصغرة بناءً على إعداداتك . ومع ذلك ، لا يزال يتم الاحتفاظ بالأصل ولم يمسها. إذا كنت ترغب في تغيير حجم صورك وتوفير مساحة على القرص من خلال عدم حفظ النسخة الأصلية ، فيمكنك استخدام مكون إضافي مجاني مثل Imsanity .
إعدادات وسائط وورد بريس
إعدادات وسائط وورد بريس
يسمح لك Imsanity بتعيين حد للعقل بحيث يتم تقييد جميع الصور التي تم تحميلها بحجم معقول لا يزال أكبر من الحجم الكافي لاحتياجات موقع الويب النموذجي.
يتم ربط Imsanity بـ وورد بريس مباشرة بعد تحميل الصورة ، ولكن قبل حدوث معالجة وورد بريس. لذلك يتصرف وورد بريس بالطريقة نفسها تمامًا من جميع النواحي ، إلا أنه سيكون كما لو أن المساهم قد قام بتحجيم صورته إلى حجم معقول قبل التحميل.
إذا كنت تبحث عن أداة لتوفير مساحة أثناء تنظيف مكتبة الوسائط أيضًا ، فيمكنك استخدام منظف الوسائط للعثور على ملفات الوسائط غير المستخدمة. سيقوم المكون الإضافي بفحص جميع ملفات الوسائط الخاصة بك وسرد الملفات غير المستخدمة في لوحة معلومات Media Cleaner حتى تتمكن من تصفحها وحذفها.
يطبق Media Cleaner نظامًا ذكيًا للمهملات: عندما يتم حذف الملفات ، يتم نقلها إلى دليل سلة المهملات. بهذه الطريقة ، يمكنك اختبار موقع الويب الخاص بك لفترة والتأكد من أن كل شيء على ما يرام. إذا كان ملف أو إدخال وسائط مفقودًا ، فيمكنك استعادته بسهولة بنقرة واحدة أو ببساطة إفراغ سلة المهملات إذا كان كل شيء يبدو جيدًا بالنسبة لك.
لحسن الحظ ، مع وورد بريس ، ليس عليك القيام بكل التنسيق أو الضغط يدويًا. يمكنك استخدام المكونات الإضافية للقيام ببعض الأعمال على الأقل نيابة عنك تلقائيًا. هناك العديد من المكونات الإضافية التي ستعمل تلقائيًا على تحسين ملفات الصور الخاصة بك أثناء تحميلها. سيقومون أيضًا بتحسين الصور التي قمت بتحميلها بالفعل. هذه ميزة مفيدة – خاصة إذا كان لديك بالفعل موقع ويب مليء بالصور. إليك نظرة على بعض أفضل المكونات الإضافية لتنسيق صورك للحصول على أداء أفضل.
من المهم ألا تعتمد فقط على المكونات الإضافية نفسها. على سبيل المثال ، لا يجب أن تقوم بتحميل صور بحجم 2 ميغابايت إلى مكتبة وسائط وورد بريس الخاصة بك. يمكن أن يؤدي هذا إلى استهلاك مساحة قرص مضيف الويب بسرعة كبيرة. أفضل طريقة هي تغيير حجم الصورة بسرعة في أداة تحرير الصور مسبقًا ، ثم تحميلها واستخدام أحد المكونات الإضافية التالية لتقليلها بشكل أكبر.
تخيل محسن الصورة
مُحسِّن صور البكسل القصير
أوبتيمول
سحابة EWWW Image Optimizer
محسن الصور Optimus
WP Smush
TinyPNG
إعادة تدوير الصورة
تخيل محسن الصورة
تخيل البرنامج المساعد Image Optimizer
تم إنشاء Imagify بواسطة نفس الفريق الذي طور WP Rocket ، والذي ربما يكون معظمكم على دراية به. إنه متوافق مع WooCommerce و NextGen Gallery و WP Retina. كما أن لديها ميزة تحسين مجمعة ويمكنك الاختيار من بين ثلاثة مستويات مختلفة من الضغط ، عادي ، قوي ، وفائق. يحتوي أيضًا على ميزة الاستعادة ، لذلك إذا كنت غير راضٍ عن الجودة ، يمكنك بنقرة واحدة الاستعادة وإعادة الضغط على مستوى يناسب احتياجاتك بشكل أفضل. هناك نسخة مجانية ومميزة. أنت مقيد بحصة 25 ميغابايت من الصور شهريًا باستخدام حساب مجاني.
يمكن أيضًا التخلص من الصورة الأصلية وتغيير حجم الصور الأكبر حجمًا باستخدام هذا المكون الإضافي.
تغيير حجم الصور في Imagify
تغيير حجم الصور في Imagify
يقوم Imagify أيضًا بضغط الصور على خوادم الطرف الثالث ، وليس خوادمك ، وهو أمر مهم جدًا عندما يتعلق الأمر بالأداء. لا يجب أن يبطئ Imagify موقع وورد بريس الخاص بك.
البرنامج المساعد لتحسين الصور وورد بكسل قصير البكسل
البرنامج المساعد ShortPixel
ShortPixel Image Optimizer عبارة عن مكون إضافي مجاني يقوم بضغط 100 صورة شهريًا وضغط أنواع متعددة من الملفات بما في ذلك PNG و JPG و GIF و WebP وحتى ملفات PDF. سيقوم بضغط الصور مع فقدان البيانات وضياعها. سيتم تحويل CMYK إلى RGB. يأخذ الصور والصور المصغرة الخاصة بك إلى السحابة للمعالجة ثم يعيدها إلى موقعك لاستبدال النسخ الأصلية. يقوم بإنشاء نسخة احتياطية من الملفات الأصلية حتى تتمكن من استعادتها يدويًا إذا كنت تريد ذلك. سيتم تحويل ملفات المعرض بكميات كبيرة. لا يوجد حد لحجم الملف.
أوبتيمول
البرنامج المساعد Optimole
Optimole هو مكون إضافي لتحسين الصور في وورد بريس يعمل تلقائيًا على تقليل حجم صورك دون الحاجة إلى أي عمل من جانبك . يتمتع بميزة كبيرة عندما يتعلق الأمر بسرعة تحميل موقعك لأنه مستند إلى السحابة بالكامل ولا يقدم أبدًا صورًا أكبر مما ينبغي ، ويعرف أيضًا أنه يعرض حجم الصورة المثالي لمنفذ عرض الزائر ومتصفحه.
علاوة على ذلك ، يوفر المكون الإضافي تحميلًا كسولًا واستبدالًا فعالًا للصور – فهو يقلل من جودة الصورة إذا كان لدى الزائر اتصال إنترنت أبطأ – مما يجعله متميزًا عن الآخرين. كما أنه يكتشف تلقائيًا متصفح المستخدم ويخدم WebP إذا كان مدعومًا.
يتم تقديم جميع الصور التي يضغطها Optimole عبر CDN سريع. يمكنك تجربة Optimole مجانًا أو الترقية إلى الخطة المميزة إذا كنت بحاجة إلى نطاق ترددي إضافي ومساحة معالجة إضافية.
البرنامج المساعد EWWW Image Optimizer Cloud الإضافي
البرنامج المساعد EWWW Image Optimizer Cloud الإضافي
تساعدك EWWW Image Optimizer Cloud في جعل صورك أصغر ، وجعل موقعك أسرع مع بدء أقل صعوبة. مع عدم وجود حدود للحجم ، والكثير من المرونة ، يمكنك استخدام الإعدادات الافتراضية ، أو تخصيص المكون الإضافي بالكامل حسب رغبتك. يمكن لجميع مستخدمي EWWW IO استخدام مُحسِّن الجملة لضغط صورهم الحالية ، أو استخدام وضع قائمة مكتبة الوسائط لاختيار واختيار صور معينة لضغطها.
يمكن فحص المجلدات الإضافية للتأكد من تحسين كل صورة على موقعك بشكل صحيح. يسمح لك EWWW IO بتحويل صورك إلى تنسيقات الجيل التالي مثل WebP ، أو العثور على أفضل تنسيق للصورة مع خيارات تحويل متعددة التنسيقات. يبدأ ضغط الصور بسعر 0.003 دولار فقط للصورة.
قم بتغيير مضيف وورد بريس الخاص بك لتحسين صورك ومشاهدة زيادة في السرعة تزيد عن 45٪ في تحميل الصفحة. جرب Kinsta مجانًا .
تسمح لك واجهة برمجة التطبيقات للضغط المتميز بنقل الضغط إلى مستوى جديد تمامًا دون التضحية بالجودة ، مما يؤدي إلى فتح ضغط ملفات PDF ويتضمن نسخًا احتياطية ملائمة للصور لمدة 30 يومًا. توفر ميزة ExactDN التي تبدأ من 9 دولارات شهريًا ضغطًا تلقائيًا (بدون الحاجة إلى ضغط من جانب الخادم) ، وتغيير الحجم تلقائيًا ، وجميع مزايا CDN للحصول على نتائج أسرع ، وحتى أداء أكثر عبر أي حجم جهاز.
محسن الصورة الأمثل
البرنامج المساعد Optimus Image Optimizer
يستخدم Optimus وورد بريس Image Optimize r ضغطًا بدون فقدان لتحسين صورك. تعني “بدون خسارة” أنك لن ترى أي خسارة في الجودة. وهو يدعم WooCoomerce والمواقع المتعددة ولديه ميزة تحسين كبيرة جدًا لأولئك الذين لديهم مكتبات وسائط كبيرة موجودة بالفعل. كما أنه متوافق مع المكوّن الإضافي WP Retina وورد بريس. هناك نسخة مجانية ومتميزة. في الإصدار المتميز ، تدفع مرة واحدة سنويًا ويمكنك ضغط كمية غير محدودة من الصور. إذا قمت بدمجه مع المكون الإضافي Cache Enabler ، فيمكنك أيضًا الغوص في صور WebP ، وهو تنسيق صورة خفيف الوزن جديد من Google.
البرنامج المساعد wp smush
البرنامج المساعد WP Smush
يحتوي WP Smush على إصدار مجاني ومتميز. سيقلل المعلومات المخفية من الصور لتقليل الحجم دون تقليل الجودة. سيقوم بمسح الصور ضوئيًا وتقليلها عند تحميلها على موقعك. سيقوم أيضًا بمسح الصور التي قمت بتحميلها بالفعل وتقليلها أيضًا. سيتم تحطيم ما يصل إلى 50 ملفًا دفعة واحدة. يمكنك أيضًا السحق يدويًا إذا كنت تريد ذلك. سيؤدي ذلك إلى سحق أنواع صور JPEG و GIF و PNG. أحجام الملفات محدودة بـ 1 ميغا بايت.
إنه متوافق مع بعض الإضافات الأكثر شيوعًا لمكتبة الوسائط مثل WP All Import و WPML.
تتم جميع عمليات تحسين الصور باستخدام تقنيات ضغط بدون فقد ، مما يحافظ على جودة صورتك عالية.
لا يهم الدليل الذي تحفظ فيه صورك. يعثر Smush عليها ويضغطها.
يحتوي Smush على خيار لضبط العرض والارتفاع تلقائيًا لجميع الصور ، بحيث يتم تغيير حجم كل صورك إلى نسب متطابقة.
tinypng
البرنامج المساعد TinyPNG
TinyPNG يستخدم خدمات TinyJPG وTinyPNG (على حساب مجاني يتيح لك ضغط حوالي 100 صورة شهريا) لتحسين بك JPG و PNG الصور. سيقوم تلقائيًا بضغط الصور الجديدة وضغط الصور الموجودة لديك بشكل مجمّع. سيتم تحويل CMYK إلى RBG لتوفير مساحة. سيقوم بضغط صور JPEG حتى 60٪ وصور PNG حتى 80٪ بدون فقدان مرئي في جودة الصورة. لا يوجد حد لحجم الملف.
imagerecycle البرنامج المساعد ضغط الصور pdf
ImageRecycle – ملحق محسن للصور وملفات PDF
و ImageRecyle البرنامج المساعد هو تلقائي صورة وPDF محسن. يركز هذا المكون الإضافي ليس فقط على ضغط الصور ولكن على ملفات PDF أيضًا. إحدى الميزات المفيدة حقًا هي القدرة على تعيين الحد الأدنى لحجم الملف للضغط. على سبيل المثال ، إذا كانت لديك صور بحجم 80 كيلو بايت ، فيمكنك جعلها تستبعدها تلقائيًا من الضغط. هذا يضمن عدم ضغط الصور والملفات كثيرًا. يتضمن أيضًا تحسينًا جماعيًا وتغيير حجم الصورة تلقائيًا. ملاحظة: لديهم نسخة تجريبية مجانية مدتها 15 يومًا ، ولكن هذه خدمة متميزة ، ويتم تحميل الصور وضغطها باستخدام خوادمهم. لا يتم تحصيل رسوم منهم شهريًا ، ولكن من خلال العدد الإجمالي للصور المضغوطة ، بدءًا من 10 دولارات لكل 10000.
قررنا إجراء دراسة الحالة الصغيرة والاختبارات الخاصة بنا لتوضيح مدى تأثير تحسين صورك للويب على السرعة الإجمالية لموقع وورد بريس الخاص بك.
قمنا أولاً بتحميل 6 ملفات JPG غير مضغوطة ، وكلها يزيد حجمها عن 1 ميغابايت ، إلى موقع الاختبار الخاص بنا. (انظر ملفات JPG الأصلية غير المضغوطة ). ثم أجرينا 5 اختبارات عبر Pingdom وأخذنا المتوسط. كما ترى من اختبار السرعة أدناه ، كان إجمالي وقت التحميل 1.55 ثانية وكان الحجم الإجمالي للصفحة 14.7 ميجابايت.
اختبار السرعة jpg غير مضغوط
اختبار السرعة باستخدام ملفات JPG غير المضغوطة
ثم قمنا بعد ذلك بضغط ملفات JPG باستخدام المكون الإضافي Imagify وورد بريس ، باستخدام “الإعداد القوي”. (شاهد ملفات JPG المضغوطة الجديدة ، والتي لا تزال تبدو جميلة بنفس القدر). ثم أجرينا 5 اختبارات عبر Pingdom وأخذنا المتوسط. كما ترى من اختبار السرعة أدناه ، تم تقليل وقت التحميل الإجمالي لدينا إلى 476 مللي ثانية وتم تقليل الحجم الإجمالي للصفحة إلى 2.9 ميجا بايت. وبلغ إجمالي وانخفضت مرات الحمل التي كتبها 54.88٪ و كان انخفاض حجم الصفحة عن طريق 80.27٪ .
اختبار السرعة jpg مضغوط
اختبار السرعة باستخدام ملفات JPG المضغوطة
لا يوجد تقريبًا أي تحسين آخر يمكنك إجراؤه على موقعك من شأنه أن يقلل من أوقات التحميل بنسبة تزيد عن 50٪. هذا هو السبب في أن تحسين الصورة مهم جدًا ، فقد تمت أتمتة العملية المذكورة أعلاه بواسطة المكون الإضافي. إنه نهج عدم التدخل في موقع وورد بريس أسرع. التحسين الدراماتيكي الوحيد الذي يمكنك إجراؤه هو تغيير مضيفي وورد بريس. يرى العديد من العملاء الذين ينتقلون إلى Kinsta زيادة في السرعة تزيد عن 45٪. تخيل الانتقال إلى Kinsta وتحسين صورك!
من خلال تحسين صورك ، سواء كانت تستخدم أداة تحرير الصور أو مكون وورد بريس الإضافي ، يمكنك أيضًا إصلاح تحذير “تحسين الصور” الذي تحصل عليه في Google PageSpeed Insights (كما هو موضح أدناه).
تعمل رؤى Pagespeed على تحسين الصور
تحسين PageSpeed Insights تحذير الصور
إذا كان لديك تحذيرات الأمثل غيرها من أدوات اختبار سرعة، للتأكد من تحقق من مركزنا على جوجل إحصاءات PageSpeed ولدينا في العمق Pingdom تجول .
لقد أخذنا معرفتنا بالإدارة الفعالة لمواقع الويب على نطاق واسع ، وحولناها إلى كتاب إلكتروني ودورة فيديو. انقر هنا لتنزيل دليل 2020 لإدارة أكثر من 40 موقعًا من مواقع وورد بريس!
هناك توصية أخرى وهي استخدام ملفات SVG جنبًا إلى جنب مع صورك الأخرى. SVG هو تنسيق متجه قابل للتطوير يعمل بشكل رائع مع الشعارات والأيقونات والنصوص والصور البسيطة. فيما يلي سببان:
يمكن تغيير حجم SVGs تلقائيًا في كل من المستعرضات وأدوات تحرير الصور. هذا يجعل مصممي الويب والرسومات يحلمون!
تقوم Google بفهرسة SVGs ، بنفس الطريقة التي تعمل بها ملفات PNG و JPG ، لذلك لا داعي للقلق بشأن تحسين محركات البحث.
عادةً ما تكون ملفات SVG أصغر حجمًا من ملفات PNG أو JPG (ليس دائمًا). هذا يمكن أن يؤدي إلى أوقات تحميل أسرع.
كتب Genki مقالًا رائعًا حيث قارن بين حجم SVG و PNG و JPEG . فيما يلي بعض الوجبات السريعة من اختباره الذي قارن فيه أنواع الصور الثلاثة المختلفة.
حجم JPG
صورة JPG
حجم PNG
صورة PNG
حجم SVG
صورة SVG
كما ترى أعلاه ، فإن SVG هو انخفاض في حجم الملف بنسبة 92.51٪ بالمقارنة مع JPG. وبالمقارنة مع PNG 92.83٪. تحقق من البرنامج التعليمي الخاص بنا حول كيفية استخدام SVGs على موقع وورد بريس الخاص بك .
فيما يلي بعض أفضل الممارسات العامة عندما يتعلق الأمر بكيفية تحسين الصور للويب:
إذا كنت تستخدم مكونًا إضافيًا لبرنامج وورد بريس ، فاستخدم مكونًا يضغط الصور ويحسنها خارجيًا على خوادمهم. وهذا بدوره يقلل من الحمل على موقعك.
استخدم الصور المتجهة كلما أمكن ذلك جنبًا إلى جنب مع ملفات PNG و JPG.
استخدم شبكة CDN لتقديم صورك بسرعة للزائرين في جميع أنحاء العالم.
قم بإزالة بيانات الصورة غير الضرورية.
قم بقص المساحة البيضاء وأعد إنشائها باستخدام CSS لتوفير المساحة المتروكة.
استخدم تأثيرات CSS3 قدر الإمكان.
احفظ صورك بالأبعاد المناسبة. على الرغم من أن تذكر أن وورد بريس يدعم الآن الصور المتجاوبة لتقديمها دون تغيير حجمها باستخدام CSS.
دائما استخدام إيكو تنسيق الملف الخاص بك فافيكون .
استخدم خطوط الويب بدلاً من وضع النص داخل الصور – فهي تبدو أفضل عند تغيير حجمها وتشغل مساحة أقل.
استخدم الصور النقطية فقط للمشاهد التي تحتوي على الكثير من الأشكال والتفاصيل.
قلل عمق البت إلى لوحة ألوان أصغر.
استخدم الضغط مع فقدان البيانات حيثما أمكن ذلك.
جرب للعثور على أفضل الإعدادات لكل تنسيق.
استخدم GIF إذا كنت بحاجة إلى رسوم متحركة. (لكن ضغط ملفات GIF المتحركة الخاصة بك )
استخدم PNG إذا كنت بحاجة إلى تفاصيل عالية ودقة عالية.
استخدم JPG للصور ولقطات الشاشة العامة.
قم بإزالة أي بيانات أولية للصورة غير ضرورية.
أتمتة العملية قدر الإمكان.
في بعض الحالات ، قد ترغب في التحميل البطيء للصور لعرض أسرع للصفحة الأولى.
احفظ الصور كـ “محسّنة للويب” في أدوات مثل Photoshop.
استخدم WebP في Chrome للعرض في صور أصغر.
لا تنس تحسين صورك ، وإلا ، فقد يبدو موقع وورد بريس الخاص بك وكأنه في حركة بطيئة. وأنت تعرف مدى الإحباط “البطيء”! 🐌
انقر للتغريد
بمجرد تنسيق صورك للحصول على أداء أفضل واتباع أفضل الممارسات ، سيكون موقعك محبوبًا بشكل أفضل من قبل محركات البحث والمتصفحات والشبكات ، وسيتم تحميله بشكل أسرع لقرائك. أوه ، وتأكد من مراجعة البرنامج التعليمي الخاص بنا حول الارتباط السريع ، لمنع الأشخاص من سرقة صورك وعرض النطاق الترددي.
هل قمت بتنسيق صورك للحصول على أداء أفضل؟ هل تقوم بتنسيقها يدويًا أو باستخدام مكون إضافي أو كليهما؟ هل هناك أداة أو مكون إضافي آخر تنصح به؟ هل لديك شيء لتضيف؟ أخبرنا عن تقنياتك وأفضل الممارسات في التعليقات أدناه!
