جلسه نهم: آموزش تگ img | کار با تصاویر در HTML

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

🧩 تگ img چیه و چرا مهمه؟

تگ <img> (مخفف Image) پادشاه تصاویر تو HTMLـه! با این تگ می‌تونی عکس، لوگو، بنر، یا هر چیزی که چشم کاربراتو می‌گیره رو تو صفحه‌ات بذاری. این تگ نه تنها سایتت رو قشنگ می‌کنه، بلکه برای سئو هم حیاتیه چون گوگل عاشق تصاویریه که درست استفاده بشن. تازه، اطلاعات رو سریع‌تر از متن منتقل می‌کنه و کاربراتو میخکوب می‌کنه آماده باش که با <img> غوغا راه بندازی!

🧩 ساختار تگ img : ساده اما خفن

تگ <img> یه تگ تنهاست یعنی برعکس <p>، تگ پایان یا بسته نداره (self-closing). فقط کافیه بگی عکس از کجا بیاد و یه توضیح براش بذاری:

<img src="مسیر تصویر/image.jpg" alt="توضیح تصویر">

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

✏️ اتریبیوت src: عکس از کجا بیاد؟

src (مخفف Source) قلب تگ <img>ـه می‌گه عکس از کجا بیاد. می‌تونی آدرس محلی یا URL بذاری:

• مسیر نسبی: وقتی تصویر در همان دایرکتوری یا پوشه‌های مربوط به فایل HTML قرار دارد.

<img src="images/picture.jpg" alt="توضیح عکس">

• مسیر مطلق (URL): وقتی تصویر از یک منبع آنلاین (اینترنت) لود می‌شود.

<img src="https://example.com/images/picture.jpg" alt="An online image">

اگه src نباشه یا اشتباه باشه، هیچی نمی‌بینی پس اینو درست انجام بده!

✏️ اتریبیوت alt: توضیح عکس چیه؟

alt (مخفف Alternative Text) توضیحی برای عکسته اگه عکس لود نشه یا کاربر با صفحه‌خوان بیاد، این متن رو می‌بینه:

<img src="flower.jpg" alt="یه گل قرمز خوشگل">

نکته خفن: alt هم برای سئو حیاتیه (گوگل عکسو نمی‌بینه، ولی متنو می‌خونه)، هم برای نابیناها که از صفحه‌خوان استفاده می‌کنن هیچ وقت خالیش نذار!

✏️ اتریبیوت width و height: اندازه رو بترکون!

با width (عرض) و height (ارتفاع) اندازه عکس رو تنظیم می‌کنی واحدش پیکسله:

<img src="car.jpg" alt="ماشین قرمز" width="300" height="200">

نتیجه؟ یه ماشین 300×200 پیکسل نه بزرگ‌تر، نه کوچیک‌تر! اگه فقط یکی رو بذاری (مثلاً width=”300″)، مرورگر تناسب رو نگه می‌داره. حرفه‌ای‌ها اینو می‌ذارن که صفحه پرش نکنه و سریع‌تر لود بشه.

✏️ اتریبیوت loading: لودینگ رو حرفه‌ای کن

loading یه اتریبیوت خفن تو HTML5ـه که می‌گه عکس چطور لود بشه:

• eager (پیش‌فرض): سریع لود می‌شه.
• lazy: فقط وقتی تو دید کاربر بیاد لود می‌شه برای سرعت غوغا می‌کنه!

<img src="bigpic.jpg" alt="یه منظره بزرگ" loading="lazy">

مزایاش؟ سرعت اولیه سایتت می‌ره بالا، پهنای باند کاربر کمتر مصرف می‌شه، و سئو بهتر می‌شه برای عکسای پایین صفحه بترکونش!

✏️ اتریبیوت decoding: لود چطور رمزگشایی بشه؟

