بهینه سازی تصویر برای وب: راهنمای کامل

آهسته بارگذاری صفحه، تبدیل ها را از بین می برد. مطالعات نشان می دهد 40 درصد از کاربران سایتی را که بیش از 3 ثانیه طول می کشد رها می کنند. بزرگترین علت؟ تصاویر بهینه نشده یک عکس 5 مگابایتی در صفحه اصلی شما می تواند زمان بارگیری بالون را حتی در اتصالات سریع افزایش دهد.

چک لیست بهینه سازی تصویر

ابعاد مناسب — تصویر 4000 پیکسلی را در جایی که 800 پیکسل نمایش می دهید ارسال نکنید
قالب راست — WebP/AVIF مدرن، JPG/PNG بازگشتی
فشرده سازی مناسب — کیفیت ۷۵ تا ۸۵٪ برای عکس ها، بدون افت برای گرافیک
تحویل صحیح — بارگیری تنبل، srcset پاسخگو

ابعاد توصیه شده در سال 2026

تصاویر قهرمان: 1920×1080 (Full HD) یا 2560×1440 (2K) حداکثر
قهرمان پست وبلاگ: 1200×675 (16:9)
عکس‌های محصول: 1500×1500 با پشتیبانی از زوم، نمایشگر پیش‌فرض 800×800
آواتارها: 256×256 (تصاویر کوچک کاهش می‌یابند)
گراف باز (اشتراک اجتماعی): 1200×630
فاویکون: 32×32، 192×192، 512×512 PNG

قبل از آپلود، اندازه عکس‌ها را با ابزار تغییر اندازه تصویر به این ابعاد تغییر دهید.

فرمت‌ها: چه زمانی از چه استفاده شود

WebP: پیش‌فرض برای 95 درصد از تصاویر وب. 25-35٪ کوچکتر از JPG با همان کیفیت. پشتیبانی از مرورگر جهانی.
AVIF: حتی کوچکتر (۵۰٪ کوچکتر از JPG). برای تصاویر قهرمان استفاده کنید. مرورگرهای جدیدتر از آن پشتیبانی می کنند.
JPG: عکس‌های بدون شفافیت. سازگاری عالی.
PNG: لوگوها، تصاویر صفحه، هر چیزی که شفافیت داشته باشد. بدون ضرر.
SVG: گرافیک برداری، نمادها، تصاویر ساده. اندازه فایل کوچک، مقیاس بندی بی نهایت.

تبدیل بین این قالب‌ها با تبدیل تصویر PDF7.

فشرده سازی: چقدر تهاجمی بیش از حد تهاجمی است؟

برای عکس‌ها: با کیفیت 85 درصد شروع کنید. برای صفحات حساس به پهنای باند به 75 درصد کاهش دهید. زیر 70 درصد، مصنوعات قابل مشاهده می شوند. از ابزار فشرده سازی تصویر ما برای یافتن تعادل مناسب استفاده کنید.

تصاویر پاسخگو با srcset

تصویر 2K را به تلفن ارائه نکنید. از ویژگی srcset HTML استفاده کنید:

مرورگر کوچکترین تصویر مناسب را انتخاب می کند. برای هر تصویر به 3 اندازه نیاز دارید.

بارگیری تنبل

loading="lazy" را به همه تصاویر زیر تاشو اضافه کنید. مرورگرهای مدرن آنها را بارگیری نمی‌کنند تا زمانی که کاربر به نزدیکی آن پیمایش کند و پهنای باند را در هر بارگذاری صفحه صرفه‌جویی کند.

قانون 100 کیلوبایت

تصاویر جداگانه زیر 100 کیلوبایت را هدف بگیرید. تصاویر قهرمان می توانند تا 200 کیلوبایت کشیده شوند. اگر حجم یک عکس بیشتر از 500 کیلوبایت باشد، مشکل ایجاد کرده اید - اندازه را تغییر داده و دوباره فشرده کنید.