عنصر تصویر

ماژول قبلی نشان داد که چگونه ویژگی srcset به شما اجازه می دهد تا نسخه هایی با اندازه های مختلف از یک تصویر را ارائه دهید. سپس مرورگر می تواند تصمیم بگیرد که کدام نسخه مناسب برای استفاده است. اگر می خواهید تصویر را به طور کامل تغییر دهید، به عنصر picture نیاز دارید.

همانطور که srcset بر روی ویژگی src ساخته می شود، عنصر picture نیز بر روی عنصر img ساخته می شود. عنصر picture دور یک عنصر img می پیچد.

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

اگر هیچ عنصر img در داخل عنصر picture وجود نداشته باشد، عنصر picture کار نخواهد کرد.

مانند ویژگی srcset ، عنصر picture مقدار ویژگی src را در آن عنصر img به روز می کند. تفاوت این است که در جایی که ویژگی srcset به مرورگر پیشنهاد می دهد، عنصر picture دستوراتی را می دهد. این به شما کنترل می دهد.

source

شما می توانید چندین عنصر source را در داخل یک عنصر picture مشخص کنید که هر کدام دارای ویژگی srcset خاص خود هستند. سپس مرورگر اولین موردی را که می تواند اجرا می کند.

فرمت های تصویر

در این مثال، سه تصویر مختلف در سه فرمت مختلف وجود دارد:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

اولین عنصر source به تصویری در قالب جدید AVIF اشاره می کند. اگر مرورگر قادر به رندر کردن تصاویر AVIF باشد، این فایل تصویری است که انتخاب می‌کند. در غیر این صورت، به عنصر source بعدی می رود.

عنصر source دوم به تصویری در قالب WebP اشاره می کند. اگر مرورگر قادر به ارائه تصاویر WebP باشد، از آن فایل تصویری استفاده خواهد کرد.

در غیر این صورت مرورگر به فایل تصویری در ویژگی src عنصر img برمی گردد. آن تصویر JPEG است.

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

در آن مثال، ویژگی type به مرورگر می‌گفت که چه نوع فرمت تصویر مشخص شده است.

اندازه های تصویر

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

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

در اینجا شما به مرورگر می گویید که اگر پهنای پورت دید بیشتر از 75em باشد، باید از تصویر بزرگ استفاده کند. بین 40em تا 75em مرورگر باید از تصویر متوسط ​​استفاده کند. زیر 40em مرورگر باید از تصویر کوچک استفاده کند.

این با استفاده از ویژگی‌های srcset و sizes در عنصر img متفاوت است. در این صورت شما در حال ارائه پیشنهادات به مرورگر هستید. عنصر source بیشتر شبیه یک فرمان است تا یک پیشنهاد.

همچنین می توانید از توصیفگر تراکم پیکسلی در داخل ویژگی srcset یک عنصر source استفاده کنید.

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

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

برداشت

اگر فقط نیاز به ارائه نسخه‌های با اندازه‌های متفاوت از یک تصویر دارید، srcset بهترین گزینه شماست. اما اگر تصویری در اندازه‌های کوچک‌تر خوب به نظر نمی‌رسد، می‌توانید به جای آن یک نسخه برش‌خورده از تصویر بسازید.

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

در اینجا نمونه ای از یک تصویر قهرمان است که محتویات و شکل آن را بر اساس عرض دید تغییر می دهد. ویژگی های width و height را به هر عنصر source اضافه کنید.

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>

به یاد داشته باشید که نمی توانید ویژگی alt را بسته به منبع تصویر تغییر دهید. شما باید یک ویژگی alt بنویسید که هم تصویر در اندازه کامل و هم تصویر برش خورده را توصیف کند.

احتمالاً برای اکثر تصاویر واکنش‌گرا نیازی به استفاده از عنصر picture نخواهید داشت - ویژگی‌های srcset و sizes در عنصر img موارد استفاده زیادی را پوشش می‌دهند. اما برای شرایطی که به کنترل دقیق تری نیاز دارید، عنصر picture ابزار قدرتمندی است.

یک نوع تصویر وجود دارد که ممکن است به هیچ کدام از آنها نیاز نداشته باشید: نمادها. بعدش همینه

درک خود را بررسی کنید

دانش خود را از عنصر تصویر آزمایش کنید