نحوه افزایش سرعت تصاویر پس زمینه

نحوه افزایش سرعت تصاویر پس زمینه

این مقاله راه هایی را برای افزایش سرعت تصاویر پس زمینه در بهینه سازی عملکرد سایت را به شما نشان می دهد. تصاویر پس‌زمینه معمولاً در مکان‌هایی استفاده می‌شوند که متن یا محتوا در بالای آن وجود دارد.

این احتمال وجود دارد که تصاویر پس زمینه کند نمایش داده شوند.

چرا تصاویر پس زمینه کند هستند؟

درخواست های با اولویت پایین

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

تصاویر پس زمینه در سایت  MangoWP

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

اگر یک تگ IMG داشته باشید، با تجزیه فایلHTML ، تصویر فورا دانلود شده و نمایش داده می شود.

اگر تصاویر پس‌زمینه به‌عنوان کد درون خطی در HTML هستند، افزونه هایی مانند FlyingPress به طور خودکار آنها را شناسایی کرده و بارگذاری می کنند.

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

توجه: اگر از FlyingPress استفاده می کنید، ما یک کلاس کمکی “lazy-bg” برای بارگذاری تصاویر پس زمینه حتی در فایل های CSS داریم.

از تگ IMG با object-fit استفاده کنید.

تصاویر پس‌زمینه معمولاً با مقداری متن/محتوا در مرکز استفاده می‌شوند، یا شما یک div ثابت دارید، و می‌خواهید تصویری را بدون تغییر اندازه منطقه (background-size: cover) «پر» کنید.

قبلاً رسیدن به این هدف با تگ های IMG واقعاً سخت بود. بنابراین استفاده از تصاویر پس زمینه بهتر بود.

با این حال، یک ویژگی object-fit: cover  مناسب CSS وجود دارد: پوششی که همان مزیت را دارد.

تصویر پس زمینه را از قبل بارگذاری کنید

اگر از تصویر پس‌زمینه یا برچسب IMG استفاده می‌کنید و تصویر در قسمت بالا قرار دارد، آن تصویر را از قبل بارگذاری کنید. پیش از بارگیری به مرورگر می‌گوید آن تصویر را با اولویت بالا دانلود کند.

تگ IMG با “نمایش: none’ hack

تصاویر پس‌زمینه را می‌توان همراه با background-color, background-repeat, background-attachment, background-position, and background-blend-mode و غیره استفاده کرد.

بنابراین در برخی شرایط، بهتر است از تصویر پس‌زمینه به جای تگ IMG برای استفاده از سایر ویژگی‌های CSS استفاده کنید.

می توانید یک تگ IMG معمولی display: none . این به مرورگر می‌گوید که بلافاصله تصویر را دانلود کند، اما آن را با استفاده از یک تصویر پس‌زمینه نمایش دهد.

تصاویر واکنشگرا اضافه کنید

شما srcset و اندازه‌ها را به تصاویر معمولی اضافه می‌کنید تا تصاویر واکنش‌گرا را بر اساس دستگاه ارائه کنید:

<img srcset=”elva-fairy-320w.jpg 320w,

elva-fairy-480w.jpg 480w,

elva-fairy-800w.jpg 800w”

sizes=”(max-width: 320px) 280px,

(max-width: 480px) 440px,

800px”

src=”elva-fairy-800w.jpg” alt=”Elva dressed as a fairy”>

به طور مشابه، می توانید همین کار را برای تصاویر پس زمینه با استفاده از مجموعه تصاویر انجام دهید:

در غیر این صورت، همان تصویر بزرگ را برای مک بوک ۲۸۸۰ پیکسلی و آیفون ۶ اس ۷۵۰ پیکسلی ارائه خواهید کرد!

تصویر پس زمینه درون خطی در HTML

اگر تصویر پس زمینه شما در یک فایل CSS خارجی است، آن را در HTML قرار دهید. به این ترتیب مرورگر لازم نیست منتظر دانلود آن فایل CSS و سپس دانلود تصویر باشد.