تگ عکس img

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

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

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

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

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

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

                             <!-- تگ img -->
    
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

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

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

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

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

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

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

                                   <!-- تگ img -->

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

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

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

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

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

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

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

خصوصیت width و height

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

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

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

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

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

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

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

                           <!-- تگ img -->

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

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

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

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

                               <!-- تگ img -->

<a href="https://www.w3schools.com">
    <img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>

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

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

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

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

  • همواره خصوصیت alt رو برای تگ img پر کنید. سعی کنید از توضیح استفاده کنید نه فقط کلمات کلیدی. یک توضیح مناسب و در برگبرنده کلمات کلیدی.
  • برای رعایت ریسپانسیو تصاویر، استایل زیر رو در فایل css بنویسین:
    img{
        max-width: 100%;
    }
  • از خصوصیت loading برای تصاویرتون استفاده کنین و مقدارش رو برابر lazy قرار بدین:
 <img loading="lazy" src="w3html.gif" alt="W3Schools.com" width="100" height="132" >

 

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

 

مخفف فرمت فایل MIME type File extension(s) پشتیبانی مرورگر ها
APNG Animated Portable Network Graphics image/apng .apng Chrome, Edge, Firefox, Opera, Safari
BMP Bitmap file image/bmp .bmp Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
GIF Graphics Interchange Format image/gif .gif Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
ICO Microsoft Icon image/x-icon .ico, .cur Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
JPEG Joint Photographic Expert Group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNG Portable Network Graphics image/png .png Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
SVG Scalable Vector Graphics image/svg+xml .svg Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
TIFF Tagged Image File Format image/tiff .tif, .tiff None built-in; add-ons required
WebP Web Picture format image/webp .webp Chrome, Edge, Firefox, Opera

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

 

صفات عمومی

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

Global Attributes در HTML

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

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

Event Attributes در HTML

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

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

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

 

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

 

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

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

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