تصاویر پس زمینه CSS را با پرس و جوهای رسانه ای بهینه کنید

Demián Renzulli

بسیاری از سایت‌ها منابع سنگینی مانند تصاویر را درخواست می‌کنند که برای صفحه‌های خاص بهینه نشده‌اند و فایل‌های CSS بزرگ حاوی سبک‌هایی را ارسال می‌کنند که برخی دستگاه‌ها هرگز از آن‌ها استفاده نخواهند کرد. استفاده از پرسش‌های رسانه‌ای یک تکنیک محبوب برای ارائه شیوه‌نامه‌ها و دارایی‌های مناسب به صفحه‌های مختلف برای کاهش میزان داده‌های انتقال‌یافته به کاربران و بهبود عملکرد بارگذاری صفحه است. این راهنما به شما نشان می‌دهد که چگونه از پرس‌وجوهای رسانه‌ای برای ارسال تصاویری که تنها به اندازه‌ای که نیاز دارند استفاده کنید، تکنیکی که معمولاً به عنوان تصاویر واکنش‌گرا شناخته می‌شود.

پیش نیازها

این راهنما فرض می‌کند که با Chrome DevTools آشنا هستید. در صورت تمایل می‌توانید از DevTools مرورگر دیگری استفاده کنید. شما فقط باید اسکرین شات های Chrome DevTools در این راهنما را به ویژگی های مربوطه در مرورگر انتخابی خود نگاشت کنید.

تصاویر پس زمینه واکنشگرا را درک کنید

ابتدا، ترافیک شبکه نمایشی بهینه نشده را تجزیه و تحلیل کنید:

1. نسخه ی نمایشی بهینه نشده را در یک برگه Chrome جدید باز کنید.
2. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
3. روی تب Network کلیک کنید.
4. صفحه را دوباره بارگیری کنید.

خواهید دید که تنها تصویر درخواست شده background-desktop.jpg است که حجم آن 1006 کیلوبایت است:

اندازه پنجره مرورگر را تغییر دهید و توجه کنید که گزارش شبکه هیچ درخواست جدیدی را که توسط صفحه ارسال شده است را نشان نمی دهد. این بدان معناست که پس‌زمینه تصویر یکسان برای همه اندازه‌های صفحه نمایش استفاده می‌شود.

می توانید سبک هایی را که تصویر پس زمینه را کنترل می کنند در style.css مشاهده کنید:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

در اینجا معنای هر یک از ویژگی های استفاده شده است:

• background-position: center center : تصویر را به صورت عمودی و افقی در مرکز قرار دهید.
• background-repeat: no-repeat : تصویر را فقط یک بار نشان دهید.
• background-attachment: fixed : از اسکرول کردن تصویر پس‌زمینه خودداری کنید.
• background-size: cover : اندازه تصویر را طوری تغییر دهید که کل ظرف را بپوشاند.
• background-image: url(images/background-desktop.jpg) : URL تصویر.

وقتی این سبک‌ها با هم ترکیب شوند، به مرورگر می‌گویند که تصویر پس‌زمینه را با ارتفاع‌ها و عرض‌های مختلف صفحه تطبیق دهد. این اولین قدم برای دستیابی به یک پس زمینه پاسخگو است.

استفاده از یک تصویر پس زمینه برای همه اندازه های صفحه دارای محدودیت هایی است:

• همان مقدار بایت بدون در نظر گرفتن اندازه صفحه نمایش ارسال می شود، حتی زمانی که برای برخی از دستگاه ها مانند تلفن ها، پس زمینه تصویر کوچکتر و سبک تر به همان اندازه خوب به نظر می رسد. به طور کلی، شما می خواهید برای بهبود عملکرد و ذخیره داده های کاربر، کوچک ترین تصویر ممکن را ارسال کنید که همچنان روی صفحه نمایش کاربر خوب به نظر می رسد.
• در دستگاه‌های کوچک‌تر، تصویر کشیده یا بریده می‌شود تا کل صفحه را بپوشاند و به طور بالقوه قسمت‌های مرتبط پس‌زمینه را برای کاربران پنهان می‌کند.

در بخش بعدی، نحوه اعمال بهینه سازی برای بارگذاری تصاویر پس زمینه مختلف، با توجه به دستگاه کاربر، را یاد خواهید گرفت.

از پرسش های رسانه ای استفاده کنید

استفاده از پرس و جوهای رسانه ای یک تکنیک رایج برای اعلام شیوه نامه است که فقط برای رسانه ها یا انواع دستگاه های خاص اعمال می شود. آنها با استفاده از قوانین رسانه @ پیاده سازی می شوند، که به شما امکان می دهد مجموعه ای از نقاط شکست را تعریف کنید، جایی که سبک های خاصی تعریف می شوند. هنگامی که شرایط تعریف شده توسط قانون @media برآورده می شود (به عنوان مثال، یک عرض صفحه مشخص)، گروه سبک های تعریف شده در داخل نقطه شکست اعمال می شود.

