تگ عکس Img

تگ img در HTML یکی از پرکاربردترین تگ ها برای افزودن تصویر به صفحه وب است. با کمک آن می توانید عکس، تصویر آموزشی، نمودار یا محتوای گرافیکی را در صفحه نمایش دهید. یادگیری ویژگی های این تگ برای ساخت صفحه های خوانا و دسترس پذیر اهمیت دارد و به بهبود تجربه کاربران و سئوی تصاویر نیز کمک می کند. اگر در حال یادگیری HTML یا طراحی سایت هستید، آشنایی درست با نحوه استفاده از تصویر نقطه شروع مفیدی است.

با استفاده از تگ img می توانید تصویر دلخواه را در یک صفحه HTML قرار دهید و ظاهر و اندازه آن را متناسب با محتوای صفحه تنظیم کنید. این تگ به تنهایی تصویر را ایجاد نمی کند؛ مرورگر با خواندن نشانی فایل، تصویر را دریافت و در محل قرارگیری تگ نمایش می دهد. بنابراین، معتبر بودن آدرس فایل و دسترسی مرورگر به آن از اولین مواردی است که باید بررسی کنید.

تگ img از تگ های تهی HTML است؛ یعنی برای استفاده از آن به تگ پایانی جداگانه نیاز ندارید. ویژگی ها در تگ آغازین نوشته می شوند و هر ویژگی می تواند اطلاعاتی مانند نشانی عکس یا متن جایگزین را مشخص کند. نمونه زیر شکل کلی استفاده از این تگ را نشان می دهد. در HTML امروزی نوشتن علامت / پیش از > الزامی نیست، اما ممکن است در نمونه های قدیمی تر آن را ببینید.

هر ویژگی در تگ تصویر کاربرد مشخصی دارد. ویژگی src محل فایل را معرفی می کند، alt توضیح متنی تصویر را در اختیار کاربر و فناوری های کمکی می گذارد و width و height ابعاد نمایشی را مشخص می کنند. ویژگی usemap برای پیوند دادن تصویر به نقشه تصویری به کار می رود. جدول زیر خلاصه ای از این ویژگی ها و کاربرد معمول هر کدام را ارائه می دهد.

ویژگی src اصلی ترین ویژگی تگ تگ <img> است و مسیر تصویر را در خود نگه می دارد. مقدار این ویژگی می تواند یک نشانی کامل اینترنتی یا مسیری نسبی به فایل در پوشه های پروژه باشد. تصویر باید در مسیری قرار داشته باشد که مرورگر بتواند به آن دسترسی پیدا کند؛ در غیر این صورت، مرورگر قادر به دریافت و نمایش فایل نخواهد بود.

پیش از استفاده از تصویر، مطمئن شوید فایل در فضای وب بارگذاری شده یا در محل درست پروژه قرار گرفته است. همچنین به بزرگی و کوچکی حروف در نام فایل توجه کنید؛ در بسیاری از سرورها نام های Image.jpg و image.jpg یکسان نیستند. برای جلوگیری از خطا، از مسیر دقیق فایل استفاده کنید و پس از انتشار صفحه نیز نشانی تصویر را در مرورگر آزمایش کنید.

در نمونه زیر، ویژگی src به یک فایل تصویری اشاره می کند. اگر تصویر در پوشه مناسب قرار گرفته باشد و نام فایل درست نوشته شود، مرورگر آن را در صفحه نشان می دهد. هنگام انتقال صفحه به سرور یا تغییر ساختار پوشه ها، نشانی تصویر را دوباره بررسی کنید؛ تغییر مسیر فایل بدون به روزرسانی src می تواند باعث نمایش تصویر شکسته شود.

خصوصیت Alt یا متن جایگزین، توضیحی نوشتاری درباره محتوای تصویر است. این متن در شرایطی که فایل بارگذاری نشود می تواند به جای تصویر در صفحه دیده شود و به افرادی که از صفحه خوان استفاده می کنند کمک می کند مفهوم تصویر را درک کنند. نوشتن متن جایگزین دقیق، یکی از روش های ساده برای افزایش دسترس پذیری صفحات وب است.

