آموزش و يادگيري تگ picture در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <picture> آشنا مي‌شويم. اين تگ براي ارائه تصاوير ريسپانسيو و با فرمت‌هاي مختلف به مرورگر استفاده مي‌شود.

تگ picture در HTML چيست؟

تگ <picture> به شما اجازه مي‌دهد چندين منبع تصوير (با فرمت يا اندازه متفاوت) تعريف کنيد و مرورگر بهترين گزينه را با توجه به شرايط نمايش انتخاب کند. اين تگ معمولاً شامل چندين <source> و يک <img> به عنوان fallback است.

مثال ساده از تگ picture

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="مثال تصوير">
</picture>

در اين مثال، مرورگر ابتدا فرمت WebP را بررسي مي‌کند و اگر پشتيباني نکند، فرمت JPEG را نمايش مي‌دهد. اگر هيچ‌کدام پشتيباني نشود، تصوير داخل <img> نشان داده مي‌شود.

ويژگي‌هاي مهم تگ picture و source

ويژگي	توضيح
srcset (source)	آدرس تصوير يا مجموعه‌اي از تصاوير با رزولوشن‌هاي مختلف
type (source)	نوع فرمت تصوير مثل image/webp يا image/jpeg
sizes (source)	ابعاد پيشنهادي تصوير براي نمايشگرهاي مختلف
src (img)	تصوير پيش‌فرض براي مرورگرهايي که تگ picture را پشتيباني نمي‌کنند
alt (img)	متن جايگزين تصوير

مثال ريسپانسيو با media

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="تصوير ريسپانسيو">
</picture>

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