مقدمه

در این آموزش یاد می‌گیرید چگونه با استفاده از HTML تصاویر را به صفحات وب خود اضافه کنید. همچنین با نحوه استفاده از ویژگی alt برای افزودن متن جایگزین آشنا می‌شوید تا دسترسی‌پذیری (Accessibility) سایت برای کاربران دارای اختلال بینایی و استفاده‌کنندگان از Screen Reader بهبود پیدا کند.

افزودن تصویر با HTML

برای نمایش تصویر در HTML از تگ <img> استفاده می‌شود.

این تگ دارای ویژگی src است که مسیر فایل تصویر را مشخص می‌کند.

نمونه:

<img src="Image_Location">

توجه کنید که تگ <img> یک تگ خودبسته (Self Closing) است و نیازی به </img> ندارد.

استفاده از تصویر محلی

فرض کنید تصویر شما داخل پوشه پروژه قرار دارد.

ساختار پروژه:

project/
│── index.html
│── images/
    └── profile.jpg

کد HTML:

<img src="images/profile.jpg">

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

استفاده از تصویر آنلاین

همچنین می‌توانید مستقیماً از آدرس اینترنتی تصویر استفاده کنید.

مثال:

<img src="https://example.com/image.jpg">

در این حالت تصویر از سرور دیگری بارگذاری می‌شود.

بهتر است تصاویر را داخل پروژه نگهداری کنید

اگرچه استفاده از تصاویر آنلاین امکان‌پذیر است، اما معمولاً توصیه می‌شود تصاویر را در پوشه پروژه خود ذخیره کنید، زیرا:

• اگر تصویر از سرور حذف شود نمایش داده نخواهد شد.
• اگر آدرس تصویر تغییر کند لینک خراب می‌شود.
• سرعت بارگذاری سایت معمولاً بهتر خواهد بود.
• مدیریت فایل‌ها ساده‌تر می‌شود.

افزودن متن جایگزین (Alt Text)

برای افزایش دسترسی‌پذیری سایت باید همیشه از ویژگی alt استفاده کنید.

نمونه:

<img src="images/profile.jpg" alt="تصویر پروفایل کاربر">

اگر تصویر به هر دلیلی بارگذاری نشود، متن موجود در alt نمایش داده می‌شود.

همچنین صفحه‌خوان‌ها این متن را برای کاربران نابینا یا کم‌بینا می‌خوانند.

بهترین روش‌های نوشتن متن Alt

برای تصاویر مهم

متن باید کوتاه، واضح و توصیف‌کننده تصویر باشد.

نمونه مناسب:

<img src="team.jpg" alt="اعضای تیم توسعه نرم‌افزار">

نمونه نامناسب:

alt="تصویری از اعضای تیم"

عبارت «تصویر» یا «عکس» معمولاً لازم نیست.

برای تصاویر تزئینی

اگر تصویر فقط جنبه زیبایی دارد و اطلاعات خاصی منتقل نمی‌کند، مقدار alt را خالی قرار دهید.

<img src="background.png" alt="">

این کار باعث می‌شود صفحه‌خوان‌ها از روی این تصاویر عبور کنند و تجربه کاربری بهتری ایجاد شود.

جمع‌بندی

در این آموزش یاد گرفتید که:

• با تگ <img> تصاویر را در HTML نمایش دهید.
• از ویژگی src برای تعیین مسیر تصویر استفاده کنید.
• تصاویر محلی و آنلاین را به صفحه اضافه کنید.
• از ویژگی alt برای بهبود سئو و دسترسی‌پذیری استفاده کنید.
• برای تصاویر تزئینی از alt="" استفاده کنید.

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

از همراهی شما با پارمین کلود سپاسگزاریم.