موتورهای جستجو از متن جایگزین و اطلاعات پیرامون تصویر برای شناخت بهتر موضوع آن کمک می گیرند. به همین دلیل، alt می تواند به فهم محتوای تصاویر و ارتباط آنها با موضوع صفحه کمک کند؛ با این حال، نباید آن را محلی برای تکرار بی دلیل کلمات کلیدی دانست. متن مناسب کوتاه، روشن و مرتبط است و آنچه واقعا در تصویر دیده می شود را توصیف می کند.

توضیح را با توجه به نقش تصویر بنویسید. اگر تصویر یک نمودار فروش است، می توانید موضوع نمودار و اطلاعات مهم آن را بیان کنید؛ اگر تصویر صرفا تزئینی است و اطلاعاتی به محتوا اضافه نمی کند، در بسیاری از موارد alt خالی انتخاب مناسبی است تا صفحه خوان از خواندن توضیح غیرضروری صرف نظر کند. از عبارت های مبهمی مانند «عکس» یا «تصویر» به تنهایی استفاده نکنید و متن را متناسب با زمینه صفحه بنویسید.

ویژگی alt را با عنوان یا tooltip تصویر اشتباه نگیرید. متن alt نقش جایگزین و توصیفی دارد و برای دسترس پذیری و درک محتوای عکس مهم است؛ ویژگی title در صورت پشتیبانی مرورگر ممکن است هنگام قرار گرفتن نشانگر روی تصویر نمایش داده شود. افزودن title جای نوشتن alt را نمی گیرد و نباید اطلاعات ضروری تصویر را فقط در title قرار دهید.

ویژگی های width و height برای تعیین عرض و ارتفاع تصویر استفاده می شوند. اگر فقط یکی از این مقدارها را تغییر دهید، حفظ نسبت ابعاد تصویر اهمیت دارد تا عکس کشیده یا فشرده نشود. در طراحی واکنش گرا می توان اندازه تصویر را با CSS نیز کنترل کرد تا در نمایشگرهای کوچک از محدوده صفحه بیرون نزند و در اندازه های مختلف به شکل مناسبی دیده شود.

تعیین ابعاد تصویر می تواند به مرورگر کمک کند فضای لازم برای آن را از پیش در صفحه در نظر بگیرد و هنگام بارگذاری، جابه جایی ناخواسته بخش های صفحه کمتر شود. مقدارهای width و height را متناسب با ابعاد واقعی یا نسبت تصویر انتخاب کنید. اندازه نمایشی مناسب را با حجم فایل اشتباه نگیرید؛ کاهش ابعاد در HTML به تنهایی حجم فایل اصلی را کم نمی کند، پس بهینه سازی فایل تصویر نیز اهمیت دارد.

در پروژه های امروزی، برای کنترل ظاهر و حاشیه تصویر معمولا از CSS استفاده می شود. برای مثال می توانید عرض تصویر را حداکثر برابر با فضای در دسترس قرار دهید تا در موبایل از صفحه بیرون نزند. همچنین استفاده از ویژگی های CSS باعث می شود شیوه نمایش تصاویر در بخش های مختلف سایت قابل مدیریت تر باشد. این روش به ویژه در طراحی سایت واکنش گرا و صفحه هایی با اندازه های متفاوت نمایشگر کاربرد دارد.

در کدهای قدیمی ممکن است ویژگی border را برای تعیین ضخامت حاشیه تصویر ببینید. این شیوه در HTML مدرن توصیه نمی شود و بهتر است ظاهر حاشیه با CSS تعریف شود؛ به این ترتیب رنگ، ضخامت، گوشه ها و حالت های مختلف آن را بهتر کنترل می کنید. اگر در حال نگهداری یک صفحه قدیمی هستید، شناخت border کمک می کند کد را بخوانید، اما برای کدنویسی تازه سراغ CSS بروید.

