نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

تصاویر در HTML

• چگونگی اضافه کردن تصوایر به صفحه
• انتخاب فرمت صحیح
• بهینه سازی تصاویر برای وب

دلایل زیادی برای افزودن تصاویر به صفحه وب وجود دارد؛ ممکن است شما بخواهید در طراحی وب سایت خود از لوگو، عکس ها یا نمودارها استفاده کنید.

در این مقاله شما موارد زیر را خواهید آموخت:

• استفاده از تصاویر در طراحی سایت با استفاده از HTML
• نشان دادن تصویر در اندازه صحیح
• انتخاب فرمت تصویر برای استفاده
• بهینه سازی یک تصویر برای استفاده در وب برای بالا بردن سرعت بارگذاری صفحات

شما همچنین می توانید از CSS را برای استفاده از تصاویر در صفحات خود استفاده کنید.

انتخاب تصویر در طراحی سایت

یک سایت می تواند گویای هزاران حرف باشد، و انتخاب یک عکس عالی به ایجاد تفاوت بین یک سایت معمولی و یک سایت جذاب می انجامد.

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

تصاویر باید ویژگی زیر را داشته باشند:

• مرتبط باشند
• اطلاعات را انتقال دهند
• بلافاصله بعد از مشاهده قابل درک باشند
• از ترکیب رنگ مناسبی استفاده کند

ذخیره تصاویر روی وب سایت خود

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

برای بهینه سازی در طراحی سایت، جداسازی عکس ها در یک پوشه جداگانه به سازماندهی سایت کمک می کند. در اینجا شما نمونه ای از فایل ها برای طراحی سایت را می بینید؛ تمام تصاویر در پوشه ای به نام images ذخیره شده اند.

در طراحی سایت های بزرگتر ممکن است شما بخواهید پوشه هایی را درون پوشه images اضافه کنید. مثلاً تصاویری مانند لوگو را درون پوشه ای به نام interface، تصاویر محصولات را درون پوشه products و تصاویر مربوط به اخبار را در پوشه news قرار دهید.

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

افزودن تصویر

<img>

برای اضافه کردن یک تصویر به صفحه، شما باید از یک عنصر <img> استفاده کنید. این یک المان خالی است (به این معنی که تگ پایانی ندارد).

<img src="images/quokka.jpg" alt="A family of quokka" title="The quokka is an Australian marsupial that is similar in size to the domestic cat." />

نتیجه را در عکس زیر مشاهده می کنید:

المان <img> باید دو ویژگی زیر داشته باشد:

src

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

alt

این ویژگی متنی را در بر می گیرد که توضیحی راجع به تصویر است. و به هر دلیلی اگر عکس باز نشود، این توضیح بجای عکس ظاهر می شود. مانند تصویر زیر:

متن مورد استفاده در ویژگی alt اغلب به عنوان text alt نامیده می شود. که باید یک توضیح دقیق از محتوای تصویر را ارائه دهد، بنابراین می تواند از طریق نرم افزار خواننده صفحات (برای افراد مبتلا به اختلال بینایی) و موتورهای جستجو استفاده شود.

اگر تصویر فقط برای ایجاد یک صفحه جذاب تر باشد (و معنای خاصی نداشته باشد)، در این صورت نیز باید ویژگی alt استفاده شود، اما نقل قول ها باید باشند.

title

شما می توانید از ویژگی title نیز برای عنصر <img> استفاده کنید، البته حضور آن ضروری نیست. اغلب مرورگرها محتوای این ویژگی را در یک بارکد هنگامی که کاربر موس را روی تصویر می برد، نشان می دهند. به تصویر زیر دقت کنید:

ارتفاع و عرض تصاویر

شما اغلب می بینید که المان <img> از دو ویژگی دیگر نیز استفاده می کند که اندازه آن را مشخص می کنند.

height

این ویژگی ارتفاع عکس را بر حسب پیکسل مشخص می کند.

width

این خصوصیت عرض تصویر را بر حسب پیکسل تعیین می کند.

اغلب تصاویر نسبت به کدهای HTML، زمان بیشتری برای بارگذاری نیاز دارند. بنابراین بهتر است اندازه تصویر را مشخص کنید تا مرورگر بتواند بقیه متن را روی صفحه نمایش دهد، و فضای صحیح مورد نیاز برای عکس را تا زمان بارگذاری خالی گذارد.

اندازه تصاویر معمولاً با استفاده از CSS مشخص می شوند.

<img src="images/quokka.jpg" alt="A family of quokka" width="600" height="450" />

محل قرارگیری تصاویر در کدهای شما

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

1. قبل از پاراگراف

پاراگراف از یک خط جدید بعد از تصویر شروع می شود.

2. داخل پاراگراف و در شروع آن

خط اول از متن پاراگراف در یک ردیف با پایین تصویر قرار می گیرد

3. در میان متن پاراگراف

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

<img src="images/bird.gif" alt="Bird" width="100" height="100" />

<p>There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys. </p>

<hr />

<p><img src="images/bird.gif" alt="Bird" width="100" height="100" />There are around 10,000 living   species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys. </p>

<hr />

<p>There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. <img src="images/bird.gif" alt="Bird" width="100" height="100" />Many species undertake long distance annual migrations, and many more perform shorter irregular journeys. </p>

مبحث تصاویر در HTML  و استفاده از آن ها در طراحی سایت را در مقاله بعدی ادامه می دهیم.