کاهش حجم عکس و تبدیل به WebP

چرا حجم عکس سایت مهم است؟

در بیشتر سایت‌ها عکس‌ها بیش از نیمی از حجم صفحه را می‌سازند. یک عکس ۴ مگابایتی که مستقیم از گوشی یا دوربین آپلود شده، روی اینترنت موبایل چند ثانیه طول می‌کشد تا باز شود. گوگل سرعت بارگذاری را با معیار LCP می‌سنجد و معمولاً بزرگ‌ترین عکس بالای صفحه همان عنصری است که LCP را بد می‌کند. کاهش حجم عکس ساده‌ترین و پربازده‌ترین کار برای سریع‌تر کردن سایت است.

تبدیل JPG و PNG به WebP

WebP در کیفیت یکسان معمولاً ۲۵ تا ۳۵ درصد کم‌حجم‌تر از JPG است و برخلاف JPG شفافیت هم دارد؛ یعنی جای PNG را هم می‌گیرد. امروز همه‌ی مرورگرهای رایج از WebP پشتیبانی می‌کنند، پس می‌توانی بدون نگرانی همه‌ی عکس‌های سایت را WebP کنی.

اندازه‌ی درست عکس را هم کم کن

عکسی که در سایت در عرض ۴۰۰ پیکسل نمایش داده می‌شود، نیازی به عرض ۴۰۰۰ پیکسل ندارد. با گزینه‌ی «حداکثر عرض» عکس را به اندازه‌ی واقعی نمایشش برسان؛ برای صفحه‌های رتینا حدود دو برابر عرض نمایش کافی است. همین کار به‌تنهایی گاهی حجم را ده برابر کم می‌کند.

استفاده از WebP و AVIF با تگ picture

اگر هر دو نسخه را ساختی، مرورگر خودش بهترین فرمتی را که پشتیبانی می‌کند انتخاب می‌کند:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="توضیح تصویر"
       width="1200" height="630" loading="lazy" decoding="async">
</picture>

برای عکس‌هایی که در موبایل و دسکتاپ اندازه‌ی متفاوت دارند، چند اندازه بساز و با srcset بده:

<img src="/img/card-800.webp"
     srcset="/img/card-400.webp 400w, /img/card-800.webp 800w, /img/card-1200.webp 1200w"
     sizes="(max-width: 600px) 100vw, 400px"
     alt="…" width="800" height="500" loading="lazy">

همیشه width و height را بنویس تا صفحه هنگام بارگذاری عکس جابه‌جا نشود (CLS)، و برای عکس اصلی بالای صفحه loading="lazy" نگذار.

در پروژه‌های تبدیل طرح به HTML همه‌ی عکس‌ها به‌صورت WebP و با اندازه‌ی درست خروجی گرفته می‌شوند. برای آیکون‌های کوچک هم می‌توانی از تبدیل SVG به CSS یا تبدیل عکس به Base64 استفاده کنی.