تگ عکس img

تگ img یا تگ عکس HTML برای تعبیه عکس ها در فایل های html و وب به کار می رود.

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

آشنایی با تگ عکس

برای درج تصاویر در فایل های HTML، کوتاه ترین راه، استفاده از تگ img است.

می تونیم بگیم که تنها وظیفه این تگ، وارد کردن عکس ها در صفحات وب هستش.

این تگ، یک تگ خالی است، به این معنی که تگ پایانی ندارد و بسته نمی شود:

خصوصیت src در تگ عکس

این صفت، مهمترین صفت تگ img است.

src، مسیر عکس رو مشخص میکنه.

تگ عکس با استفاده از این صفت، عکس مورد نظرمون رو پیدا و در فایل html درج میکنه.

اگه این صفت رو صحیح ننویسین، تگ img اصلا کار نخواهد کرد.

میتونیم از یه عکس در یک سایت دیگه هم استفاده کنیم:

در مثال بالا یه عکس از سایت w3schools رو فراخوانی کرده ایم.

خصوصیت alt در تگ عکس

این صفت، درواقع یک توضیح مختصر درمورد عکسمونه. اما چرا باید درمورد عکس توضیح داد؟

اگه سرعت اینترنت پایین باشه، یا آدرس عکس رو درست ننوشته باشین شاید تصویر بالا نیاد.

اگه به هر دلیلی عکس در فایل html نشون داده نشه، این توضیح مختصر به کاربر نمایش داده میشه.

ضرورت استفاده از این صفت، بر میگرده به بحث سئو که در ادامه مطلب بهش می پردازیم.

خصوصیت width و height

این صفات ابعاد تصویر در تگ عکس html رو مشخص میکنه.

سعی کنین همیشه عرض و ارتفاع عکس تون رو با این خصوصیت ها تعیین کنین.

اگه ابعاد عکس رو تعریف نکنین ممکنه در طی آپلود، عکس بلرزه که کاربر پسند نیست.

این اعداد بر حسب پیکسل px اعمال خواهند شد.

سایز تصاویر در HTML

برای تعیین ابعاد تصویر، هم میتونیم از خصوصیت های width و height استفاده کنیم و هم از طریق style.

در مثال زیر یک نمونه از استفاده از style برای تعیین ابعاد در تگ عکس html نمایش داده شده:

اگه اطلاعاتتون درمورد استایل دهی کمه، به این مقاله سر بزنین.

اضافه نمودن لینک به عکس

می تونیم یه عکس رو به یک آدرس لینک بدیم. برای این کار، تگ img رو داخل تگ a قرار میدن:

کاربر به محض کلیک روی عکس html به آدرس سایت لینک شده هدایت خواهد شد. جهت اطلاعات بیشتر درمورد تگ a به مقاله زیر مراجعه کنین:

آموزش صفر تا صد تگ a در html

نکات مهم درمورد سئو و ریسپانسیو

در زیر نکاتی مهم در مورد سئوی تگ عکس html آورده شده است که مطالب مهمی در آموزش HTML شمرده میشه:

  • همواره خصوصیت alt رو برای تگ img پر کنید. سعی کنید از توضیح استفاده کنید نه فقط کلمات کلیدی. یک توضیح مناسب و در برگبرنده کلمات کلیدی.
  • برای رعایت ریسپانسیو تصاویر، استایل زیر رو در فایل css بنویسین:

  • از خصوصیت loading برای تصاویرتون استفاده کنین و مقدارش رو برابر lazy قرار بدین:

 

فرمت های پشتیبانی شده توسط وب برای تصاویر

 

مخفففرمت فایلMIME typeFile extension(s)پشتیبانی مرورگر ها
APNGAnimated Portable Network Graphicsimage/apng.apngChrome, Edge, Firefox, Opera, Safari
BMPBitmap fileimage/bmp.bmpChrome, Edge, Firefox, Internet Explorer, Opera, Safari
GIFGraphics Interchange Formatimage/gif.gifChrome, Edge, Firefox, Internet Explorer, Opera, Safari
ICOMicrosoft Iconimage/x-icon.ico, .curChrome, Edge, Firefox, Internet Explorer, Opera, Safari
JPEGJoint Photographic Expert Group imageimage/jpeg.jpg, .jpeg, .jfif, .pjpeg, .pjpChrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNGPortable Network Graphicsimage/png.pngChrome, Edge, Firefox, Internet Explorer, Opera, Safari
SVGScalable Vector Graphicsimage/svg+xml.svgChrome, Edge, Firefox, Internet Explorer, Opera, Safari
TIFFTagged Image File Formatimage/tiff.tif, .tiffNone built-in; add-ons required
WebPWeb Picture formatimage/webp.webpChrome, Edge, Firefox, Opera

جدول بالا از این سایت برداشته شده و برای اطلاعات بیشتر میتونین یه سر بزنین.

 

صفات عمومی

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

Global Attributes در HTML

رویداد های عمومی

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

Event Attributes در HTML

پشتیبانی مرورگر ها از تگ img

تمامی مرورگر ها از تگ عکس HTML پشتیبانی کامل می کنند.

نام مرورگرپشتیبانی مرورگر کامل گوگل کروم از تگ عکس HTML که به تگ img نیز معروف است.پشتیبانی کامل مرورگر موزیلا فایرفاکس از تگ عکس HTML که به تگ img نیز معروف است.پشتیبانی کامل مرورگر سافاری از تگ عکس HTML که به تگ img نیز معروف است.پشتیبانی کامل مرورگر اپرا از تگ عکس HTML که به تگ img نیز معروف است.پشتیبانی کامل مرورگر اینترنت اکسپلورر از تگ عکس HTML که به تگ img نیز معروف است.
پشتیبانی می کند؟بلهبلهبلهبلهبله

 

جهت دانلود فایل ویدیویی به این لینک مراجعه بفرمایین.

 

مطالب زیر را حتما بخوانید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.