آخرین بازبینی: ۱۴۰۴/۰۲/۱۳

آشنایی با تگ img در طراحی سایت

تصاویری که در سایت درج می‌کنید باعث ایجاد زیبایی و آسان شدن انتقال پیام‌ها به مخاطبان می‌شوند. درج تصاویر در کدهای HTML‌سایت به شکل‌های مختلفی امکان پذیر است که در ادامه آن‌ها را بررسی می‌کنیم.

استفاده از تگ img
استفاده از تگ picture
استفاده از تصاویر پس زمینه با کمک CSS

در این نوشته به تگ img خواهیم پرداخت و نکات مختلفی که در طراحی سایت و سئو مفید هستند را مرور خواهیم نمود.

درج تصویر با استفاده از تگ img

به طور کلی درج تصاویر به شکل ساده زیر امکان‌پذیر است:

<img src="http://example.com/test.jpg">

1	<img src="http://example.com/test.jpg">

این کد، تصویری که در نشانی فوق موجود است را در سایت به نمایش در می‌آورد. پارامترهای دیگری نیز برای درج تصاویر در سایت وجود دارند که الزامی نیستند ولی استفاده از آن‌ها مزایایی به همراه دارد.

پارامترهای طول و عرض

دو پارامتر width و height نشان می‌دهند که تصویر در صفحه با چه اندازه‌ای می‌بایست به نمایش در آید. این اندازه‌ها لزوما اندازه‌های واقعی ثبت شده در فایل نیستند و اگر با اندازه‌های واقعی تفاوت داشته باشند، اولویت بیشتری خواهند داشت.

<img src="http://example.com/test.jpg" width="200" height="150">

1	<img src="http://example.com/test.jpg" width="200" height="150">

درج مقدار برای پارامترهای width و height مزیت‌های زیر را به همراه دارد:

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

پارامتر alt

پارامتر alt به معنی alternative یا جایگزین، برای تعریف کردن متنی جهت شرح تصویر کاربرد دارد. این پارامتر به این شکل استفاده می‌شود و کاربردهای زیر را دارد:

<img src="http://example.com/test.jpg" width="200" height="150" alt="Test Image">

1	<img src="http://example.com/test.jpg" width="200" height="150" alt="Test Image">

هنگامی که تصویر در صفحه بارگزاری نشود، متن جایگزین به کاربر نشان داده می‌شود تا بتواند درک بهتری از سایت داشته باشد.
موتور جستجوی گوگل از متن‌های موجود در alt‌ و نام فایل برای یافتن تصاویر مورد نظر کاربران استفاده می‌کند. تعریف متن‌های مناسب می‌تواند ورودی سایت شما را از بخش تصاویر گوگل افزایش دهد.
برای کاربرانی که با مشکل بینایی مواجه هستند، این توضیحات می‌تواند کمک کننده باشد. ابزارهای خواندن صفحه می‌توانند این توضیحات را به صورت گفتاری پخش کنند.
به موتوهای جستجو کمک می‌کند درک بهتری از محتوای شما به دست آورند. زیرا به صورت معمول درک محتوای تصاویر برای نرم‌افزارها بسیار محدود است و اگر این توضیحات را درج نکنید، متوجه نخواهند شد که در این تصویر چه محتوایی وجود دارد.

پارامتر title

استفاده از این پارامتر به این شکل انجام می‌شود

<img src="http://example.com/test.jpg" title="Test Image">

1	<img src="http://example.com/test.jpg" title="Test Image">

کاربرد رسمی و دقیقی برای این پارامتر وجود ندارد. هنگامی که نشانگر ماوس را روی تصویر نگهداری کنید، این متن برای کاربر به نمایش درمی‌آید. برخی از مرورگرها و موتورهای جستجو ممکن است استفاده‌هایی از این متن داشته باشند که به کاربردپذیری بهتر سایت شما و وضعیت سئو آن کمک کند.

تغییر شکل نمایش تصاویر در html

چند پارامتر دیگر نیز از گذشته در تگ img وجود دارند که کار تغییر ظاهر تصویر را انجام می‌دهند. در استانداردهای جدید، استفاده از این ویژگی‌ها توصیه نمی‌شود و در عوض می‌بایست از قوانین css برای این کار استفاده کنید. برخی از پارامترهای اضافی که بهتر است از آن‌ها استفاده نکنید عبارتند از:

align
border
hspace
vspace

تصاویر ریسپانسیو با تگ img

تصاویر درج شده در html به صورت سنتی با طراحی سایت واکنش‌گرا همخوانی ندارند. تگ جدید picture به صورت اختصاصی برای این منظور توسعه یافته است و همچنین ویژگی srcset نیز به تگ img اضافه شده است تا برای ایجاد تصاویر واکنش‌گرا از این تگ قدیمی هم بتوانید استفاده کنید. جهت کسب اطلاعات بیشتر در مورد تصاویر واکنش گرا، این صفحه را مطالعه کنید.

نقش تصاویر در سئو سایت

صفحاتی که دارای تصاویر باشند، از نظر مخاطبان گویاتر و کامل‌تر به شمار می‌روند. همچنین موتور جستجوی گوگل به صفحاتی که علاوه بر متن دارای تصویر هستند، اهمیت بیشتری می‌دهد و ممکن است وضعیت سئو این صفحات در گوگل بهبود پیدا کند.

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

تهیه‌ی عکس‌های با کیفیت

برای تهیه‌ی عکس‌های مناسب راه‌های مختلفی وجود دارد. اگر تصاویر شما تزئینی هستند، با استفاده از تصاویر موجود و نرم‌افزارهای گرافیکی مثل فتوشاپ می‌توانید تصاویر جدیدی درست کنید که هم جدید باشند و هم با موضوع شما همخوانی داشته باشند. اگر سایت فروشگاهی دارید یا می‌خواهید محصولات و خدمات خودتان را معرفی کنید، بهتر است تصاویر با کیفیت و حرفه‌ای تهیه کنید تا هم رضایت گوگل و هم مشتریان سایتتان را به دست بیاورید.