تحسين الصور باستخدام Thumbor

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

Thumbor عبارة عن شبكة توصيل محتوى مجانية ومفتوحة المصدر تسهِّل ضغط الصور وتغيير حجمها وتحويلها. تتيح لك هذه المشاركة تجربة استخدام تطبيق Thumbor مباشرةً بدون الحاجة إلى تثبيت أيّ تطبيق. لقد أعددنا لك خادم Thumbor في وضع الحماية لتجربته على http://34.67.235.246:8888. الصورة التي تريد تجربتها متاحة على http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

المتطلبات الأساسية

تفترض هذه المشاركة أنّك تفهم كيف يمكن لشبكات توصيل المحتوى (CDN) الخاصة بالصور تحسين أداء التحميل. وإذا لم يكن الأمر كذلك، اطّلِع على المقالة استخدام شبكات توصيل المحتوى (CDN) للصور لتحسين الصور. يفترض أيضًا أنك قمت بإنشاء مواقع ويب أساسية من قبل.

تنسيق عنوان URL لأداة الإبهام

كما هو مذكور في مقالة استخدام شبكات توصيل المحتوى (CDN) للصور لتحسين الصور، تستخدم كل شبكة توصيل للمحتوى تنسيق عنوان URL مختلفًا قليلاً للصور. يمثل الشكل 1 تنسيق Thumbor.

الأصل

مثل جميع المصادر، يتألّف أصل عنوان URL الخاص بـ Thumbor من ثلاثة أجزاء: مخطّط (عادةً ما يكون http أو https) ومضيف ومنفذ. في هذا المثال، يتم تحديد المضيف باستخدام عنوان IP، ولكن إذا كنت تستخدم خادم نظام أسماء النطاقات، قد يبدو مثل thumbor-server.my-site.com. بشكل تلقائي، يستخدم تطبيق Thumbor المنفذ 8888 لعرض الصور.

مفتاح الأمان

يشير الجزء unsafe من عنوان URL إلى أنّك تستخدم تطبيق Thumbor بدون مفتاح أمان. يمنع مفتاح الأمان المستخدم من إجراء تغييرات غير مصرَّح بها على عناوين URL للصور. ومن خلال تغيير عنوان URL للصورة، قد يتمكّن المستخدم من استخدام خادمك (وفاتورة الاستضافة) لتغيير حجم الصور، أو لزيادة الحمل بشكلٍ ضار على الخادم. لن يتناول هذا الدليل عملية إعداد ميزة مفتاح أمان Thumbor.

حجم الملف

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

جرِّب ذلك الآن:

1. انقر على عنوان URL التالي لعرض الصورة المعروضة بحجمها الأصلي في علامة تبويب جديدة: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

   

2. غيِّر حجم الصورة إلى 100x100 بكسل: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

الفلاتر

تحول الفلاتر الصورة. يبدأ جزء الفلاتر في شريحة عنوان URL بـ filters: متبوعًا بقائمة فلاتر مفصولة بنقطتين، ويمكن حذف هذا الجزء إذا كنت لا تستخدم أي فلاتر. تشبه بنية الفلاتر الفردية استدعاء دالة (على سبيل المثال grayscale()) لا يحتوي على وسيطات أو أكثر.

جرِّب ذلك الآن:

1. طبِّق فلترًا واحدًا: تأثير تمويه غاوسي مع نصف قطر يبلغ 25 بكسل: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

   

2. تطبيق فلاتر متعدّدة تحويل الصورة إلى تدرّج الرمادي وتدوير الصورة بمقدار 90 درجة: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

تحويل الصور

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

الضغط

يضغط فلتر الجودة صور JPEG إلى مستوى جودة الصورة المطلوب (1-100). إذا لم يتم تقديم أي مستوى جودة، يضغط تطبيق Thumbor الصورة إلى مستوى جودة 80. وهذا إعداد تلقائي جيّد: فمستويات الجودة من 80 إلى 85 عادةً ما يكون لها تأثير ملحوظ على جودة الصورة قليلاً، ولكنّها عادةً ما تقلّل حجم الصورة بنسبة تتراوح بين 30 و 40%.

جرِّب ذلك الآن:

1. اضغط الصورة إلى 1 (جودة سيئة جدًا): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

   

2. اضغط الصورة باستخدام إعدادات الضغط التلقائية في Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

تغيير الحجم

لتغيير حجم صورة مع الحفاظ على نِسبها الأصلية، استخدِم التنسيق $WIDTHx0 أو 0x$HEIGHT ضمن الجزء size من سلسلة عنوان URL.

جرِّب ذلك الآن:

1. قم بتغيير حجم الصورة إلى عرض 200 بكسل مع الحفاظ على النسب الأصلية: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

   

2. يجب تغيير حجم الصورة إلى ارتفاع 500 بكسل مع الحفاظ على النسبة الأصلية: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

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

جرِّب ذلك الآن:

1. غيِّر حجم الصورة إلى% 50 من الصورة الأصلية: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

   

2. يجب تغيير حجم الصورة إلى عرض 1, 000 بكسل، ثم تغيير حجمها إلى 10% من حجمها الحالي: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg

وهذه الطرق ليست سوى عدد قليل من خيارات الاقتصاص وتغيير الحجم العديدة في Thumbor. للتعرّف على الخيارات الأخرى، اطّلِع على قسم الاستخدام.

تنسيقات الملفات

يحوِّل فلتر التنسيق الصور إلى jpeg أو webp أو gif أو png. يُرجى العِلم أنّه في حال تحسين الأداء، يجب استخدام JPEG أو WebP لأنّ الملفات بتنسيق PNG وGIF تكون غالبًا أكبر حجمًا ولا يتم ضغطها أيضًا.

جرِّب ذلك الآن:

1. حوِّل الصورة إلى تنسيق WebP. إذا فتحت لوحة الشبكة في "أدوات مطوري البرامج" يوضّح عنوان استجابة Content-Type (نوع المحتوى) أنّ الخادم عرض صورة WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg

الخطوات التالية

تجربة الفلاتر والتغييرات الأخرى على الصورة hero.jpg

إذا كنت تتابع استخدام أداة تثبيت Thumbor بنفسك، اطّلِع على الملحق أدناه الذي يوضّح طريقة استخدام ملف thumbor.conf وسبب استخدامه.

الملحق: thumbor.conf

يمكن ضبط العديد من خيارات الضبط التي تمت مناقشتها في هذه المشاركة، بالإضافة إلى العديد من الخيارات الأخرى كإعدادات تلقائية من خلال إعداد ملف إعداد thumbor.conf واستخدامه. سيتم تطبيق الإعدادات في ملف thumbor.conf على جميع الصور ما لم تلغيها معلَمات سلسلة عنوان URL.

1. شغِّل الأمر thumbor-config لإنشاء ملف thumbor.conf جديد.

   thumbor-config > ./thumbor.conf
   

2. افتح ملف thumbor.conf الجديد. أنشأ الأمر thumbor-config ملفًا يدرج جميع خيارات إعداد Thumbor ويوضّحها.

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

   • QUALITY
   • AUTO_WEBP
   • MAX_WIDTH وMAX_HEIGHT
   • ALLOW_ANIMATED_GIFS

4. يمكنك تشغيل Thumbor مع العلامة --conf لاستخدام إعدادات thumbor.conf.

   thumbor --conf /path/to/thumbor.conf