بهینهسازی تصاویر برای افزایش سرعت سایت: راهنمای کامل
·3 min read·Philo
عملکرد وبتصاویر تقریباً ۵۰ درصد از وزن صفحه را تشکیل میدهند. بهینهسازی آنها بزرگترین قدم در بهبود عملکرد سایت است.
چرا اهمیت دارد؟
- ۵۳ درصد از کاربران موبایل اگر بارگذاری بیش از ۳ ثانیه طول بکشد، صفحه را ترک میکنند
- یک ثانیه تأخیر = ۷ درصد کاهش در نرخ تبدیل
- شاخصهای Core Web Vitals (LCP و CLS) مستقیماً بر رتبهبندی گوگل تأثیر میگذارند
مرحله ۱: فرمت مناسب انتخاب کنید
- WebP: بهترین گزینه برای تمام کاربردهای وب (۲۵ تا ۳۵ درصد کوچکتر از JPEG)
- PNG: شفافیت و لوگو
- JPEG: عکسهای فوتوگرافی
- SVG: آیکونها و گرافیک برداری
- AVIF: نسل بعدی با fallback برای پشتیبانی گسترده
مرحله ۲: فشردهسازی
| نوع تصویر | سطح کیفیت | صرفهجویی |
|---|---|---|
| Hero اصلی | ۸۰–۸۵٪ | ۴۰–۶۰٪ |
| بلاگ | ۷۰–۸۰٪ | ۵۰–۷۰٪ |
| تصاویر کوچک | ۶۰–۷۰٪ | ۶۰–۸۰٪ |
TinyImg — فشردهسازی در مرورگر، حریم خصوصی کامل.
مرحله ۳: تصاویر واکنشگرا
<img src="image-800.webp"
srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Alt text" width="800" height="600" />
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Alt text" width="800" height="600" />
</picture>
مرحله ۴: بارگذاری تنبل (Lazy Loading)
<img src="image.webp" loading="lazy" alt="Description" width="800" height="600" />
هرگز بارگذاری تنبل را برای تصاویر بالای صفحه (above the fold) فعال نکنید.
مرحله ۵: ابعاد را تعریف کنید
<img src="photo.webp" alt="Photo" width="800" height="600" />
مرحله ۶: از CDN استفاده کنید
Cloudflare، Cloudinary، imgix و Vercel از بهترین گزینهها هستند.
مرحله ۷: اندازهگیری و بررسی
- LCP: کمتر از ۲.۵ ثانیه
- CLS: کمتر از ۰.۱
- وزن تصاویر: کمتر از ۵۰۰ کیلوبایت
چکلیست
- فرمت WebP
- فشردهسازی با TinyImg
- srcset و sizes
- بارگذاری تنبل برای تصاویر پایین صفحه
- تعریف width و height
- CDN
- بررسی با PageSpeed Insights
عملکرد وببهینهسازیسرعتSEO