تاریخ انتشار: 8 اکتبر 2025
کاهش زمان دانلود تصاویر می تواند زمان بارگذاری درک شده صفحه و LCP را بهبود بخشد.
چگونه بینش شکست می خورد
بینش تصاویری را که حجم دانلود غیرضروری بزرگ دارند برجسته می کند. صرفه جویی تخمینی بایت با مقایسه اندازه دانلود تصویر با نسبت بایت/پیکسل کارآمد برای فرمت تصویر محاسبه می شود.
نحوه بهبود زمان دانلود تصویر
این بینش چندین استراتژی برای بهبود زمان دانلود تصویر بسته به اندازه نمایش داده شده و فرمت فایل تصویر توصیه می کند. استقرار یک CDN تصویر می تواند برای همه این استراتژی ها بسیار مفید باشد.
افزایش ضریب فشرده سازی تصویر
اکثر فرمت‌های تصویر از سطح فشرده‌سازی پشتیبانی می‌کنند که می‌توان آن را تنظیم کرد تا اندازه فایل تصویر را به قیمت کیفیت تصویر بهبود بخشد. می توانید از ابزارهای تصویر مانند ImageOptim ، Squoosh و Imagemin برای بهینه سازی ضریب فشرده سازی تصویر استفاده کنید.
از فرمت های تصویر مدرن استفاده کنید
AVIF و WebP فرمت های تصویری هستند که در مقایسه با همتایان قدیمی JPEG و PNG خود دارای ویژگی های فشرده سازی و کیفیت بالاتری هستند. رمزگذاری تصاویر خود در این فرمت های جدیدتر استراتژی خوبی برای کاهش حجم دانلود تصاویر است.
AVIF در آخرین نسخه تمام مرورگرهای اصلی پشتیبانی می شود و اندازه فایل های کوچک تری را در مقایسه با فرمت های دیگر با تنظیمات کیفیت یکسان ارائه می دهد. برای اطلاعات بیشتر در مورد AVIF به Service AVIF Images Codelab مراجعه کنید.
WebP توسط تمام مرورگرهای اصلی پشتیبانی می شود و فشرده سازی بدون تلفات و تلفات بهتری را برای تصاویر در وب فراهم می کند. برای اطلاعات بیشتر در مورد WebP به استفاده از تصاویر WebP مراجعه کنید.
از فرمت های ویدئویی برای محتوای متحرک استفاده کنید
گیف های بزرگ برای ارائه محتوای متحرک در مقایسه با ویدیوها ناکارآمد هستند. استفاده از ویدئوهای MPEG4/WebM برای انیمیشن‌ها و PNG/WebP برای تصاویر ثابت به جای GIF برای ذخیره بایت‌های شبکه را در نظر بگیرید.
برای یادگرفتن نحوه جایگزینی تصاویر GIF با ویدیوها، برای بارگیری سریعتر صفحه، جایگزینی GIFهای متحرک با ویدیو را ببینید.
تصاویر را با اندازه پاسخگو ارائه دهید
در حالت ایده‌آل، صفحه شما هرگز نباید تصاویر بزرگتر از نسخه‌ای که در صفحه کاربر ارائه می‌شود، ارائه دهد. هر چیزی بزرگتر از آن فقط باعث هدر رفتن بایت ها می شود و زمان بارگذاری صفحه را کاهش می دهد.
یک استراتژی استفاده از فرمت های تصویر مبتنی بر برداری مانند SVG است. با مقدار محدود کد، یک تصویر SVG می تواند به هر اندازه ای مقیاس شود. برای اطلاعات بیشتر به جایگزینی نمادهای پیچیده با SVG مراجعه کنید.
اگر تصاویر مبتنی بر برداری گزینه ای نیستند، بهتر است تصاویری را که "پاسخگو" هستند، ارائه دهید. با تصاویر واکنشگرا، چندین نسخه از هر تصویر را تولید می‌کنید، و سپس مشخص می‌کنید که از کدام نسخه در HTML یا CSS خود با استفاده از پرس‌وجوهای رسانه، ابعاد viewport و غیره استفاده کنید.
برای مثال، عنصر <img> دارای ویژگی‌های srcset و sizes است که می‌تواند URLهای تصویر را برای اندازه‌های مختلف مشخص کند:
اگر نیاز به تغییر کامل تصویر دارید، می توانید از عنصر <picture> استفاده کنید:
برای اطلاعات بیشتر به تصاویر واکنشگرا و عنصر تصویر مراجعه کنید.
راهنمایی مخصوص پشته
این بینش همچنین راهنمایی‌های مخصوص پشته را برای صفحاتی که از فناوری‌های زیر استفاده می‌کنند ارائه می‌کند:
AMP
- نمایش تمام مولفه‌های
amp-imgدر قالب‌های WebP را در نظر بگیرید، در حالی که یک بازگشت مناسب برای مرورگرهای دیگر مشخص کنید . - برای محتوای متحرک، از
amp-animبرای به حداقل رساندن استفاده از CPU در زمانی که محتوا خارج از صفحه است، استفاده کنید.
دروپال
- استفاده از ماژولی را در نظر بگیرید که به طور خودکار تصاویر آپلود شده از طریق سایت را با حفظ کیفیت بهینه سازی و کاهش می دهد.
- اطمینان حاصل کنید که از سبک‌های تصویر پاسخگو داخلی ارائه شده از دروپال برای همه تصاویر رندر شده در سایت استفاده می‌کنید.
جوملا
استفاده از افزونه یا سرویسی را در نظر بگیرید که به طور خودکار تصاویر آپلود شده شما را به فرمت های بهینه تبدیل می کند.
مجنتو
استفاده از یک افزونه Magento شخص ثالث را در نظر بگیرید که تصاویر را بهینه می کند .
وردپرس
استفاده از افزونه وردپرس بهینه سازی تصویر را در نظر بگیرید که تصاویر شما را فشرده و در عین حال کیفیت را حفظ می کند.