آشنایی با تگ img در طراحی سایت
تصاویر بخشی مهم از سایت‌های اینترنتی به شمار می‌روند. درج تصاویر در فایل‌های HTML با چند روش امکان‌پذیر است که عبارتند از:
- استفاده از تگ img
- استفاده از تگ picture
- استفاده از تصاویر پس زمینه با کمک CSS
در این نوشته به تگ img خواهیم پرداخت و نکات مختلفی که در طراحی سایت و سئو مفید هستند را مرور خواهیم نمود.
درج تصویر با استفاده از تگ img
به طور کلی درج تصاویر به شکل ساده زیر امکان‌پذیر است:
|
1 |
<img src="http://example.com/test.jpg"> |
این کد، تصویری که در نشانی فوق موجود است را در سایت به نمایش در می‌آورد. پارامترهای دیگری نیز برای درج تصاویر در سایت وجود دارند که الزامی نیستند ولی استفاده از آن‌ها مزایایی به همراه دارد.
پارامترهای طول و عرض
دو پارامتر width و height نشان می‌دهند که تصویر در صفحه با چه اندازه‌ای می‌بایست به نمایش در آید. این اندازه‌ها لزوما اندازه‌های واقعی ثبت شده در فایل نیستند و اگر با اندازه‌های واقعی تفاوت داشته باشند، اولویت بیشتری خواهند داشت.
|
1 |
<img src="http://example.com/test.jpg" width="200" height="150"> |
درج مقدار برای پارامترهای width و height مزیت‌های زیر را به همراه دارد:
- باعث می‌شود فضای مورد نیاز برای تصویر قبل از بارگزاری فایل، مشخص باشد و سایت در نگاه اول، شکل مناسب‌تری پیدا کند.
- باعث می‌شود پس از بارگزاری فایل اصلی، نیاز به انجام محاسبات برای جابجایی عناصر دیگر از بین برود. زیرا اگر اندازه‌ها مشخص نباشند، مرورگر در ابتدا فضایی کوچک برای img در نظر می‌گیرد و صفحه را نمایش می‌دهد و پس از بارگزاری عکس، فضای اشغال‌شده تغییر می‌کند و صفحه می‌بایست مجددا چیدمان شود.
- اگر به هر دلیل تصویر قابل بارگزاری نباشد، شکل سایت به هم ریختگی پیدا نمی‌کند و کاربران به شکل بهتری می‌توانند از مطالب سایت استفاده نمایند.
پارامتر alt
پارامتر alt به معنی alternative یا جایگزین، برای تعریف کردن متنی جهت شرح تصویر کاربرد دارد. این پارامتر به این شکل استفاده می‌شود و کاربردهای زیر را دارد:
|
1 |
<img src="http://example.com/test.jpg" width="200" height="150" alt="Test Image"> |
- هنگامی که تصویر در صفحه بارگزاری نشود، متن جایگزین به کاربر نشان داده می‌شود تا بتواند درک بهتری از سایت داشته باشد.
- موتور جستجوی گوگل از متن‌های موجود در alt و نام فایل برای یافتن تصاویر مورد نظر کاربران استفاده می‌کند. تعریف متن‌های مناسب می‌تواند ورودی سایت شما را از بخش تصاویر گوگل افزایش دهد.
- برای کاربرانی که با مشکل بینایی مواجه هستند، این توضیحات می‌تواند کمک کننده باشد. ابزارهای خواندن صفحه می‌توانند این توضیحات را به صورت گفتاری پخش کنند.
- به موتوهای جستجو کمک می‌کند درک بهتری از محتوای شما به دست آورند. زیرا به صورت معمول درک محتوای تصاویر برای نرم‌افزارها بسیار محدود است و اگر این توضیحات را درج نکنید، متوجه نخواهند شد که در این تصویر چه محتوایی وجود دارد.
پارامتر title
استفاده از این پارامتر به این شکل انجام می‌شود
|
1 |
<img src="http://example.com/test.jpg" title="Test Image"> |
کاربرد رسمی و دقیقی برای این پارامتر وجود ندارد. هنگامی که نشانگر ماوس را روی تصویر نگهداری کنید، این متن برای کاربر به نمایش درمی‌آید. برخی از مرورگرها و موتورهای جستجو ممکن است استفاده‌هایی از این متن داشته باشند که به کاربردپذیری بهتر سایت شما و وضعیت سئو آن کمک کند.
تغییر شکل نمایش تصاویر در html
چند پارامتر دیگر نیز از گذشته در تگ img وجود دارند که کار تغییر ظاهر تصویر را انجام می‌دهند. در استانداردهای جدید، استفاده از این ویژگی‌ها توصیه نمی‌شود و در عوض می‌بایست از قوانین css برای این کار استفاده نمایید. برخی از پارامترهای اضافی که بهتر است از آن‌ها استفاده نکنید عبارتند از:
- align
- border
- hspace
- vspace
تصاویر ریسپانسیو با تگ img
تصاویر درج شده در html به صورت سنتی با طراحی سایت واکنش‌گرا همخوانی ندارند. تگ جدید picture به صورت اختصاصی برای این منظور توسعه یافته است و همچنین ویژگی srcset نیز به تگ img اضافه شده است تا برای ایجاد تصاویر واکنش‌گرا از این تگ قدیمی هم بتوانید استفاده کنید. جهت کسب اطلاعات بیشتر در مورد تصاویر واکنش گرا، این صفحه را مطالعه کنید.
نقش تصاویر در سئو سایت
صفحاتی که دارای تصاویر باشند، از نظر مخاطبان گویاتر و کامل‌تر به شمار می‌روند. همچنین موتور جستجوی گوگل به صفحاتی که علاوه بر متن دارای تصویر هستند، اهمیت بیشتری می‌دهد و ممکن است وضعیت سئو این صفحات در گوگل بهبود پیدا کند.
بنابراین بهتر است هنگامی که کار تولید محتوا برای سایت خود را انجام می‌دهید، حداقل یک تصویر مناسب هم در آن درج نمایید.
