منظور از تگ html تصاویر چیست؟

هنگامی که شما وارد وب سایتی می شوید؛ تصاویر باید سریع به نمایش در بیایند. چراکه ما انسان ها موجوداتی بصری هستیم و دوست داریم سریعا تصاویر و محیطی رنگی و زیبا را مشاهده کنیم. همانطور که می دانید تصاویر از طریق تگ html تصاویر بر روی وب سایت بارگذاری می شوند و به نمایش در می آیند.

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

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

با بهینه سازی تصاویر وب سایت می توانید یکسری سیگنال های مثبت را در جهت بهبود وضعیت SEO وب سایت به گوگل بدهید. همچنین کد عکس دارای ویژگی هست به نام alt که با وارد کردن توضیحاتی راجع به تصویر می توانید درک عکس را برای خزنده های گوگل آسانتر کنید و رتبه بهتری را در SERP کسب کنید.

تگ html تصاویر چیست؟

دو ویژگی اصلی در تگ img یا همان تگ تصاویر در html، data-src و alt هستند. راجع به alt صحبت کردیم؛ اما data-src، ویژگی ای است که در آن منبع عکس و آدرسی که تصویر در آن بارگذاری شده است را از ما دریافت می کند. همچنین ویژگی های دیگری در این تگ وجود دارد به نام width و height که می توانید به واسطه آن ها عرض و ارتفاعی سفارشی را به تصویر خود بدهید. حتما مراقب باشید تا با عرض و ارتفاعی که انتخاب می کنید؛ تصویر در بهترین حالت و بهترین کیفیت خود باشد. چراکه در غیر این صورت، تار شدن تصاویر قطعا به قیمت از دست دادن کاربرانتان خواهد شد. به زبان علمی تر UX وب سایت یا تجربه کاربری آن افت خواهد کرد. اگر بخواهیم نکته ای دیگر را در مورد ویژگی alt تصاویر خدمت شما بگوییم؛ این است که سبب می شود کاربران با ابزار text-to-speech متوجه محتوای آن بشوند. صد در صد گوگل به این موضوع که شما به تمامی کاربران خود (حتی نابینایان) اهمیت می دهید؛ نمره مثبت می دهد.

ویژگی دیگری نیز تگ img دارد که امروزه منسوخ شده است. نام این ویژگی Align است که دیگر کمتر کسی از آن بهره می برد. بد نیست بدانید این ویژگی به منظور مکان نمایش عکس استفاده می شده است. برای مثال اینکه عکس در سمت راست صفحه نمایش داده شود یا سمت چپ. امروزه شما با کشیدن عکس یا همان drag به راحتی هرچه تمام تر این کار را می کنید. بنابراین دیگر نیازی به ویژگی Align نخواهیم داشت.

چند ویژگی دیگر را نیز می توانید در قالب style به کد خود اضافه کنید. در ادامه چند مثال را همراه با توضیح خدمت شما خواهیم داد.

< img data-src=”example.jpg” alt= “example.logo” width=”50″ height=”50″ style= “vertical-align:bottom” >

تگ تصویری که در اینجا می بینید شامل ویژگی های data-src، alt، width، height و style است. اتریبیوت استایل زمانی استفاده می شود که شما خواهان دادن کد های css به صورت اینلاین داخل کد عکس در html هستید. این کار باعث کاهش حجم فایل های css می شود. بنابراین اگر به جا و درست از این روش استفاده کنید، باعث ایجاد روند مثبت در سرعت وب سایت و در پی آن نمره بهتر در سئو وب سایت خود خواهید شد.

در این تگ عرض و ارتفاع ۵۰ داده شده است؛ بنابراین این یک عکس مربعی محسوب می شود. در ویژگی استایل، جای گذاری عمودی عکس در صفحه مشخص شده است. data-src هم آدرس منبع عکس و alt هم توضیح آن است.

چه زمانی باید از تگ html در تصاویر استفاده کنیم؟

به طور کلی زمانی از تگ تصاویر استفاده می کنیم که عکس قسمتی از محتوای وب سایت ما باشد و نه قسمتی از طراحی و دیزاین آن.

برای مثال اگر قالب وب سایت شما شامل تصویر و لوگوی مجموعه شما یا موارد مشابه است؛ نباید از تگ تصویر برای بارگذاری آن ها استفاده کنید. بلکه باید قالب آن ها را شامل شود.

به این صورت که ابتدا قالب وب سایت شما لود و بارگیری می شود و سپس محتوای شما که شامل متون، تصاویر و… هستند بارگیری می شوند.

به زبان ساده کد عکس در html بیان کننده آن است که کجا و چطور باید تصاویر در محتوا به نمایش در بیایند.

برای بررسی و عیب یابی تگ های img از چه ابزاری استفاده کنیم؟

بدین منظور شما می توانید از ابزار Site Audit tool  وب سایت SEMrush استفاده کنید. این ابزار انواع و اقسام مشکلاتی که ممکن است تگ html تصاویر شما داشته باشد را برایتان شرح دهید.