تگ 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 نشان دهنده اين است كه تصاوير بايد در كد محتوا به نمايش درآيند و بعد از بارگيري قالب وب سايت.