imgproxy چیست؟ بهینه‌سازی تصاویر وب با imgproxy

تصاویر نقش مهمی در تجربه کاربری وب‌سایت‌ها ایفا می‌کنند، اما در صورت بهینه نبودن، می‌توانند باعث کاهش سرعت بارگذاری صفحات شوند. فرمت‌های مدرنی مانند WebP و AVIF با هدف کاهش حجم تصاویر و افزایش کارایی معرفی شده‌اند، اما چالش‌هایی مانند پشتیبانی محدود مرورگرها و زمان‌بر بودن فرایند تبدیل، استفاده از آن‌ها را پیچیده می‌کند.
در این میان، ابزارهایی مانند imgproxy راهکاری کارآمد ارائه می‌دهند؛ با تبدیل و بهینه‌سازی آنی تصاویر و ارائه آن‌ها در فرمت مناسب، بدون نیاز به دخالت دستی، تجربه‌ای سریع و یکپارچه برای کاربران فراهم می‌شود.

در ادامه خواهید خواند:

• imgproxy چیست؟
• پیش نیازها
• نصب imgproxy با استفاده از Docker
• ایمن کردن imgproxy با امضا
• پیکربندی imgproxy برای ارائه خودکار تصاویر
• جمع بندی

imgproxy چیست؟

imgproxy یک ابزار متن‌باز و سبک برای پردازش و بهینه‌سازی تصاویر است که به صورت خاص برای بهبود سرعت بارگذاری و کیفیت تصاویر در وب‌سایت‌ها و اپلیکیشن‌ها طراحی شده است. این پلتفرم به توسعه‌دهندگان و مدیران وب این امکان را می‌دهد تا با استفاده از یک API ساده، تصاویر را به صورت پویا پردازش کنند و تغییرات مورد نظر را به صورت خودکار اعمال نمایند. imgproxy به راحتی می‌تواند با منابع مختلفی از جمله سرویس‌های ذخیره‌سازی ابری و سرورهای محلی ادغام شوند.

imgproxy یکی از برنامه‌های آماده‌ای است که توسط تیم لیارا ارائه می‌شود. با استفاده از این ابزار می‌توانید به راحتی تصاویر سایت خود را بهینه‌سازی کنید و سرعت بارگذاری صفحات را بهبود ببخشید. این ابزار به صورت خودکار تغییرات لازم را روی تصاویر اعمال کرده و به شما این امکان را می‌دهد که به صورت پویا تصاویر را پردازش کنید. تیم لیارا این ابزار را به عنوان یک راه‌حل آماده برای کاربران خود فراهم کرده است که می‌توانید بدون نیاز به پیچیدگی‌های اضافی، آن را نصب کرده و از قابلیت‌های آن بهره‌مند شوید.

شما همچنین می‌توانید برای ساده‌تر کردن مدیریت پروژه‌ها از برنامه‌های آماده تیم لیارا بهره‌برداری کنید. لیارا با ارائه بیش از 60 برنامه آماده به کاربران خود این امکان را فراهم می‌کند که به راحتی و در کوتاه‌ترین زمان ممکن، برنامه‌ها را نصب و به‌طور کامل راه‌اندازی کنند.

برای اطلاعات بیشتر در مورد برنامه و آشنایی با نحوه پیکربندی و استفاده از آن، به مستندات مربوط به برنامه مراجعه کنید.

با برنامه آماده imgproxy لیارا، تصاویر سایتت رو در لحظه و با بالاترین سرعت بهینه‌سازی کن.
✅ تغییر اندازه آنی ✅ پشتیبانی از فرمت‌های مدرن ✅ نصب با یک کلیک 
خرید و راه‌اندازی imgproxy

پیش نیاز ها

• یک سرور یا دستگاه توسعه با Docker نصب‌شده: برای نصب Docker بر روی اوبونتو، می‌توانید از راهنمای رسمی Docker استفاده کنید.
• زبان اسکریپت‌نویسی برای اجرای اسکریپت‌ها: در این آموزش، از Ruby استفاده می‌کنیم. می‌توانید Ruby را بر روی اوبونتو با راهنمای “نصب Ruby on Rails با rbenv” نصب کنید. در macOS، از نسخه پیش‌فرض Ruby استفاده کنید.
• آشنایی با ابزارهای توسعه‌دهنده مرورگر: آشنایی با ابزارهای مرورگر برای شناسایی مشکلات عملکردی مفید است.

نصب imgproxy با استفاده از Docker

در این مرحله، شما ابزار imgproxy را نصب و بررسی خواهید کرد که به درستی اجرا می‌شود. برای نصب این ابزار، از Docker استفاده می‌کنیم که روشی پرتابل و مناسب برای انتقال آسان به محیط‌های تولیدی است. برای اطمینان از اینکه Docker به درستی روی سرور یا دستگاه توسعه‌ای شما نصب و در حال اجرا است، ابتدا باید دستور زیر را وارد کنید.

