بهینه سازی تصاویر با Thumbor

Thumbor را می توان به صورت رایگان برای تغییر اندازه، فشرده سازی و تبدیل تصاویر در صورت درخواست استفاده کرد.

Katie Hempenius

Thumbor یک CDN تصویر منبع باز رایگان است که فشرده سازی، تغییر اندازه و تبدیل تصاویر را آسان می کند. این پست به شما امکان می دهد Thumbor را بدون نیاز به نصب چیزی به صورت دست اول امتحان کنید. ما یک سرور sandbox Thumbor را برای شما راه‌اندازی کرده‌ایم که می‌توانید آن را در http://34.67.235.246:8888 امتحان کنید. تصویری که می‌خواهید با آن آزمایش کنید در http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg موجود است.

پیش نیازها

این پست فرض می‌کند که می‌دانید چگونه CDN‌های تصویر می‌توانند عملکرد بارگذاری شما را بهبود بخشند. اگر نه، استفاده از CDN تصویر برای بهینه سازی تصاویر را بررسی کنید. همچنین فرض می‌کند که قبلاً وب‌سایت‌های اساسی ساخته‌اید.

قالب URL Thumbor

همانطور که در استفاده از CDN های تصویر برای بهینه سازی تصاویر ذکر شد، هر CDN تصویر از فرمت URL کمی متفاوت برای تصاویر استفاده می کند. شکل 1 فرمت Thumbor را نشان می دهد.

اصل و نسب

مانند همه مبداها ، مبدا URL Thumbor از سه بخش تشکیل شده است: یک طرح (که تقریبا همیشه http یا https است)، یک میزبان و یک پورت. در این مثال، میزبان با استفاده از یک آدرس IP شناسایی می‌شود، اما اگر از یک سرور DNS استفاده می‌کنید، ممکن است شبیه 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

تبدیل تصاویر

این بخش بر روی عملکردهای Thumbor مرتبط با عملکرد متمرکز است: فشرده سازی، تغییر اندازه، و تبدیل بین فرمت های فایل.

فشرده سازی

فیلتر کیفیت تصاویر 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. اندازه تصویر را به عرض 1000 پیکسل تغییر دهید، سپس اندازه تصویر را به 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 تبدیل کنید. اگر پانل شبکه DevTools را باز کنید، هدر پاسخ 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