decoding یه اتریبیوت باحاله که به مرورگر می‌گه چطور عکس رو رمزگشایی (decode) کنه یعنی چطور از حالت کد (مثلاً .jpg) به تصویر قابل دیدن تبدیلش کنه. این برای سرعت و تجربه کاربری غوغا می‌کنه! چرا مهمه:

عکسا تو مرورگر سه مرحله دارن: دانلود، رمزگشایی، و نمایش. اگه رمزگشایی کند باشه یا بد تایمینگ بشه، صفحه‌ات لگ می‌زنه یا کاربرا یه لحظه جای خالی عکسو می‌بینن. با decoding می‌تونی اینو بترکونی و بگی هی مرورگر، اینو چطور باز کن!

✨ مقادیرش چیه؟

• sync (همزمان): مرورگر عکسو همون لحظه که داره لود می‌شه رمزگشایی می‌کنه سریع نشون داده می‌شه، ولی ممکنه بقیه کارای صفحه رو کند کنه.
• async (ناهمزمان): رمزگشایی رو می‌ذاره برای بعد اول بقیه صفحه لود می‌شه، بعد عکس باز می‌شه. برای سرعت صفحه عالیه!
• auto (پیش‌فرض): مرورگر خودش تصمیم می‌گیره چی بهتره معمولاً باهوشه، ولی تو می‌تونی بترکونیش!

مثال:

<img src="big-pic.jpg" alt="یه منظره بزرگ" decoding="async">

اینجا مرورگر می‌گه “اول صفحه رو لود کن، بعد این عکس گنده رو باز کن” کاربرا سریع‌تر محتوا رو می‌بینن!

✨ بهترین حالت استفاده

• عکسای بزرگ: با async بذار که صفحه لگ نزنه.
• عکسای کوچیک بالای صفحه: با sync بترکون که سریع دیده بشن (مثل لوگو).
• وقتی نمی‌دونی: auto رو ولش کن به حال خودش مرورگر می‌دونه چی کار کنه!

نکته خفن:
decoding با "loading="lazy ترکیب بشه، سرعت سایتت موشک می‌شه تصاویر بزرگ پایین صفحه رو async و lazy کن، غوغا می‌کنه!

✏️ اتریبیوت title : یه توضیح اضافه

title یه متن tooltip می‌ذاره موس که بره رو عکس، نشون داده می‌شه:

<img src="bird.jpg" alt="پرنده تو آسمون" title="این یه پرنده خوشگله!">

برای کاربرا باحاله، ولی برای سئو مثل alt مهم نیست یه آپشن خفنه!

✏️ اتریبیوت crossorigin: برای عکسای خارجی

crossorigin (مخفف Cross-Origin) یه اتریبیوت خفنه که وقتی از یه عکس خارجی (یعنی از یه دامنه دیگه غیر از سایت خودت) استفاده می‌کنی، به کار میاد. این اتریبیوت به مرورگر می‌گه چطور با سرور اون عکس ارتباط برقرار کنهمثلاً بگه “من کی‌ام” یا “بی‌نام و نشونم”!

✨ مقادیرش چیه؟

• anonymous: بدون فرستادن اطلاعات هویتی (مثل کوکی یا لاگین) عکسو می‌گیره مثل یه ناشناس خفن!
• use-credentials: اطلاعات هویتی (مثل کوکی) رو می‌فرسته برای وقتی که سرور خارجی نیاز به شناسایی تو داره.
• بدون مقدار: اگه نذاری، مثل حالت عادی عمل می‌کنه و CORS خاموشه ولی ممکنه بعضی سرورا عکسو ندن!

مثال:

<img src="https://example.com/cool-pic.jpg" alt="یه عکس باحال" crossorigin="anonymous">

اینجا مرورگر می‌ره عکسو از دامنه دیگه می‌گیره، بدون اینکه بگه تو کی هستی ساده و سریع!

✏️ اتریبیوت srcset و sizes:

می‌خوای عکسات تو موبایل و دسکتاپ قشنگ باشن؟ srcset و sizes رو بترکون:

