در حال بارگذاری...

عنصر picture در HTML

یک img تنها برای بسیاری صفحات کافی است. وقتی به فایل‌های متفاوت برای صفحه‌نمایش یا فرمت‌های مختلف نیاز دارید — برش عریض روی دسکتاپ، برش تنگ‌تر روی گوشی، یا فرمت مدرن با پشتیبان JPEG — عنصر picture نامزدها را پیشنهاد می‌دهد. مرورگر یکی را انتخاب می‌کند؛ img پشتیبان شما کلاینت‌های قدیمی‌تر و دسترس‌پذیری را پوشش می‌دهد.

picture چه چیزی اضافه می‌کند؟

picture یک ظرف است. داخلش صفر یا چند source و دقیقاً یک img پشتیبان می‌گذارید. هر source می‌تواند بگوید کی اعمال شود (media) یا چه فرمتی است (type)، و فایل کجاست (srcset). img تزئین اختیاری نیست: پشتیبان اجباری و محل alt است.

پاسخ مستقیم

یک یا چند <source> و یک <img> پشتیبان را داخل <picture> بپیچید. برای شرایط viewport از media و برای فرمت‌هایی مثل WebP از type استفاده کنید. img همچنان به src و alt نیاز دارد. مبتدی می‌تواند قبل از جمع کردن هر فرمت مدرن، با دو عرض از همان عکس شروع کند.

هنرِ جهت با media

هنرِ جهت یعنی برش یا چیدمان متفاوت برای viewportهای متفاوت — نه فقط «همان عکس کوچک‌تر.» media روی source اجازه می‌دهد چیدمان عریض و باریک به فایل‌های مختلف اشاره کنند.

picture با media و img پشتیبان

html

HTML Code

<picture>
<source media="(min-width: 800px)" srcset="images/wide.jpg">
<source media="(min-width: 400px)" srcset="images/medium.jpg">
<img src="images/small.jpg" alt="Mountain trail at sunrise">
</picture>

خواندن نمونهٔ media

در الگوهای رایج آموزش، sourceها از شرایط خاص‌تر به سمت عمومی‌تر فهرست می‌شوند؛ مرورگر همچنان ارزیابی می‌کند و مطابقت را برمی‌گزیند
srcset روی source به URL فایل نامزد اشاره می‌کند
img نهایی وقتی هیچ sourceای نخورد یا پشتیبانی picture کامل نباشد src و alt می‌دهد
در تمرین پنجره را تغییر اندازه دهید تا ببینید کدام فایل مناسب است — اگر بخواهید درخواست را تأیید کنید از Network در DevTools استفاده کنید

انتخاب فرمت با type

گاهی همان ترکیب به‌صورت WebP برای مرورگرهای پشتیبان و JPEG برای بقیه فرستاده می‌شود. type نوع MIME را می‌گوید تا مرورگر بتواند فرمت پشتیبانی‌نشده را بدون دانلود اول رد کند.

picture با type و img پشتیبان

html

HTML Code

<picture>
<source type="image/webp" srcset="images/hero.webp">
<img src="images/hero.jpg" alt="Product hero on a clean desk">
</picture>

دامنهٔ روز اول را کوچک نگه دارید

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

alt روی img می‌ماند

متن دسترس‌پذیری را فقط روی source نگذارید. خواننده‌های صفحه و رندر پشتیبان به img تکیه می‌کنند. قواعد تزئینی جلسهٔ Images هنوز اعمال می‌شود: تصاویر اطلاع‌رسان alt واقعی می‌خواهند؛ تزئین خالص می‌تواند alt="" باشد.

picture در برابر یک img

وقتی یک فایل کافی است از img ساده استفاده کنید. وقتی واقعاً به فایل‌های متفاوت برای شرایط نیاز دارید — هنرِ جهت viewport یا تعویض فرمت — سراغ picture بروید. نشانه‌گذاری اضافه بدون نیاز واقعی فقط نگهداری را سخت می‌کند.

عادت ترتیب و پشتیبان

sourceها را قبل از img فهرست کنید. همیشه img را بگنجانید. اگر پشتیبان را فراموش کنید بعضی مرورگرها و بسیاری اعتبارسنج‌های آموزشی الگو را ناقص می‌دانند. با پنجرهٔ باریک و عریض، و با مرورگری که ممکن است فرمت مدرن شما را ترجیح ندهد، تست کنید.

تمرین در ویرایشگر

دو عرض از همان عکس (یا دو فایل تمرین واضح) آماده کنید.
یک picture با دو source دارای media و یک img پشتیبان بسازید.
پنجرهٔ مرورگر را تغییر اندازه دهید و ببینید کدام فایل مناسب است.
تأیید کنید alt روی img مانده، نه فقط در توضیح.
اختیاری: یک source با WebP و type="image/webp" بالای img از نوع JPEG بگذارید و تأیید کنید همه‌جا تصویری نشان داده می‌شود.

اشتباهات رایج

فراموش img پشتیبان
گذاشتن alt فقط روی source به‌جای img
پیچیده کردن با فرمت‌های زیاد قبل از کار کردن الگوی پایهٔ media
استفاده از picture وقتی یک img بهینه‌شده کافی بود
برش‌های ناسازگار که هنگام عبور viewport از breakpoint کاربر را غافلگیر می‌کند
قاطی کردن srcset روی source با href لینک

خلاصه

picture چند نامزد تصویر می‌دهد؛ مرورگر یکی را برمی‌گزیند
از source به‌علاوهٔ img پشتیبان اجباری استفاده کنید
media انتخاب viewport را راهنمایی می‌کند؛ type انتخاب فرمت را
alt روی img می‌ماند
ساده شروع کنید: دو عرض یا یک فرمت مدرن به‌علاوهٔ پشتیبان JPEG

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان