عنصر تصویر

ماژول قبلی نشان داد که چگونه ویژگی 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">
</picture>

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

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

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

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

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

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

علاوه بر تغییر فرمت تصاویر، می‌توانید اندازه تصاویر را نیز تغییر دهید. از ویژگی media برای تعیین عرض تصویر در مرورگر استفاده کنید. یک کوئری رسانه‌ای (media query) درون ویژگی 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">
</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"
    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" fetchpriority="high">
</picture>

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

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

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

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

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