منتشر شده: ۸ اکتبر ۲۰۲۵
کاهش زمان دانلود تصاویر میتواند زمان بارگذاری صفحه و LCP را بهبود بخشد.
چگونه بینش شکست میخورد
این بینش، تصاویری را که حجم دانلود غیرضروری بالایی دارند، برجسته میکند. صرفهجویی تخمینی در بایت با مقایسه حجم دانلود تصویر با نسبت بایت به پیکسل کارآمد برای فرمت تصویر محاسبه میشود.
چگونه زمان دانلود تصویر را بهبود بخشیم
بسته به اندازه نمایش داده شده و فرمت فایل تصویر، چندین استراتژی برای بهبود زمان دانلود تصویر توسط این بینش توصیه شده است. استقرار یک CDN تصویر میتواند برای همه این استراتژیها بسیار مفید باشد.
افزایش ضریب فشردهسازی تصویر
اکثر فرمتهای تصویر از یک سطح فشردهسازی پشتیبانی میکنند که میتوان آن را طوری تنظیم کرد که حجم فایل تصویر را با کاهش کیفیت تصویر بهبود بخشد. میتوانید از ابزارهای تصویری مانند ImageOptim ، Squoosh و Imagemin برای بهینهسازی ضریب فشردهسازی تصویر استفاده کنید.
از فرمتهای تصویر مدرن استفاده کنید
AVIF و WebP فرمتهای تصویری هستند که در مقایسه با همتایان قدیمیتر JPEG و PNG خود، از فشردهسازی و کیفیت بالاتری برخوردارند. کدگذاری تصاویر در این فرمتهای جدیدتر، استراتژی خوبی برای کاهش حجم دانلود تصاویر است.
AVIF در آخرین نسخه همه مرورگرهای اصلی پشتیبانی میشود و در مقایسه با سایر فرمتها با تنظیمات کیفیت یکسان، حجم فایل کمتری ارائه میدهد. برای اطلاعات بیشتر در مورد AVIF به Serving AVIF Images Codelab مراجعه کنید.
WebP توسط همه مرورگرهای اصلی پشتیبانی میشود و فشردهسازی با اتلاف و بدون اتلاف بهتری را برای تصاویر در وب ارائه میدهد. برای اطلاعات بیشتر در مورد WebP به بخش «استفاده از تصاویر WebP» مراجعه کنید.
استفاده از فرمتهای ویدیویی برای محتوای متحرک
فایلهای GIF بزرگ در مقایسه با ویدیوها برای ارائه محتوای متحرک ناکارآمد هستند. برای صرفهجویی در بایتهای شبکه، استفاده از ویدیوهای MPEG4 یا WebM را برای انیمیشنها و PNG یا WebP را برای تصاویر ثابت به جای GIF در نظر بگیرید.
برای یادگیری نحوه جایگزینی تصاویر GIF با ویدیو، به بخش «جایگزینی تصاویر GIF متحرک با ویدیو برای بارگذاری سریعتر صفحه» مراجعه کنید.
تصاویر را با اندازه واکنشگرا ارائه دهید
در حالت ایدهآل، صفحه شما هرگز نباید تصاویری بزرگتر از نسخهای که روی صفحه نمایش کاربر نمایش داده میشود، ارائه دهد. هر چیزی بزرگتر از این مقدار فقط منجر به هدر رفتن بایتها و کاهش سرعت بارگذاری صفحه میشود.
یک استراتژی، استفاده از فرمتهای تصویری مبتنی بر بردار، مانند SVG است. با حجم محدودی از کد، یک تصویر SVG میتواند به هر اندازهای مقیاسبندی شود. برای کسب اطلاعات بیشتر، به «جایگزینی آیکونهای پیچیده با SVG» مراجعه کنید.
اگر تصاویر برداری (vector-based images) گزینه مناسبی نیستند، بهتر است از تصاویری استفاده کنید که "واکنشگرا" (responsive) باشند. در تصاویر واکنشگرا، شما چندین نسخه از هر تصویر تولید میکنید و سپس با استفاده از کوئریهای رسانهای، ابعاد نمایشگر و غیره، مشخص میکنید که از کدام نسخه در HTML یا CSS خود استفاده کنید.
برای مثال، عنصر <img> دارای ویژگیهای srcset و sizes است که میتوانند URLهای تصویر را برای اندازههای مختلف مشخص کنند:
اگر نیاز دارید تصویر را به طور کامل تغییر دهید، میتوانید از عنصر <picture> استفاده کنید:
برای کسب اطلاعات بیشتر به تصاویر واکنشگرا و عنصر تصویر مراجعه کنید.
راهنمایی مخصوص پشته
این بینش همچنین راهنماییهای خاص پشته را برای صفحاتی که از فناوریهای زیر استفاده میکنند، ارائه میدهد:
آمپر
- نمایش تمام اجزای
amp-imgرا در قالبهای WebP در نظر بگیرید و در عین حال یک جایگزین مناسب برای سایر مرورگرها تعیین کنید . - برای محتوای متحرک،
amp-animبرای به حداقل رساندن مصرف CPU هنگام نمایش محتوا در خارج از صفحه استفاده کنید.
دروپال
- استفاده از ماژولی را در نظر بگیرید که به طور خودکار تصاویر آپلود شده از طریق سایت را بهینه و کاهش میدهد و در عین حال کیفیت را حفظ میکند.
- مطمئن شوید که از استایلهای تصویر واکنشگرای داخلی ارائه شده توسط دروپال برای تمام تصاویر رندر شده در سایت استفاده میکنید.
جوملا
استفاده از افزونه یا سرویسی را در نظر بگیرید که به طور خودکار تصاویر آپلود شده شما را به فرمتهای بهینه تبدیل میکند.
مگنتو
استفاده از یک افزونهی شخص ثالث Magento که تصاویر را بهینه میکند را در نظر بگیرید.
وردپرس
استفاده از یک افزونه بهینهسازی تصویر وردپرس را در نظر بگیرید که تصاویر شما را فشرده میکند و در عین حال کیفیت را حفظ میکند.