• ✨ srcset: چندتا نسخه از عکس با اندازه‌های مختلف می‌ذاری.
• ✨ sizes: می‌گی هر نسخه کی استفاده بشه.

<img src="pic-300.jpg" srcset="pic-300.jpg 300w,
 pic-600.jpg 600w,
 pic-1000.jpg 1000w"
 sizes="(max-width: 600px) 100vw,
 (max-width: 1200px) 50vw, 33vw"
 alt="یه عکس خفن">

• اگه صفحه زیر 600 پیکسل باشه (موبایل)، 100% عرض صفحه رو می‌گیره (100vw).
• اگه بین 600 تا 1200 باشه (تبلت)، 50% عرض (50vw).
• بالای 1200 (دسکتاپ)، 33% عرض (33vw).

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

🧩 فرمت‌های تصاویر: کدومو بترکونی؟

عکساتو با فرمت درست انتخاب کن تا سایتت غوغا کنه:

• JPEG: برای عکسای پیچیده و پرجزئیات مثل طبیعت یا پرتره.
• PNG: برای لوگو و گرافیک ساده با شفافیت کیفیتش بالاست.
• GIF: برای انیمیشنای کوتاه مثل یه گربه که چشمک می‌زنه!
• SVG: برای آیکون و لوگوی برداری هر چقدر زوم کنی، خراب نمی‌شه.
• WebP: جدید و خفن حجم کم، کیفیت بالا، برای سرعت سایت موشکه!

نکته: همیشه عکساتو فشرده کن (مثلاً با WebP) که کاربرات فرار نکنن!

🧩 لینک‌دهی به تصاویر: عکساتو کلیک‌پذیر کن

می‌خوای کاربرا با کلیک رو عکس برن یه جای دیگه؟ <img> رو تو <a> بذار:

<a href="http://last.test/"> <img src="logo.jpg" alt="لوگوی آوای وب"> </a>

نتیجه؟ لوگو کلیک‌پذیر می‌شه و می‌ره سایت برای بنر و لوگو غوغا می‌کنه!

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

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

• alt رو پر کن: مثل «گربه بامزه تو خونه» کلمات کلیدی بذار.
• اسم فایل توصیفی: به جای pic1.jpg بذار cute-cat.jpg گوگل می‌فهمه!
• حجم کم: عکساتو با ابزارایی مثل TinyPNG یا فتوشاپ فشرده کن سرعت می‌ره بالا.
• lazy loading: با "loading="lazy سایتت رو موشک کن!

🧩 اشتباهات رایج: خرابکاری نکن!

تازه‌کارا گاهی خرابکاری می‌کنن اینا رو یاد بگیر:

• بدون alt: گوگل و صفحه‌خوان‌ها گم می‌شن همیشه بذار!
• حجم زیاد: عکس 5 مگابایتی نذار کاربرا فرار می‌کنن!
• width و height نذاشتن: صفحه پرش می‌کنه لودینگ رو خراب می‌کنه.
• src اشتباه: آدرس رو چک کن عکس خراب اسمش با خودشه!

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

تگ <img> ابزار اصلی برای نمایش تصاویر در HTML است. با استفاده از ویژگی‌هایی مثل src، alt، width، loading و decoding می‌تونیم تصاویر رو به‌درستی نمایش بدیم، سرعت سایت رو بالا ببریم و سئوی تصاویر رو تقویت کنیم.

یاد گرفتیم چطور با srcset و sizes تصاویر ریسپانسیو بسازیم و با انتخاب فرمت‌های بهینه مثل WebP یا SVG، هم کیفیت حفظ بشه هم حجم کم بمونه.

در نهایت، اگه می‌خوای سایتت هم زیبا باشه، هم سریع، و هم توی گوگل خوب دیده بشه، باید تگ <img> رو درست، بهینه و حرفه‌ای استفاده کنی.ما تا آخر خط باهاتیم! در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

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

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

شهرام نجفی

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