ویژگی usemap برای متصل کردن تصویر به نقشه تصویری به کار می رود. با استفاده از تگ های map و area می توانید قسمت های مشخصی از یک تصویر را به ناحیه های قابل انتخاب تبدیل کنید؛ برای نمونه، در یک نقشه جغرافیایی هر استان یا کشور می تواند پیوند جداگانه داشته باشد. مقدار usemap باید با نام نقشه تعریف شده هماهنگ باشد تا ارتباط میان تصویر و محدوده های آن برقرار شود.

در نمونه زیر، مقدار ویژگی usemap به نقشه ای با نام regions اشاره می کند. سپس یک ناحیه دایره ای در تصویر به پیوند مشخصی متصل شده است. مقدارهای مختصات باید با اندازه و موقعیت واقعی ناحیه در تصویر هماهنگ باشند. این قابلیت برای تصویرهای تعاملی کاربرد دارد، هرچند در بسیاری از پروژه ها استفاده از لینک های جداگانه یا اجزای تعاملی مدرن می تواند برای کاربران موبایل و فناوری های کمکی مناسب تر باشد.

آدرس تصویر را بررسی کنید: مسیر فایل باید درست و قابل دسترسی باشد. اگر تصویر نمایش داده نشد، ابتدا src، نام فایل، پسوند و محل بارگذاری آن را کنترل کنید.

برای تصویر معنادار alt بنویسید: متن جایگزین باید مفهوم یا کارکرد عکس را روشن کند. توضیح مرتبط هم به کاربران و هم به موتورهای جستجو کمک می کند محتوای تصویر را بهتر بفهمند.

ابعاد متناسب تعیین کنید: مقدارهای width و height را طوری انتخاب کنید که نسبت تصویر حفظ شود. برای نمایش در صفحه های کوچک، رفتار واکنش گرا را هم در نظر بگیرید.

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

پس از انتشار آزمایش کنید: تصویر را در مرورگرهای مختلف و روی موبایل بررسی کنید. مطمئن شوید مسیر فایل درست است، متن جایگزین مناسب دارد و عکس در اندازه های گوناگون به خوبی نمایش داده می شود.

یکی از خطاهای رایج، خالی گذاشتن alt برای تصویری است که اطلاعات مهمی دارد. استفاده از مسیر اشتباه، وارد کردن اندازه های ناسازگار و نوشتن توضیح های نامرتبط یا پر از کلیدواژه نیز می تواند کیفیت صفحه را کاهش دهد. همچنین اتکا به ویژگی قدیمی border برای ساخت ظاهر نهایی مناسب نیست. با بررسی کد و آزمایش صفحه می توانید بیشتر این مشکلات را پیش از انتشار برطرف کنید.

اگر تصویر در صفحه دیده نمی شود، نشانی نوشته شده در src را در یک زبانه تازه مرورگر باز کنید. سپس نام فایل و پسوند آن را با فایل اصلی تطبیق دهید و بررسی کنید که فایل روی سرور بارگذاری شده باشد. در مرحله بعد، مسیرهای نسبی را با توجه به محل فایل HTML بسنجید و خطاهای بارگذاری را در ابزار توسعه مرورگر ببینید. این مراحل معمولا علت مشکل را مشخص می کنند.

تگ img برای نمایش تصویر در صفحه HTML استفاده می شود و ویژگی src مسیر فایل را مشخص می کند. برای دسترس پذیری و شناخت بهتر تصویر، متن alt را متناسب با محتوای عکس بنویسید؛ برای اندازه نیز از width و height یا CSS بهره بگیرید. ویژگی usemap امکان ساخت نواحی تعاملی روی تصویر را فراهم می کند و حاشیه ها بهتر است با CSS تنظیم شوند. استفاده درست از تگ img به ساخت صفحه ای کاربردی تر، قابل دسترس تر و مناسب تر برای سئو کمک می کند.