docker info

خروجی اولیه باید شبیه به نمونه زیر باشد (اگر تعداد کانتینرها یا تصاویر شما کمی متفاوت باشد، نگران نباشید).

OutputClient:
 Context:    default
 Debug Mode: false
 Plugins:
  buildx: Docker Buildx (Docker Inc., v0.7.1)
  compose: Docker Compose (Docker Inc., v2.2.1)
  scan: Docker Scan (Docker Inc., v0.14.0)

Server:
 Containers: 15
  Running: 0
  Paused: 0
  Stopped: 15
 Images: 47
 Server Version: 20.10.11
 ...

پس از تایید اینکه Docker در حال اجرا است، از زیر برای دانلود آخرین نسخه از imgproxy از Docker Hub استفاده کنید.

docker pull darthsim/imgproxy:latest

در حین دانلود، نوار پیشرفت را مشاهده خواهید کرد. حالا برای راه‌اندازی imgproxy، دستور زیر را وارد کنید تا بک نمونه از کانتینر اجرا شود.

docker run -p 8080:8080 -it darthsim/imgproxy

گزینه -p به Docker می‌گوید که پورت 8080 کانتینر را به پورت 8080 دستگاه شما متصل کند. گزینه --it نیز مشخص می‌کند که می‌خواهید یک ترمینال تعاملی برای مشاهده لاگ‌ها داشته باشید. در نهایت، darthsim/imgproxy نام تصویر است که قبلاً دانلود کرده‌اید و می‌خواهید آن را اجرا کنید.

خروجی مشابه این را مشاهده خواهید کرد.

WARNING [2021-12-24T03:21:18Z] No keys defined, so signature checking is disabled
WARNING [2021-12-24T03:21:18Z] No salts defined, so signature checking is disabled
INFO [2021-12-24T03:21:18Z] Starting server at :8080

نگران هشدارها نباشید؛ این موارد در مراحل بعدی اصلاح خواهند شد.

با تکمیل این مرحله، شما imgproxy را نصب کرده‌اید و اکنون بررسی کرده‌اید که به درستی اجرا می‌شوند. در مراحل بعدی، شما با استفاده از URL های imgproxy، تصاویر اصلاح شده را درخواست خواهید کرد.

آموزش استفاده از Docker در توسعه‌ی نرم‌افزار
استفاده از Docker

ایمن کردن imgproxy با امضا

در این مرحله، شما باید URL هایی که از imgproxy استفاده می‌کنید را امضا کنید تا امنیت بیشتری داشته باشید و این کار باعث می‌شود تنها URL های معتبر که با جفت کلید و نمک خاصی امضا شده‌اند. توسط imgproxy پردازش شوند. این روش از سو استفاده و استفاده غیر مجاز از منابع سرور جلوگیری می‌کند.

1. تولید جفت کلید/نمک

• ابتدا به یک جفت کلید و نمک تصادفی (hexadecimal) با طول 64 رقم نیاز دارید.
• شما می‌توانید این جفت را به صورت دستی یا با استفاده از ابزارهای آنلاین تولید کنید.

2. تنظیم متغیر های محیطی در Docker

• پس از تولید جفت کلید/نمک، باید آن را به عنوان متغیرهای محیطی در Docker تنظیم کنید.
• دستور راه‌اندازی Docker برای imgproxy به این صورت است.

docker run –env IMGPROXY_KEY=your_key –env IMGPROXY_SALT=your_salt -p 8080:8080 -it darthsim/imgproxy

3. امضای URL

• پس از تنظیمات، اگر URL بدون امضا درخواست شود، سرور خطای 403 را می‌دهد.
• برای تولید URL های امضا شده، باشد از الگوریتم‌های SHA256 برای ایجاد امضا استفاده کنید.
• در اینجا یک اسکریپت Ruby برای تولید امضا شده است که URL را کد گذاری کرده و با استفاده از کلید و نمک، امضا می‌کند.

4. اجرا اسکریپت Ruby برای تولید URL امضا شده

• اسکریپت Ruby به صورت زیر عمل می‌کند.

require “openssl”
require “base64”

key = [“your IMGPROXY_KEY value”].pack(“H“) salt = [“your IMGPROXY_SALT value”].pack(“H“)

url = “https://i.imgur.com/KSLD4VV.jpeg”

encoded_url = Base64.urlsafe_encode64(url).tr(“=”, “”).scan(/.{1,16}/).join(“/”)

path = “/#{encoded_url}”

