دنیای اینترنت

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

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

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

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

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

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

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

< img src="example.jpg" alt= "example.logo" width="50" height="50" style= "vertical-align:bottom" >

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

در این تگ، عرض و ارتفاع ۵۰ تعیین شده است که نشان‌دهنده یک عکس مربعی است. همچنین، در ویژگی استایل، تنظیمات مربوط به قرارگیری عمودی عکس در صفحه مشخص شده است. همچنین، src آدرس منبع عکس و alt توضیحات آن را نشان می‌دهد.

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

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

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