چرا باید از ابزار پردازش تصاویر imgproxy استفاده کنیم؟ خب، یه چند تا دلیل باحال براتون دارم:
سرعت: این ابزار مثل برق کار میکنه. چون به زبان Go نوشته شده، خیلی بهینهست و پردازش تصاویر رو توی کسری از ثانیه انجام میده.
امنیت: imgproxy خیلی روی امنیت حساسه. مثلاً میتونی URLها رو امضا کنی تا کسی نتونه به تصاویرت دسترسی غیرمجاز داشته باشه.
سادگی: استفاده ازش خیلی راحته. یه API ساده داره که حتی اگه تازهکار باشی، میتونی باهاش کار کنی.
انعطافپذیری: از تغییر اندازه و برش تصویر گرفته تا افزودن واترمارک و حتی تبدیل فرمت، ابزار پردازش تصاویر imgproxy تقریباً هر کاری که بخوای با تصاویرت انجام میده.
حالا فکر کن یه وبسایت داری که کاربرات از جاهای مختلف با دستگاههای مختلف (گوشی، تبلت، لپتاپ) میان سراغش. هر کدوم از این دستگاهها یه رزولوشن خاص نیاز دارن. اگه بخوای برای هر دستگاه یه نسخه از تصویر رو آماده کنی، سرور و وقتت تلف میشه. ابزار پردازش تصاویر imgproxy اینجاست که بیاد و این مشکل رو حل کنه. فقط یه درخواست HTTP میفرستی، اونم تصویر رو با همون مشخصاتی که میخوای بهت میده. انگار که یه دستیار جادویی داری!
این ابزار اولین بار توسط تیم Evil Martians ساخته شد و هدفش این بود که یه راهحل سبک و سریع برای پردازش تصاویر توی پروژههای وب ارائه بده. از اون موقع تا حالا، imgproxy توی خیلی از پروژههای بزرگ و کوچیک استفاده شده و حسابی طرفدار پیدا کرده. توی این پست، قراره عمیقتر بریم و ببینیم این ابزار چطور کار میکنه، چطور میتونی راهاندازیش کنی و چه ترفندهایی برای بهینهسازی کار باهاش وجود داره.
حالا که یه کم با ابزار پردازش تصاویر imgproxy آشنا شدیم، بیاید یه نگاهی به زیر کاپوتش بندازیم. imgproxy یه سرور سبک و مستقل هست که روی سرورهای تو یا حتی توی محیطهای ابری (مثل AWS یا Google Cloud) اجرا میشه. این ابزار از یه سری کتابخونههای قدرتمند مثل libvips استفاده میکنه که برای پردازش تصاویر بهینهست. حالا بیاید قدمبهقدم ببینیم چطور کار میکنه:
دریافت درخواست: تو یه URL به imgproxy میفرستی که مشخصات پردازش تصویر توش نوشته شده. مثلاً میگی: «هی imgproxy، این تصویر رو بگیر، اندازهش رو بکن 300×200، کیفیتش رو ببر رو 80 و فرمتش رو به WebP تبدیل کن.»
پردازش تصویر: imgproxy تصویر اصلی رو از منبعی که مشخص کردی (مثلاً یه URL یا یه فضای ذخیرهسازی ابری مثل S3) میگیره و طبق دستورات تو پردازشش میکنه.
تحویل تصویر: بعد از پردازش، تصویر آماده رو بهصورت یه پاسخ HTTP بهت برمیگردونه. تو میتونی این تصویر رو مستقیم توی وبسایتت نمایش بدی یا ذخیرهش کنی.
یه چیز باحال درباره imgproxy اینه که میتونه تصاویر رو از منابع مختلف بگیره: از یه URL ساده گرفته تا فضاهای ذخیرهسازی ابری مثل Amazon S3، Google Cloud Storage یا حتی FTP. این یعنی دستت بازه که از هر منبعی که دوست داری تصویر بکشی بیرون.
یه نکته دیگه هم هست: ابزار پردازش تصاویر imgproxy خیلی بهینه کار میکنه چون فقط تصویر پردازششده رو توی رم (RAM) نگه میداره و چیزی رو روی دیسک ذخیره نمیکنه (مگر اینکه خودت بخوای). این باعث میشه که هم سریع باشه و هم فضای ذخیرهسازی سرورت رو اشغال نکنه. تازه، چون از libvips استفاده میکنه، میتونه تصاویر بزرگ رو با مصرف خیلی کم CPU و RAM پردازش کنه. مثلاً یه تصویر 10 مگاپیکسلی رو توی چند میلیثانیه پردازش میکنه!
حالا یه مثال خودمونیتر: فرض کن یه وبسایت فروش لباس داری. مشتری میخواد یه تیشرت رو توی صفحه محصول ببینه. یه تصویر باکیفیت 4K داری، ولی اگه بخوای همونو برای یه گوشی با صفحه 720p بفرستی، هم سرعت لود صفحه میاد پایین، هم کاربر کلی پهنای باند مصرف میکنه. ابزار پردازش تصاویر imgproxy میتونه همون تصویر 4K رو بگیره، اندازهش رو به 720×480 تغییر بده، کیفیتش رو کم کنه تا حجمش مناسب بشه و توی فرمت WebP (که خیلی بهینهست) به کاربر نشون بده. اینجوری هم کاربر خوشحال میشه، هم سرورت نفس راحتی میکشه!
حالا بریم سراغ نصب ابزار پردازش تصاویر imgproxy ، ساده و خودمونی:
حالا Docker آمادهست.
این میره imgproxy رو روی پورت 8080 اجرا میکنه. یعنی اگه بری تو مرورگر و بزنی http://your-server:8080، باید کار کنه.
حالا اینا رو تو دستور Docker بذار:
اگه نمیخوای از Docker استفاده کنی، باید دستی نصب کنی:
یه URL تست بساز، مثلاً:
این یه عکس گربه از placekitten.com رو به اندازه 300×200 پیکسل تغییر میده. تو مرورگر بازش کن ببین درست کار میکنه یا نه.
imgproxy پر از قابلیتهای خفنه که باعث میشه عاشقش بشی. بیاید یه چند تاش رو با جزئیات ببینیم:
تغییر اندازه و برش: میتونی تصویر رو به هر اندازهای که بخوای تغییر بدی (مثل resize:fit:300:200) یا حتی قسمتی از تصویر رو برش بدی (مثل crop:100:100).
تبدیل فرمت: imgproxy میتونه تصاویر رو به فرمتهای مختلف مثل JPEG، PNG، WebP و حتی AVIF تبدیل کنه. مثلاً WebP خیلی برای وب بهینهست چون حجم کمتری داره.
واترمارک: میخوای لوگوی شرکتت رو روی تصاویر بندازی؟ imgproxy این کار رو با یه دستور ساده انجام میده.
امضای URL: برای امنیت بیشتر، میتونی URLها رو با یه کلید امضا کنی تا فقط کسایی که کلید رو دارن بتونن به تصاویر دسترسی پیدا کنن.
پشتیبانی از CDN: imgproxy بهراحتی با CDNها (مثل Cloudflare یا Akamai) کار میکنه و باعث میشه تصاویرت با سرعت نور به کاربرا برسه.
این فقط یه گوشه از قابلیتهاشه. imgproxy انقدر انعطافپذیره که توی هر پروژهای میتونی ازش استفاده کنی، از یه وبلاگ ساده گرفته تا یه پلتفرم تجارت الکترونیک غولپیکر!
حالا بیاید یه سناریوی واقعی رو تصور کنیم. فرض کن یه فروشگاه آنلاین داری که محصولاتش کلی عکس داره. مثلاً یه کفش ورزشی که از زوایای مختلف عکاسی شده. هر کفش ممکنه 5 تا عکس داشته باشه: نمای جلو، پشت، کنار، بالا و یه عکس توی محیط واقعی. حالا این عکسها رو میخوای توی صفحات محصول، صفحه اصلی، نتایج جستجو و حتی ایمیلهای تبلیغاتی نشون بدی. هر کدوم از این موقعیتها به یه اندازه و کیفیت خاص نیاز داره.
بدون ابزار پردازش تصاویر imgproxy ، باید برای هر موقعیت یه نسخه از تصویر رو دستی آماده کنی. مثلاً:
برای صفحه محصول: 800×600 با کیفیت بالا
برای صفحه اصلی: 300×300 با کیفیت متوسط
برای ایمیل: 200×150 با کیفیت پایین
این یعنی برای هر محصول باید حداقل 3 نسخه از هر عکس داشته باشی. اگه 1000 محصول داشته باشی، میشه 5000 عکس که باید دستی پردازش و ذخیره کنی! حالا imgproxy میاد وسط و این کابوس رو حل میکنه. فقط کافیه یه URL مثل این بسازی:
http://your-imgproxy-server/resize:fit:800:600:0/src:http://your-site.com/shoe-front.jpg
برای صفحه محصول، یا:
http://your-imgproxy-server/resize:fit:300:300:0/quality:70/format:webp/src:http://your-site.com/shoe-front.jpg
برای صفحه اصلی. ابزار پردازش تصاویر imgproxy تصویر رو توی همون لحظه پردازش میکنه و بهت میده. اینجوری نه تنها وقتت صرفهجویی میشه، بلکه فضای ذخیرهسازی سرورت هم پر نمیشه.
حالا که عاشق imgproxy شدی، بیاید یه کم درباره بهینهسازی عملکردش حرف بزنیم. چون این ابزار خیلی سریع و بهینهست، ولی با یه سری ترفند میتونی حتی از اینم بهترش کنی:
استفاده از CDN: اگه imgproxy رو با یه CDN ترکیب کنی، تصاویرت توی سرورهای نزدیک به کاربر کش (cache) میشن و سرعت لودشون دیگه مثل موشک میشه!
کش کردن تصاویر: خود imgproxy میتونه تصاویر پردازششده رو کش کنه (با تنظیمات مناسب). اینجوری اگه چند نفر همون تصویر رو درخواست کنن، سرور مجبور نیست هر بار از نو پردازش کنه.
انتخاب فرمت مناسب: فرمتهایی مثل WebP و AVIF معمولاً حجم کمتری دارن و برای وب بهترن. imgproxy بهت اجازه میده این فرمتها رو بهراحتی استفاده کنی.
تنظیم کیفیت: با تنظیم پارامتر quality میتونی حجم تصاویر رو بدون افت کیفیت قابلتوجه کم کنی. مثلاً کیفیت 80 معمولاً یه تعادل خوب بین حجم و کیفیت ایجاد میکنه.
یه نکته دیگه: اگه سرور imgproxy رو روی یه ماشین با CPU قوی و RAM کافی بذاری، میتونی همزمان کلی درخواست رو هندل کنی. مثلاً توی یه سایت پرترافیک مثل یه فروشگاه آنلاین، imgproxy میتونه صدها درخواست رو توی یه ثانیه پردازش کنه بدون اینکه عرقش دربیاد!
حالا شاید بگی: «خب، ابزارهای دیگهای هم هستن که همین کار رو میکنن. چرا imgproxy؟» حق داری! ابزارهای زیادی برای پردازش تصویر وجود دارن، مثل Cloudinary، ImageMagick یا حتی سرویسهای ابری مثل AWS Lambda. بیاید یه مقایسه خودمونی کنیم:
imgproxy vs Cloudinary: Cloudinary یه سرویس ابری کامل با کلی قابلیت مثل تحلیل تصویر و AIه. ولی یه مشکلی داره: گرونه! imgproxy یه ابزار اوپنسورسه که میتونی روی سرور خودت راهاندازیش کنی و هزینهش صفره (البته به جز هزینه سرور). اگه دنبال کنترل بیشتر و هزینه کمتر هستی، imgproxy بهتره.
imgproxy vs ImageMagick: ImageMagick هم ابزار قدرتمندیه، ولی یه کم پیچیدهست و برای پروژههای بزرگ ممکنه کند باشه. imgproxy به لطف libvips خیلی سریعتره و استفاده ازش سادهتره.
imgproxy vs AWS Lambda: اگه بخوای خودت یه سیستم پردازش تصویر با Lambda بسازی، باید کلی کد بنویسی و هزینههای AWS رو هم تحمل کنی. imgproxy آمادهست و فقط کافیه راهاندازیش کنی.
خلاصه، imgproxy برای کسایی که دنبال یه ابزار سبک، سریع و اوپنسورس هستن، یه انتخاب عالیه. البته اگه پروژهت خیلی پیچیدهست و به قابلیتهای پیشرفته (مثل تشخیص چهره) نیاز داری، شاید سرویسهای ابری مثل Cloudinary بهتر باشن.
برای اینکه حسابی بفهمی imgproxy چطور میتونه بهت کمک کنه، بیاید یه پروژه فرضی رو باهم پیاده کنیم. فرض کن یه وبلاگ عکاسی داری و میخوای تصاویرت رو با کیفیت بالا ولی حجم کم نمایش بدی. اینجوری پیش میریم:
راهاندازی imgproxy: imgproxy رو با Docker روی سرورت نصب میکنی و بهش میگی تصاویر رو از یه مخزن S3 بکشه.
ساخت URLها: برای هر تصویر، یه URL میسازی که مثلاً اندازه 1200×800، فرمت WebP و کیفیت 85 رو مشخص کنه.
ادغام با وبسایت: توی کد HTML یا JavaScript وبسایتت، از این URLها برای نمایش تصاویر استفاده میکنی.
افزودن CDN: یه CDN مثل Cloudflare جلوی imgproxy میذاری تا تصاویر کش بشن و سرعت لودشون بیشتر بشه.
حالا کاربرا تصاویر باکیفیت رو با سرعت بالا میبینن، بدون اینکه سرورت غر بزنه یا هزینههای ذخیرهسازی و پهنای باندت بره بالا. این یه نمونه سادهست، ولی imgproxy توی پروژههای پیچیدهتر (مثل اپلیکیشنهای موبایل یا پلتفرمهای استریم) هم به همین راحتی کار میکنه.
هیچ ابزار بینقصی وجود نداره، درسته؟ imgproxy هم یه سری محدودیت داره که بهتره بدونی:
عدم پشتیبانی از برخی فرمتها: مثلاً اگه بخوای با یه فرمت خیلی خاص کار کنی (مثل TIFF)، ممکنه به مشکل بخوری. imgproxy بیشتر روی فرمتهای رایج وب (مثل JPEG، PNG و WebP) تمرکز داره.
نیاز به سرور: چون imgproxy یه ابزار مستقل است، باید سرور خودت رو داشته باشی. اگه دنبال یه راهحل کاملاً ابری هستی، شاید یه سرویس مثل Cloudinary راحتتر باشه.
پیچیدگیهای مقیاسپذیری: اگه ترافیک سایتت خیلی بالاست، باید imgproxy رو روی چند سرور اجرا کنی و یه لود بالانسر بذاری تا درخواستها رو پخش کنه.
ولی خب، این مشکلات نسبت به مزایای imgproxy خیلی کوچیکن. اگه درست راهاندازیش کنی، این ابزار مثل یه قهرمان برات کار میکنه!
خب، حالا که تا اینجا اومدیم، فکر کنم حسابی با ابزار پردازش تصاویر imgproxy آشنا شدی. این ابزار یه راهحل عالی برای پردازش تصاویر توی وبسایتها و اپلیکیشنهاست. با سرعت بالا، امنیت خوب و انعطافپذیری زیاد، imgproxy میتونه زندگی دیجیتالت رو راحتتر کنه. چه یه توسعهدهنده تازهکار باشی، چه یه حرفهای که دنبال بهینهسازی سروره، imgproxy یه دوست خوب برات میشه.
چند تا نکته آخر:
اگه تازهکار هستی، با Docker شروع کن. راهاندازیش سادهتره و کمتر گند میزنی!
مستندات imgproxy رو حتماً بخون. پر از مثالهای عملی و ترفندهای باحاله.
اگه پروژهت بزرگه، حتماً از CDN و کش استفاده کن تا سرعت و مقیاسپذیری بهتری داشته باشی.
امیدوارم این پست بهت کمک کرده باشه که imgproxy رو بهتر بفهمی و بتونی ازش توی پروژههات استفاده کنی. حالا برو یه سرور راه بنداز و تصاویرت رو با ابزار پردازش تصاویر imgproxy جادویی کن!
بیشتر بخوانید: “الگوریتم Bellman-Ford“
دیدگاه بگذارید