بخش فرصت‌ها در گزارش فانوس دریایی شما، تمام تصاویر موجود در صفحه شما را که اندازه مناسبی ندارند، همراه با صرفه‌جویی بالقوه در کیلوبایت (KiB) فهرست می‌کند. برای ذخیره داده ها و بهبود زمان بارگذاری صفحه، اندازه این تصاویر را تغییر دهید:
چگونه Lighthouse تصاویر بزرگ را محاسبه می کند
برای هر تصویر در صفحه، Lighthouse اندازه تصویر رندر شده را با اندازه تصویر واقعی مقایسه می کند. اندازه رندر شده همچنین نسبت پیکسل دستگاه را به حساب می آورد. اگر اندازه رندر شده حداقل 4 کیلو بایت کوچکتر از اندازه واقعی باشد، در این صورت تصویر در ممیزی با شکست مواجه می شود.
استراتژی هایی برای اندازه گیری صحیح تصاویر
در حالت ایده‌آل، صفحه شما هرگز نباید تصاویر بزرگتر از نسخه‌ای که در صفحه کاربر ارائه می‌شود، ارائه دهد. هر چیزی بزرگتر از آن فقط باعث هدر رفتن بایت ها می شود و زمان بارگذاری صفحه را کاهش می دهد.
استراتژی اصلی برای ارائه تصاویر با اندازه مناسب «تصاویر واکنشگرا» نامیده می‌شود. با تصاویر واکنشگرا، چندین نسخه از هر تصویر را تولید می‌کنید و سپس مشخص می‌کنید که از کدام نسخه در HTML یا CSS خود با استفاده از پرس‌وجوهای رسانه، ابعاد viewport و غیره استفاده کنید. علاوه بر این، RespImageLint یک نشانک مفید برای شناسایی مقادیر بهینه srcset و sizes برای تصاویر شما است. برای کسب اطلاعات بیشتر در مورد این ویژگی‌ها ، به تصاویر واکنشگرا مراجعه کنید.
CDN های تصویر یکی دیگر از استراتژی های اصلی برای ارائه تصاویر با اندازه مناسب است. شما می توانید CDN های تصویر مانند API های وب سرویس را برای تبدیل تصاویر در نظر بگیرید.
استراتژی دیگر استفاده از فرمت های تصویر مبتنی بر برداری مانند SVG است. با مقدار محدود کد، یک تصویر SVG می تواند به هر اندازه ای مقیاس شود. برای اطلاعات بیشتر به جایگزینی نمادهای پیچیده با SVG مراجعه کنید.
ابزارهایی مانند gulp-responsive یا responsive-images-generator می توانند به خودکارسازی فرآیند تبدیل یک تصویر به فرمت های متعدد کمک کنند. همچنین CDN های تصویری وجود دارد که به شما امکان می دهد چندین نسخه را تولید کنید، چه زمانی که یک تصویر را آپلود می کنید، یا آن را از صفحه خود درخواست کنید.
راهنمایی مخصوص پشته
AMP
از پشتیبانی کامپوننت amp-img برای srcset استفاده کنید تا مشخص کنید از کدام دارایی های تصویر بر اساس اندازه صفحه استفاده کنید. همچنین به تصاویر پاسخگو با srcset، اندازه ها و ارتفاع ها مراجعه کنید.
زاویه ای
استفاده از ابزار BreakpointObserver را در Component Dev Kit (CDK) برای مدیریت نقاط شکست تصویر در نظر بگیرید.
دروپال
مطمئن شوید که از سبک‌های تصویر پاسخگو بومی ارائه شده از Drupal استفاده می‌کنید. هنگام رندر کردن فیلدهای تصویر از طریق حالت‌های مشاهده، نماها یا تصاویر آپلود شده از طریق ویرایشگر WYSIWYG، از سبک‌های تصویر پاسخگو استفاده کنید.
گتسبی
از افزونه gatsby-image برای ایجاد چندین تصویر کوچکتر برای گوشی های هوشمند و تبلت ها استفاده کنید. همچنین می‌تواند مکان‌هایی برای تصویر SVG برای بارگذاری تنبل کارآمد ایجاد کند.
جوملا
استفاده از افزونه تصاویر واکنشگرا را در نظر بگیرید.
وردپرس
تصاویر را مستقیماً از طریق کتابخانه رسانه آپلود کنید تا اطمینان حاصل کنید که اندازه‌های تصویر مورد نیاز در دسترس هستند، و سپس آنها را از کتابخانه رسانه وارد کنید یا از ویجت تصویر برای اطمینان از استفاده از اندازه‌های بهینه تصویر (از جمله مواردی که برای نقاط شکست پاسخگو) استفاده می‌شوند، استفاده کنید. از استفاده از تصاویر Full Size خودداری کنید، مگر اینکه ابعاد برای استفاده مناسب باشد. درج تصاویر در پست ها و صفحات را ببینید.