تگ عکس img
تگ عکس در 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 به مقاله زیر مراجعه کنین:
نکات مهم درمورد سئو و ریسپانسیو
در زیر نکاتی مهم در مورد سئوی تگ عکس 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 از همه خصوصیت های عمومی در اچ تی ام ال، پشتیبانی میکند. برای مشاهده صفات عمومی می توانید به آدرس زیر مراجعه بفرمایید:
رویداد های عمومی
تگ img از همه رویداد های عمومی در اچ تی ام ال، پشتیبانی میکند. برای مشاهده رویدادهای عمومی می توانید به آدرس زیر مراجعه بفرمایید:
پشتیبانی مرورگر ها از تگ img
تمامی مرورگر ها از تگ عکس HTML پشتیبانی کامل می کنند.
نام مرورگر | |||||
پشتیبانی می کند؟ | بله | بله | بله | بله | بله |
جهت دانلود فایل ویدیویی به این لینک مراجعه بفرمایین.
قالب های آماده HTML
درباره سالار عباپور
فارغ التحصیل رشته مهندسی برق و مدرس دوره های طراحی سایت - ایشان در زمینه طراحی سایت با زبان های برنامه نویسی PHP و فریمورک لاراول Laravel فعال هستند و همچنین یکی از تحلیل گران خبره در حوزه بازارهای مالی بین المللی و بورس هستند.