اگر یک تصویر رندر شده نسبت ابعادی داشته باشد که به طور قابل توجهی با نسبت تصویر در فایل منبع آن متفاوت باشد (نسبت تصویر طبیعی )، تصویر رندر شده ممکن است مخدوش به نظر برسد و احتمالاً تجربه کاربری ناخوشایندی ایجاد کند.
چگونه ممیزی نسبت تصویر فانوس دریایی شکست می خورد
Lighthouse هر تصویری را که ابعاد رندر شده آن بیش از چند پیکسل تفاوت داشته باشد، در صورت رندر شدن با نسبت طبیعی خود، با ابعاد مورد انتظار علامت گذاری می کند:
دو دلیل رایج برای نسبت تصویر نادرست وجود دارد:
- یک تصویر با مقادیر واضح عرض و ارتفاع که با ابعاد تصویر منبع متفاوت است تنظیم می شود.
- یک تصویر به عرض و ارتفاع به عنوان درصدی از یک ظرف با اندازه متغیر تنظیم می شود.
اطمینان حاصل کنید که تصاویر با نسبت تصویر صحیح نمایش داده می شوند
از CDN تصویر استفاده کنید
یک CDN تصویر می‌تواند خودکارسازی فرآیند ایجاد نسخه‌های با اندازه‌های مختلف از تصاویر شما را آسان‌تر کند. بررسی کنید از CDN های تصویر برای بهینه سازی تصاویر برای یک نمای کلی و نحوه نصب CDN تصویر Thumbor برای یک آزمایشگاه کد عملی استفاده کنید.
CSS را که بر نسبت تصویر تأثیر می گذارد، بررسی کنید
اگر در یافتن CSS که باعث نسبت تصویر نادرست شده است با مشکل مواجه هستید، Chrome DevTools می‌تواند اعلان‌های CSS را که بر روی یک تصویر خاص تأثیر می‌گذارد به شما نشان دهد. برای اطلاعات بیشتر ، فقط CSS را که در واقع در صفحه عنصر اعمال می شود، مشاهده کنید.
ویژگی های width و height تصویر را در HTML بررسی کنید
در صورت امکان، تمرین خوبی است که ویژگی های width و height هر تصویر را در HTML خود مشخص کنید تا مرورگر بتواند فضایی را برای تصویر اختصاص دهد. این رویکرد کمک می کند تا اطمینان حاصل شود که محتوای زیر تصویر پس از بارگذاری تصویر تغییر نمی کند.
با این حال، تعیین ابعاد تصویر در HTML می‌تواند دشوار باشد اگر با تصاویر واکنش‌گرا کار می‌کنید، زیرا هیچ راهی برای دانستن عرض و ارتفاع تا زمانی که ابعاد viewport را بدانید وجود ندارد. استفاده از کتابخانه CSS Aspect Ratio یا جعبه‌های نسبت ابعاد را برای کمک به حفظ نسبت ابعاد برای تصاویر واکنش‌گرا در نظر بگیرید.
در نهایت، پست سرویس تصاویر با ابعاد صحیح را بررسی کنید تا نحوه نمایش تصاویر با اندازه مناسب برای دستگاه هر کاربر را بیاموزید.