مراحل زیر را می توان برای اعمال درخواست های رسانه ای در سایت استفاده کرد تا بسته به حداکثر عرض دستگاه درخواست کننده صفحه، از تصاویر مختلفی استفاده شود.

• در style.css خطی را که حاوی URL تصویر پس زمینه است حذف کنید:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

• در مرحله بعد، یک نقطه شکست برای هر عرض صفحه، بر اساس ابعاد رایج در پیکسل هایی که معمولاً صفحه نمایش های موبایل، تبلت و دسکتاپ دارند، ایجاد کنید:

برای موبایل:

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

برای تبلت ها:

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

برای دستگاه های رومیزی:

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

برای مشاهده تغییرات ایجاد شده، نسخه بهینه شده style.css را در مرورگر خود باز کنید.

اندازه گیری برای دستگاه های مختلف

سپس سایت حاصل را در اندازه های مختلف صفحه نمایش و در دستگاه های تلفن همراه شبیه سازی شده تجسم کنید:

1. سایت بهینه شده را در یک برگه جدید کروم باز کنید.
2. نمای خود را باریک کنید (کمتر از 480px ).
3. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
4. روی تب Network کلیک کنید.
5. صفحه را دوباره بارگیری کنید. توجه کنید که چگونه تصویر background-mobile.jpg درخواست شد.
6. نمای خود را گسترده تر کنید. هنگامی که پهنای آن از 480px بیشتر شد، به نحوه درخواست background-tablet.jpg توجه کنید. هنگامی که پهنای آن از 1025px بیشتر شد، توجه کنید که background-desktop.jpg چگونه درخواست می‌شود.

هنگامی که عرض صفحه مرورگر تغییر می کند، تصاویر جدید درخواست می شود.

به ویژه هنگامی که عرض کمتر از مقدار تعریف شده در نقطه شکست موبایل (480 پیکسل) باشد، گزارش شبکه زیر را مشاهده می کنید:

اندازه پس زمینه موبایل جدید 67 درصد کوچکتر از پس زمینه دسکتاپ است.

اثرات روی بزرگترین رنگ محتوایی (LCP)

عناصر دارای تصاویر پس‌زمینه CSS کاندیدای بزرگ‌ترین رنگ محتوایی (LCP) در نظر گرفته می‌شوند، با این حال، تصاویر پس‌زمینه CSS توسط اسکنر پیش‌بارگذاری مرورگر قابل شناسایی نیستند ، به این معنی که اگر مراقب نباشید ممکن است LCP سایت خود را به تاخیر بیندازید.

اولین گزینه ای که باید در نظر بگیرید این است که آیا تصویر کاندید LCP شما می تواند در عنصر <img> با ویژگی های srcset و sizes برای پاسخگویی کار کند یا خیر. اسکنر پیش بارگذاری مرورگر عناصر <img> را کشف می‌کند و درخواست‌هایی را برای آنها ارسال می‌کند در حالی که تجزیه‌کننده در هنگام رندر مسدود شده است.

اگر نمی‌توانید (یا نمی‌خواهید) از استفاده از تصویر پس‌زمینه CSS اجتناب کنید، گزینه دوم این است که تصاویر واکنش‌گرا را از قبل بارگذاری کنید تا مطمئن شوید که تصویر مناسب را برای اندازه ویوپورت مناسب از قبل بارگذاری می‌کنید. عناصر <link> media ، imagesrcset و imagesizes به مرورگر اشاره می‌کنند که یک اشاره منبع معین فقط در شرایط خاص درگاه نمایش اعمال می‌شود، و از بارگذاری‌های پیش‌فرض چندگانه زمانی که می‌خواهید تنها منبعی را که برای نمای فعلی مناسب است بارگیری کنید، اجتناب می‌کند.

خلاصه

در این راهنما، یاد گرفته‌اید که درخواست‌های رسانه را برای درخواست تصاویر پس‌زمینه متناسب با اندازه‌های صفحه‌نمایش خاص و ذخیره بایت‌ها هنگام دسترسی به سایت در دستگاه‌های کوچک‌تر، مانند تلفن‌های همراه، اعمال کنید. شما از قانون @media برای پیاده سازی پس زمینه واکنشگرا استفاده کردید. این تکنیک به طور گسترده توسط همه مرورگرها پشتیبانی می شود. یک ویژگی جدید CSS: image-set() که می تواند برای همان هدف با خطوط کد کمتری استفاده شود. در زمان نگارش این مقاله، این ویژگی در همه مرورگرها پشتیبانی نمی‌شود، اما ممکن است بخواهید مراقب نحوه تکامل پذیرش باشید، زیرا می‌تواند جایگزین جالبی برای این تکنیک باشد.