ويمكن استخدام أداة الإبهام مجانًا لتغيير حجم الصور وضغطها وتحويلها عند الطلب.
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 الأخرى. يشرح القسم التالي من هذه المشاركة كيفية تغيير حجم الصور بمزيد من التفاصيل.
جرِّب ذلك الآن:
انقر على عنوان URL التالي لعرض الصورة المعروضة بحجمها الأصلي في علامة تبويب جديدة: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg
غيِّر حجم الصورة إلى 100x100 بكسل: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
الفلاتر
تحول الفلاتر الصورة. يبدأ جزء الفلاتر في شريحة عنوان URL بـ filters:
متبوعًا بقائمة فلاتر مفصولة بنقطتين، ويمكن حذف هذا الجزء إذا كنت لا تستخدم أي فلاتر. تشبه بنية الفلاتر الفردية استدعاء دالة (على سبيل المثال grayscale()
) لا يحتوي على وسيطات أو أكثر.
جرِّب ذلك الآن:
طبِّق فلترًا واحدًا: تأثير تمويه غاوسي مع نصف قطر يبلغ 25 بكسل: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg
تطبيق فلاتر متعدّدة تحويل الصورة إلى تدرّج الرمادي وتدوير الصورة بمقدار 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 (جودة سيئة جدًا): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg
اضغط الصورة باستخدام إعدادات الضغط التلقائية في Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg
تغيير الحجم
لتغيير حجم صورة مع الحفاظ على نِسبها الأصلية، استخدِم التنسيق $WIDTHx0
أو 0x$HEIGHT
ضمن الجزء size
من سلسلة عنوان URL.
جرِّب ذلك الآن:
قم بتغيير حجم الصورة إلى عرض 200 بكسل مع الحفاظ على النسب الأصلية: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg
يجب تغيير حجم الصورة إلى ارتفاع 500 بكسل مع الحفاظ على النسبة الأصلية: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg
يمكنك أيضًا تغيير حجم الصور إلى نسبة مئوية من الصورة الأصلية باستخدام فلتر التناسب. إذا تم تحديد الحجم بالتزامن مع فلتر النِسب، سيتم تغيير حجم الصورة، وبعد ذلك سيتم تطبيق فلتر النِسب.
جرِّب ذلك الآن:
غيِّر حجم الصورة إلى% 50 من الصورة الأصلية: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg
يجب تغيير حجم الصورة إلى عرض 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 تكون غالبًا أكبر حجمًا ولا يتم ضغطها أيضًا.
جرِّب ذلك الآن:
- حوِّل الصورة إلى تنسيق 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.
شغِّل الأمر
thumbor-config
لإنشاء ملفthumbor.conf
جديد.thumbor-config > ./thumbor.conf
افتح ملف
thumbor.conf
الجديد. أنشأ الأمرthumbor-config
ملفًا يدرج جميع خيارات إعداد Thumbor ويوضّحها.يمكنك ضبط الإعدادات من خلال إزالة السطور من خلال تغيير القيم التلقائية. وقد يكون من المفيد ضبط الإعدادات التالية:
QUALITY
AUTO_WEBP
MAX_WIDTH
وMAX_HEIGHT
ALLOW_ANIMATED_GIFS
يمكنك تشغيل Thumbor مع العلامة
--conf
لاستخدام إعداداتthumbor.conf
.thumbor --conf /path/to/thumbor.conf