digest = OpenSSL::Digest.new(“sha256”)
hmac = Base64.urlsafe_encode64(OpenSSL::HMAC.digest(digest, key, “#{salt}#{path}”)).tr(“=”, “”)

signed_path = “/#{hmac}#{path}”

puts “Open http://localhost:8080#{signed_path} in a web browser”

پس از اجرای اسکریپت، یک URL امضا شده دریافت می‌کنید که می‌توانید آن را در مرورگر خود باز کنید؛ فقط شما قادر به ایجاد این URL خواهید بود. این روش به شما کمک می‌کند تا دسترسی‌های غیر مجاز به سرور را مسدود کرده و از منابع خود به صورت ایمن استفاده کنید.

پیکربندی imgproxy برای ارائه خودکار تصاویر

در این مرحله شما imgproxy را طوری پیکربندی می‌کنید که به طور خودکار از بهینه‌ترین فرمت‌های تصویر استفاده کند. به عبارت دیگر، به جای تعیین صریح فرمت خروجی مانند jpg یا png، می‌توانید imgproxy را به طوری تنظیم کنید که تنها در صورتی از فرمت‌های نسل بعد مانند WebP یا AVIF استفاده کند که مرورگر کاربر از آن‌ها پشتیبانی کند؛ در غیر این صورت، به صورت خودکار به فرمت‌های استاندارد مانند PNG یا JPG باز می‌گردد.

چطور این کار انجام می‌شود؟

imgproxy با بررسی هدر Accept که مرورگرها به‌صورت خودکار در درخواست‌هایشان ارسال می‌کنند، مشخص می‌کند که چه فرمت‌هایی پشتیبانی می‌شود. برای مثال، مرورگر Chrome هدر زیر را ارسال می‌کند.

arduinoCopyEditimage/avif,image/webp,image/apng,image/*,*/*;q=0.8

با وجود MIME typeهای image/avif و image/webp در این هدر، مشخص است که Chrome از هر دو فرمت AVIF و WebP پشتیبانی می‌کند.

تنظیم تشخیص فرمت‌های نسل بعد در imgproxy

برای فعال‌سازی قابلیت تشخیص خودکار فرمت‌های مدرن، کافیست متغیر محیطی IMGPROXY_ENABLE_WEBP_DETECTION را بر روی true تنظیم کنید. این کار را می‌توانید هنگام اجرای imgproxy در Docker به‌وسیله دستور زیر انجام دهید (به جای your-key و your-salt مقادیر واقعی کلید و نمک خود را قرار دهید).

bashCopyEditdocker run --env IMGPROXY_ENABLE_WEBP_DETECTION=true --env IMGPROXY_KEY=your-key --env IMGPROXY_SALT=your-salt -p 8080:8080 -it darthsim/imgproxy

پس از راه‌اندازی مجدد، وقتی URL امضا شده‌ای که در مراحل قبلی تولید کرده‌اید (مثلاً):

bashCopyEdithttp://localhost:8080/-CAkkjs5IioquivOi5LYyDnVxEULmPK-xIwIwXTleUA/aHR0cHM6Ly9pLmltZ3VyLmNvbS9LU0xE/NFZWLmpwZWc

را در مرورگر باز کنید، تصویر به فرمت WebP سرو می‌شود. برای تأیید این موضوع می‌توانید از ابزارهای توسعه‌دهنده مرورگر یا دستور curl استفاده کنید. به عنوان مثال:

در خروجی، در هدر Content-Type مشخص شده است که تصویر به فرمت webp ارسال شده است.

bashCopyEditcurl -s -v -H “Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8” http://localhost:8080/M-RTYvp5xktEK9gG93hPwAB6on9aX7H5XciGsI3XSac/aHR0cHM6Ly9pLmltZ3VyLmNvbS9LU0xE/NFZWLmpwZWc

اگر بخواهید به‌طور مشابه از قابلیت تشخیص فرمت AVIF نیز استفاده کنید، می‌توانید متغیر محیطی IMGPROXY_ENABLE_AVIF_DETECTION را تنظیم کنید. این تنظیمات به imgproxy اجازه می‌دهد که تنها در صورتی از فرمت‌های نسل بعد استفاده کند که مرورگر کاربر از آن‌ها پشتیبانی کند؛ در غیر این صورت، تصویر به فرمت‌های استاندارد (PNG یا JPG) بازمی‌گردد.

جمع بندی

با راه‌اندازی و پیکربندی imgproxy از طریق Docker، حالا می‌توانید تصاویر وب‌سایت خود را به‌صورت خودکار و در لحظه، به فرمت‌های بهینه‌ مانند WebP تبدیل کرده و تنها به مرورگرهایی ارائه دهید که از آن‌ها پشتیبانی می‌کنند. این کار نه‌تنها سرعت بارگذاری سایت را افزایش می‌دهد، بلکه تجربه کاربری را بهبود می‌بخشد و امتیاز Web Vitals را ارتقا می‌دهد.

استفاده از imgproxy یک راهکار هوشمند، امن و مقیاس‌پذیر برای وب‌سایت‌هایی‌ست که به دنبال بهینه‌سازی حرفه‌ای تصاویر خود هستند.