جلسه دهم: آموزش کامل تگ picture در HTML

به دوره حرفه‌ای آموزش HTML در آوای وب خوش اومدی! اینجا قراره تگ <picture> رو مثل یه حرفه‌ای بترکونی و عکساتو تو هر دستگاه، موبایل، تبلت، دسکتاپ بهینه کنی! می‌خوای سایتت تو هر صفحه‌نمایشی قشنگ باشه و تو سرچ گوگل اول بیای؟ با این آموزش، تصاویرت رو responsive می‌کنی و دانش طراحی سایتت رو یه پله دیگه بالاتر می‌بری. آماده‌ای؟ بزن بریم!

🏷️ تگ picture چیه و چرا باید استفادش کنی؟

تگ <picture> یه ابزار خفن تو HTML5ـه که بهت اجازه می‌ده تصاویرت رو برای هر دستگاه بهینه کنی مثلاً موبایل، تبلت، یا دسکتاپ! با این تگ می‌تونی بگی “هی مرورگر، اگه صفحه کوچیکه این عکسو نشون بده، اگه بزرگه اون یکی!” اینجوری سایتت هم سریع‌تر لود می‌شه، هم تو هر دستگاهی قشنگه، و هم گوگل دیوونش می‌شه چون سرعت و تجربه کاربری رتبه رو می‌بره بالا! آماده باش که با <picture> وب رو فتح کنی!

🧱 ساختار تگ picture : ساده اما پرکاربرد

تگ <picture> با <source> و <img> کار می‌کنه یه تیم خفن برای تصاویر responsive! ساختار ساده‌ش اینجوریه: اگه صفحه زیر 600 پیکسل باشه (مثل موبایل)، عکس کوچیک لود می‌شه. اگه بزرگ‌تر باشه، عکس بزرگ میاد به همین راحتی! <img> همیشه آخر میاد و یه نسخه پیش‌فرضه اگه هیچ <source> کار نکنه، اینو نشون می‌ده.

<picture>
  <source srcset="image1.webp" type="image/webp" media="(min-width: 650px)">
  <source srcset="image2.jpg" type="image/jpeg" media="(min-width: 465px)">
  <img src="image-default.jpg" alt="Default Image">
</picture>

💡 کاربردای خفن: تصاویرت رو تو هر دستگاه بهینه کن

تگ <picture> فقط برای عوض کردن اندازه عکس نیست می‌تونی با فرمت و رزولوشن هم غوغا کنی! چندتا کاربرد خفن:

• ✨ اندازه مختلف: موبایل عکس کوچیک، دسکتاپ عکس بزرگ مثل مثال بالا.
• ✨ فرمت مختلف: مثلاً WebP برای مرورگرای جدید، JPEG برای قدیمی‌ها.
• ✨ رزولوشن مختلف: برای صفحه‌های Retina یا معمولی.

نتیجه؟ تو هر دستگاهی بهترین عکس لود می‌شه کاربرا کیف می‌کنن، گوگل عاشق سرعتت می‌شه!

🏷️ تگ source

تگ <source> تنهایی کاری نمی‌کنه مثل یه دستیار باحال کنار <picture> میاد و می‌گه “اگه فلان شرط برقراره، این عکسو لود کن!” تو <picture> چندتا <source> می‌ذاری و آخرش یه <img> مرورگر از بالا به پایین می‌خونه و اولین <source> که شرطش جور باشه رو انتخاب می‌کنه. اگه هیچی جور نشد، <img> پیش‌فرض رو نشون می‌ده. ساده‌ست، ولی وقتی بترکونیش، سایتت تو هر دستگاهی پادشاه می‌شه!

💡 یه نکته خفن

<source> فقط برای <picture> نیست بعداً تو <video> و <audio> هم میاد و فایلای مختلف (مثلاً MP4 یا MP3) رو مدیریت می‌کنه. پس این تگ یه جادوگر همه‌کاره‌ست که تو جیبته آماده باش که باهاش پادشاهی کنی!

🌟 اتریبیوت‌های تگ source : ابزارای جادویت

