معرفی
AVIF یک فرمت فایل مبتنی بر یک کدک ویدیویی است و از عمق بیت بالایی پشتیبانی می کند و در عین حال حجم فایل کوچکی را حفظ می کند. شما می توانید مقالات زیادی در مورد فوق العاده بودن AVIF در اینجا و همچنین در هر جای دیگری در وب بیابید. شما روی این مقاله کلیک کردید زیرا می خواهید نحوه استفاده از AVIF در HTML را یاد بگیرید، بنابراین اجازه دهید نگاهی به موضوع بیندازیم.
پشتیبانی مرورگر
مهمترین چیزی که در هنگام استفاده از AVIF باید در نظر داشت این است که متاسفانه هنوز در همه جا پشتیبانی نمی شود. حیف است، اینطور نیست؟ WebP (یکی دیگر از فرمت های تصویر عالی، اما به اندازه کافی خوب نیست تا با AVIF همگام شود) ده سال طول کشید تا به طور کامل پشتیبانی شود زیرا اپل آماده اجرای این فرمت در سافاری نبود. اما هنوز 90 درصد پشتیبانی وجود دارد. در زمان نگارش، AVIF دارای 64٪ پشتیبانی در مرورگرها است. گوگل کروم و اپرا از آن پشتیبانی می کنند. فایرفاکس از ژوئن 2021 از آن پشتیبانی می کند. سافاری هنوز از AVIF پشتیبانی نمی کند. با این حال، AVIF اختراع کنسرسیوم صنعتی غیرانتفاعی Alliance for Open Media AOM است. غول های بزرگ مرورگر اپل، موزیلا و گوگل همگی بخشی از این پروژه هستند پشتیبانی نسبتاً سریع قابل انتظار است.
عنصر تصویر
در حال حاضر، شما هنوز هم می توانید از فرمت در شکوه کامل خود با بومی استفاده کنید <تصویر> عنصر در HTML شاید بپرسید چرا؟ خوب، <تصویر>عنصر امکان پشتیبانی پیشرونده را فراهم می کند. تو می توانیهمه فایل های تصویری را به ترتیبی که می خواهید بارگذاری کنید رها کنید. مرورگرهای بازدیدکنندگان شما بارگذاری یک تصویر در یک زمان، که باعث کاهش بار روی سرور می شود. علاوه بر این، برای پردازش چندین تصویر نیازی به اسکریپت ندارید.
- بیش از یک تصویر را در یک زمان دانلود نمی کند
- پشتیبانی بومی برای انتخاب مناسب ترین تصویر
- 96٪ پشتیبانی مرورگر و بازگشت خودکار
- اجرای این امر آسان و ساده است”
پیاده سازی
در حال حاضر 96 درصد مرورگرها از عنصر تصویر پشتیبانی می کنند. حتی اگر مادربزرگ شما با اینترنت اکسپلورر 6 نفرت انگیزش از وب سایت شما بازدید کند، وقتی شما آن را مشخص کنید، مرورگر او به فرمت تصویر پیش فرض برمی گردد. به مثال زیر نگاه کنید و اگر می خواهید برای وب سایت خود از آن استفاده کنید، آن را کپی کنید:
<picture>
<source srcSet="image.avif" type="image/avif" />
<source srcSet="image.webp" type="image/webp" />
<img
width="1280" height="720" decoding="async" loading="lazy"
src="image.jpg" alt="an avif image" />
</picture>PS: ویژگی بارگذاری تنبل توسط 75٪ از همه مرورگرها پشتیبانی می شود، از آن استفاده کنید! همچنین، فراموش نکنید که عرض و ارتفاع را برای جلوگیری از تغییر طرح اضافه کنید. ارائه عرض و ارتفاع بیش از هر زمان دیگری مهم است.
این یک تنظیم خوب برای همه بازدیدکنندگان است. مطمئن شوید اولین تگ منبع یک تصویر AVIF است تا مرورگر اولین نوع رسانه ای را که می تواند نشان دهد نمایش دهد.
پاسخگویی
در این مرحله، عالی به نظر می رسد، اینطور نیست؟ خوب، نه، هنوز نه، زیرا پلتفرم ما هنوز از انواع مختلف دستگاه ها پشتیبانی نمی کند. ایجاد یک تجربه بهینه برای نمایشگرهای رتینا دشوارتر است. ما همچنین می خواهیم مطمئن شویم که دستگاه های تلفن همراه تصاویری را که بسیار بزرگتر از صفحه نمایش خود هستند دانلود نمی کنند.
<picture>
<source
sizes="(max-width: 640px) 100vw, 640px"
srcSet="/image-1280.avif 1280w, /image-640.avif 640w, /image-320.avif 320w"
type="image/avif" />
<source
sizes="(max-width: 640px) 100vw, 640px"
srcSet="/image-1280.avif 1280w, /image-640.webp 640w, /image-320.webp 320w"
type="image/webp" />
<source
sizes="(max-width: 640px) 100vw, 640px"
srcSet="/image-1280.avif 1280w, /image-640.jpg 640w, /image-320.jpg 320w"
type="image/jpg" />
<img
width="1280" height="720" decoding="async" loading="lazy"
src="/image.jpg" alt="an avif image" />
</picture>خوب، این آنقدرها که ما در ابتدا فکر می کردیم چالش برانگیز نیست، اما ایجاد تصاویر AVIF برای هر نمای در هر فرمتی می تواند خسته کننده باشد. با این وجود، اگر وب سایت شما تصاویر زیادی ندارد، راه خوبی برای آماده شدن برای آینده است. لطفاً به یاد داشته باشید که مانند فایرفاکس تصاویری را برای نسخه های قدیمی مرورگر یا استفاده آزمایشی ارائه دهید. در غیر این صورت، تجربه کاربری شما ممکن است به دلیل رندر نشدن تصاویر آسیب ببیند. AVIF برای پس زمینه نیز خوب است. مقاله CSS را بررسی کنید. چارچوب ها چطور؟ از این مقاله با انواع فریم ورک هایی که می توانید استفاده کنید لذت ببرید.