یکی از عواملی که سبب بالا رفتن سرعت لود یک وب سایت می شود، سرعت به نمایش درآمدن تصاویر موجود در آن است. همه کاربران دوست دارند تا سایت هایی که به آن ها وارد می شوند، از سرعت بالایی برخوردار باشند. درواقع کاربران دوست ندارند تا وقت خود را برای صبر کردن تا لود کامل تصاویر هدر دهند. به همین دلیل است که تگ html تصاویر می تواند در این خصوص به کار آید.
تگ html تصاویر
احتمالا می دانید که عکس های یک وب سایت از طریق html تصاویر روی وب سایت بارگذاری شده و نمایش داده می شوند. در واقع این تگ مانند سایر تگ های HTML نوعی دستور است که به وب سایت اعلام می کند تصاویر را از کجا پیدا کرده، چگونه آن را لو و نمایش دهد.
به زبان ساده تر، تگ html تصاویر همان شیوه نامه برای به نمایش درآمدن یک تصویر است. هر کد html در صفحات وب سایت می تواند عملکرد و ویژگی های تصویر را نشان دهد.
به این صورت می توانید بهینه سازی تصاویر را صورت دهید و سیگنال های مثبتی را به منظور بهبود وضعیت سئو سایت انجام دهید. ضمن آنکه عکس ها ویژگی هایی تحت عنوان alt هستند که شما می توانید توضیحاتی را راجع به تصویر ذکر کنید. به این صورت است که درک از این تصویر را برای خزنده های گوگل آسان تر خواهید کرد و در نتیجه می توانید در صفحات نمایش SERP رتبه بهتری کسب نمایید.
یک کد html تصویر چیزی شبیه به کد زیر است:
<img src="https://static.semrush.com/blog/uploads/media/43/b0/43b0b9a04c8a433a0c52360c9cc9aaf2/seo-guide-to-yoast-for-wordpress.svg" alt="yoast seo" height="288" width="388"/>
در کد بالا، می توانید 2 ویژگی را ببینید: SRC و ALT.
- SRC مسیر نمایش تصویر را نشان می دهد.
- اگر تصویر نمایش داده نشود، ALT متن جایگزین را برای نمایش نشان می دهد.
بعد از ویژگی ALT، می توانید ویژگی های ارتفاع و عرض تصویر را مشاهده کنید. در تگ html تصویر می توانید ابعاد آن را به صورت دستی تنظیم کنید که در فضای وب به خوبی بهینه شود.
ویژگی SRC
ویژگی SRC مسیر فایل تصویر را نشان می دهد. اگر این کد نادرست باشد، فایل منتقل شده، یا غلط تایپی در کد وجود داشته باشد، نماد "تصویر شکسته" را در صفحه مشاهده خواهید کرد.
ویژگی دیگری که در این کد دیده می شود، کدهای تعریف شده برای عرض و ارتفاع تصویر است که با width و height نمایش داده می شوند. به واسطه این کد می توانید عرض و ارتفاع تصویر را سفارش کنید. اگر این تعریف به درستی صورت نگیرد، عملا تصویر به خوبی برای کاربر به نمایش درنخواهد آمد و لذا شما کاربران خود را از دست خواهید داد. به زبان دیگر، برای آنکه تجربه UX بهتری را برای کاربران خود رقم بزنید، باید این اندازه ها را به درستی وارد نمایید.
ویژگی دیگری که در تگ تصویر وجود دارد که این روزها می توانیم آن را منسوخ شده بنامیم، ویژگی Align است. با این ویژگی تنظیمات قرارگیری تصویر در سمت چپ یا راست صفحه مشخص خواهد شد.
ویژپی بعدی که می توانیم در کدهای تصویر اضافه نماییم، ویژگی style است. در این ویژگی کدهای css را قرار دهید. البته زمانی اتریبیوت استایل استفاده خواهد شد که شما بخواهید کدهای css را به صورت اینلاین داخل کد عکس قرار دهید. به این صورت می توانید روند مثبتی را در بهبود سرعت لود سایت ایجاد نمایید.
چه زمانی باید از تگ html در تصاویر استفاده نماییم؟
زمانی باید از تگ html استفاده کنیم که تصویر بخشی از محتوا باشد و نه بخشی از طراحی سایت! یعنی اگر قالب سایت دارای لوگو باشد، این کد باید شامل قالب بوده و نه تصویر!
اگر بخواهیم ساده عنوان کنیم، یک کد تصویر می گوید که یک تصویر چگونه و کجا باید در محتوا به نمایش درآید. البته این موصوع را مد نظر قرار دهید که هرگونه اشتباه در این کد، سبب عدم نمایش صحیح تصویر می شود. البته ابزارهای مختلفی برای بررسی وضعیت کدهای تصویر وجود دارند که شما می توانید از آن ها استفاده نمایید. یکی از بهترین ابزارها، ابزار Site Audit tool وب سایت SEMrush است که به کمک آن می توانید انواع مشکلات تصاویر در وب سایت را مورد بررسی قرار دهید.
مهم ترین خاصیت تگ html
- خاصیت align : با مقدار bottom، middle، left و right - این خاصیت اغلب به منظور تعیین نحوه رفتار بخش های مختلف وب سایت نسبت به موقعیت تصویر استفاده می شود.
- خاصیت alt: با مقدار متن - این خاصیت به منظور توضیح توضیر مورد استفاده قرار می گیرد که با پر کردن آن، توضیح در خصوص تصویر مشخص شده توصیف می گردد.
- خاصیت border: با مقدار pixels - این خاصیت در HTML5 پشتیبانی نمی شود. این خاصیت پهنای حاشیه عکس را برحسب پیکسل تعیین می نماید.
- خاصیت height : با مقدار pixels – این خاصیت به منظور تعیین ارتفاع عکس تعریف می شود.
- خاصیت hspace: با مقدار pixels - این خاصیت برروی HTML5 پشتیبانی نمی شود. این خاصیت فاصله خالی از چپ و راست تصویر را تعیین می نماید.
- خاصیت sizes: این خاصیت اندازه تصویر را برای طرح بندی های متفاوت تعیین می نماید.
- خاصیت src: با مقدار URL - این خاصیت به مرورگر اعلام می کند که آدرس فایل عکس مورد نظر در کجا قرار دارد.
تصاویر را در کجا قرار دهیم؟
محل قرار گیری تگ های تصاویر، در ادامه سه تا از بهترین محل ها برای قرار دادن تصاویر در متن به شما آموزش می دهیم:
- قبل از پاراگراف: با قرار دادن تگ تصاویر قبل از پاراگراف، پاراگراف در خط جدید پس از تگ تصویر به نمایش در می آید.
- در شروع پاراگراف: با قرار دادن تگ تصاویر در شروع پاراگراف، پاراگراف دقیقا در همان خط بعد از تصویر به نمایش در خواهد آمد.
- در وسط پاراگراف: با قرار دادن تگ تصویر در بین پاراگراف، تصویر میان پاراگراف قرار خواهد گرفت و به نمایش در می آید.
سخن پایانی
توجه به تگ تصویر و بهینه سازی آن و قرار دادن آن ها در جای درست، می تواند در بهینه سازی کلی وب سایت تاثیر زیادی داشته باشد. همچنین می تواند جلوه بصری سایت را بهبود بخشیده و رضایت کلی کاربران را جلب کند.
