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

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

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

imgproxy چیست؟

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

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

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

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

پیش نیاز ها

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

بیشتر بخوانید: آموزش استفاده از Docker

نصب 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، تصاویر اصلاح شده را درخواست خواهید کرد.

ایمن کردن 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 اجرا، پیکربندی و ایمن‌سازی کنید. همچنین توانستید imgproxy را به گونه‌ای تنظیم کنید که به صورت خودکار تصاویر WebP را به بازدیدکنندگانی که مرورگرشان از این فرمت پشتیبانی می‌کند ارائه دهد. این تنظیمات به شما اجازه می‌دهد تا بدون نیاز به تغییرات دستی، تصاویر را در زمان واقعی تبدیل کرده و با استفاده از کانتینرهای Docker، عملکرد وب‌سایت خود را بهینه و سرعت بارگذاری آن را افزایش دهید.

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

برچسب‌ها:imgproxy برنامه های آماده

تغییرات اخیر