• media: شرط دستگاه مثلاً برای موبایل.
• srcset: آدرس عکس مثلاً یه عکس ساده یا چندتا با رزولوشن.
• type: فرمت عکس مثل WebP یا JPEG.

📝 پروژه عملی: گالری responsive بساز

بیا یه گالری خفن با <picture> بترکونیم: یه لیست با سه تا عکس گربه، سگ، و پرنده. هر کدوم دو نسخه دارن: کوچیک برای موبایل، بزرگ برای دسکتاپ. ذخیره کن و تو موبایل و دسکتاپ تست کن عکسا تو هر دستگاهی عوض می‌شن و غوغا می‌کنن!

💡 تفاوت تگ img با picture : کدوم بهتره؟

تگ <picture> با <img> فرق داره ولی کدومو استفاده کنیم؟ <img> یه تگ ساده و خفنه که فقط یه عکس نشون می‌ده با srcset و sizes می‌تونی responsive باشه، مثلاً دو تا نسخه 600 پیکسل WebP و 800 پیکسل JPG بذاری و مرورگر خودش انتخاب کنه. کار می‌کنه؟ آره تو موبایل کوچیک می‌شه، تو دسکتاپ بزرگ ولی فقط اندازه عوض می‌شه!

تگ <picture> یه تیم قدرتمنده با <source> می‌تونی بگی تو موبایل WebP 600 پیکسل نشون بده، تو دسکتاپ JPG 800 پیکسل، و حتی فرمت یا سبک عکس رو عوض کنی! می‌تونی <img> رو مثل <picture> استفاده کنی؟ تا یه جاهایی آره با srcset responsive می‌شه، ولی نمی‌تونی فرمت رو کنترل کنی یا بگی تو موبایل یه عکس دیگه بیاد.

<picture> انعطاف و قدرت بیشتری داره اگه می‌خوای تو هر دستگاهی عالی کار کنی، اینو استفاده کن! <img> برای کارای ساده کافیه، ولی برای پروژه‌های خفن، <picture> پادشاهه!

🌟 سئو با تگ picture : گوگل رو عاشق کن!

<picture> فقط قشنگی نیست سئو رو هم بترکونه! چندتا نکته خفن:

• alt تو <img>: کلمات کلیدی بذار مثل «گربه بامزه تو خونه» .
• اسم فایل: «cat-small.jpg» نه «pic1.jpg» گوگل می‌فهمه!
• حجم کم: عکساتو فشرده کن سرعت می‌ره بالا.
• responsive: گوگل سایتای mobile-friendly رو پادشاه می‌کنه رتبه‌ات قله رو می‌گیره!

💡 اشتباهات رایج: گند نزن!

• حجم زیاد: عکسای گنده نذار کاربرا فرار می‌کنن!
• media اشتباه: شرطاتو چک کن درست باشه.

💡 نکات حرفه‌ای: مثل خفنا کار کن

• WebP رو بترکون: فرمت کم‌حجم و خفن مرورگرای جدید عاشقشن!
• CSS کمکی: عکسات همیشه قشنگ بمونن!
• lazy loading: سرعت رو موشک کن!
• دسترسی‌پذیری: alt رو معنادار بنویس مثل «سگ تو پارک» نه «عکس».

🏁 جمع‌بندی: تصاویرت رو بترکون!

حالا تگ <picture> رو مثل یه حرفه‌ای بلدی! برو گالری responsive بساز و تو هر دستگاهی غوغا کن ما تا آخر خط باهاتیم که یه طراح حرفه‌ای با رتبه اول گوگل باشی! کدت رو نوشتی؟ حالا ببر تو W3C Validator و مطمئن شو غوغا کردی! یه کد ساده با <picture> رو تست کن اگه سبز شد، ترکوندی! قرمز شد؟ اشتباهات رو چک کن و اصلاحش کن!

💬 ایده‌هات رو فریاد بزن

نظرت راجب تگ <picture> چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ چیزی هست که نفهمیدی؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو، تیم خفن پشتیبانی با جون و دل جوابت رو می‌ده!

شهرام نجفی

همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.