درس چهارم
امکان استفاده از تصاویر در html به شکل های مختلف وجود دارد. تصاویر دارای اهمیت زیادی در تجربه کاربری و سئو هستند و در انتخاب هر تصویر در html لازم است که دقت کافی داشت.
از قسمت های بصری هر وب سایتی تصاویر آن می باشند. تصاویر دارای اهمیت بسیار زیادی بوده و از قسمت‌های مهم برای زیبا سازی یک صفحه وب به شمار می آیند که با استفاده از آنها می توان کاربران زیادی را جذب این صفحات کرد.
برای اضافه کردن تصویر به یک سند می توان از تگ های مختلفی استفاده نمود. در ادامه این مقاله برخی از این تگ ها را برای شما معرفی می کنیم.
حجم تصاویر
در صفحات وب به هر میزانی که حجم تصویر بارگذاری شده در وب سایت بهینه تر باشد، روی سرعت بارگذاری صفحه مورد نظر تاثیر زیادی می گذارد و با در نظر گرفتن این نکته به هر میزان که حجم تصاویر کم تر و بهینه تر باشند سرعت بارگذاری وب سایت افزایش پیدا خواهد کرد. راهکارهای مختلفی وجود دارد که می‌توان از طریق آن برای بهینه سازی حجم تصاویر در صفحات استفاده کرد.
استفاده کمتر از تصویر در صفحات مدرن امروزی
در صفحات پیشرفته و مدرن امروزی تلاش می‌شود تا آنجایی که می توان صفحات را از طریق حداقل تصاویر و جایگزین کردن فونت آیکون ها به جای آیکون های تصاویری درست کرد تا از این طریق صفحات ساده تر شوند. با درنظر گرفتن پیشرفت های روز افزون این سبک و طراحی های مسطح بهتر است که در صفحات وب امروزی تحقیقات بیشتری انجام شود تا تصاویر زیبا تری به وجود آید.
بارگذاری تصویر در صفحه وب
در صورتی که می خواهید بارگذاری تصاویر در صفحات وب را انجام دهید، از تگ های تعریف شده ای مثل<img> و <picture> برای این کار می توانید استفاده کنید. همچنین امکان استفاده از ویژگی‌های css برای بارگزاری وجود دارد.
استفاده از تگ <img>
یکی از متداول ترین و کلیدی ترین تگ هایی که می‌توان برای افزودن تصاویر در صفحات وب از آن استفاده کرد، استفاده از تگ <img> می باشد این تگ کمک می کند که خیلی راحت بتوان آدرس صفحه تصویر را در کد html مربوط به خود به نمایش در آورد.
در زیر یک کد آورده شده است که شما می توانید با جایگزین کردن آدرس تصویر خود به جای این آدرس http://example.com/img.jpg تصاویر مورد نظر خود را در صفحه وب به نمایش بگذارید.
<!DOCTYPE html>
<html>
<body>
<img src="http://example.com/img.jpg" alt="Example Image" width="42" height="42">
</body>
</html>
استفاده از تگ <picture>
برای اضافه کردن تصاویر با توجه به تغییرات، اندازه و رزولوشن صفحات وب می توان از تگ <picture> استفاده کرد. از طریق این تگ خیلی راحت می توان تصاویر را به صفحه وب سایت اضافه نمود و با کمک آن یک صفحه وب واکنش گرا درست کرد که تصاویر با کوچک یا بزرگ کردن صفحه دچار تغییر می شوند.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
استفاده از ویژگی‌های CSS برای بارگذاری تصویر
یکی از روش‌های دیگری که برای بارگذاری تصویر در html می توان از آن برای اضافه کردن تصویر به کار برد، استفاده از ویژگی های css می باشد. در طراحی های جدید و مدرن امروزی تا آنجایی که بتوان تلاش می شود، استفاده از تگ های html را کاهش داده و از css برای استایل دهی استفاده شود. بنابراین از جمله روش هایی که می توان از طریق آن تصاویر را در وبسایت اضافه کرد، استفاده از ویژگی‌های css است.
در زیر یک نمونه کد آورده شده است که با استفاده از ویژگی های بک گراند css می توان تصاویر را به صفحات html اضافه کرد.
<body style="background-image:url('clouds.jpg');">
<h2>Background Image</h2>
</body>
نمونه کد قرارگیری تصویر در داخل صفحه با استفاده از سی اس اس:
یک نمونه کد دیگر برای قرار گرفتن تصویر در داخل صفحه از طریق css
<body>
<p style="background-image:url('clouds.jpg');">
...
</p>
</body>
مسیریابی تصاویر با تگ Map
در برخی مواقع ممکن است بخواهیم در تصاویری که بارگذاری شده اند، بخشی را مشخص کنیم که دارای عملیات خاصی می باشد. برای این کار می توان از تگ Map استفاده نمود که با استفاده از این تگ امکان انتخاب قسمتی از تصویر وجود دارد و می توان عملیات خاصی بر روی آن قسمت انجام داد.