فشرده‌سازی عکس برای وب: چطور حجم را کم کنیم و کیفیت نیفتد؟
عکس‌ها معمولاً سنگین‌ترین بخش یک صفحه‌ی وب‌اند. اگر سایتتان کند است، شانس زیاد این است که علتش چند عکس بزرگ باشد، نه کد. خوشبختانه این مشکل از ساده‌ترین مشکل‌های سرعت است.
قدم ۱: ابعاد را با نمایش واقعی هماهنگ کنید
عکس ۴۰۰۰ پیکسلی که در صفحه با عرض ۴۰۰ پیکسل نمایش داده می‌شود، بایت‌های بی‌دلیل منتقل می‌کند. قاعده: ابعاد فایل را نزدیک بزرگ‌ترین اندازه‌ای بگیرید که واقعاً نمایش داده می‌شود (برای صفحه‌های Retina تا دو برابر آن).
قدم ۲: فرمت مناسب را انتخاب کنید
- JPEG: برای عکس‌های واقعی قدیمی و سازگار با همه‌چیز.
- PNG: برای تصویرهای با لبه‌ی تیز، متن یا شفافیت؛ اما برای عکس معمولاً سنگین است.
- WebP: معمولاً برای همان کیفیت از JPEG و PNG کوچک‌تر است و شفافیت هم دارد. مرورگرهای امروزی از آن پشتیبانی می‌کنند. توضیح بیشتر در WebP چیست؟.
- SVG: برای لوگو و آیکون ساده؛ برداری است و تقریباً حجمی ندارد.
قدم ۳: کیفیت را کم‌کم پایین بیاورید
کیفیت ۱۰۰٪ لازم نیست. برای فرمت‌های lossy مثل JPEG و WebP، معمولاً بازه‌ی ۷۵ تا ۸۵ کیفیت ظاهری را تقریباً حفظ می‌کند و حجم را چشمگیر کم می‌کند. بهترین روش: چند مقدار را امتحان کنید و با چشم خودتان مقایسه کنید؛ عدد جادویی برای همه‌ی عکس‌ها وجود ندارد.
قدم ۴: چند اندازه بدهید (srcset)
به‌جای یک فایل بزرگ، چند نسخه (مثلاً ۴۸۰، ۷۶۸، ۱۲۸۰) بسازید و با srcset و sizes بگذارید مرورگر مناسب را بردارد. موبایل لازم نیست نسخه‌ی دسکتاپ را بگیرد.
<img src="hero-1280.webp"
srcset="hero-768.webp 768w, hero-1280.webp 1280w"
sizes="(min-width:1024px) 960px, 100vw"
width="1280" height="580" alt="توضیح تصویر">
قدم ۵: عرض و ارتفاع بدهید، و تنبل بارگذاری کنید
widthوheightرا بنویسید تا صفحه هنگام لود جابه‌جا نشود (CLS).- عکس‌های زیر صفحه را
loading="lazy"کنید. - فقط عکس اصلی بالای صفحه (LCP) را زود و با اولویت بارگذاری کنید.
یک مثال واقعی
در همین سایت، پس از تبدیل به WebP، عکس بنیان‌گذار حدود ۱۳ کیلوبایت شد و تصویر معرفی NØX در سه اندازه بین ۱۹ تا ۶۹ کیلوبایت. این‌ها از یک اسکرین‌شات ۱۹۰۰ پیکسلی ساخته شدند.
با چه ابزاری؟
برای چند عکس، ابزار تصویر که ساخته‌ام همه‌چیز را داخل مرورگر انجام می‌دهد و فایل آپلود نمی‌شود: تغییر فرمت، کیفیت و ابعاد. برای دسته‌ی بزرگ، اسکریپت (مثلاً Python با Pillow یا Node با sharp) بهتر است.
چک‌لیست
ابعاد مناسب؛ فرمت WebP (یا JPEG)؛ کیفیت حدود ۷۵ تا ۸۵؛ چند اندازه با srcset؛ width/height؛ lazy-load غیر از عکس اصلی.