آموزش طراحی سایتآموزش HTML

آشنایی با تصاویر در HTML

تصویر چیست؟‌ المان‌های بصری و تصاویر چه اهمیتی در زیبایی یک وب سایت دارند؟‌ از چه تگ‌ها و خاصیت‌هایی برای تصاویر می‌توانیم استفاده کنیم؟ آیا می‌توانیم بر روی قسمتی از تصویر عملیاتی را اجرا کنیم؟ در این مقاله می‌خواهیم به صورت کامل با تگ‌های مربوط به تصاویر بپردازیم.

آشنایی با تصویر در 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>

همچنین اگر می‌خواهید در مورد تگ <img> اطلاعات بیشتری داشته باشید. می‌توانید  مقاله مربوط به تگ img را در میزفا بخوانید.

۲ – استفاده از تگ <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>

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

۳ – استفاده از ویژگی‌های CSS برای بارگذاری تصویر

در طراحی مدرن جدید تا‌ جای ممکن سعی می‌شود که استفاده از تگ‌های HTML را کاهش دهند و از CSS‌ برای استایل‌دهی منعطف‌تر استفاده کنند. به همین دلیل یکی از راه‌های استفاده از تصاویر در صفحات وب استفاده از ویژگی‌های CSS می‌باشد.

در نمونه‌ کد‌های زیر با استفاده از ویژگی background-image سی اس اس تصاویر را به صفحه وب اضافه کرده‌ایم.

نمونه کد افزودن تصویر به عنوان پس زمینه با استفاده از سی اس اس:

<body style="background-image:url('clouds.jpg');">

<h2>Background Image</h2>

</body>

  نمونه کد قرارگیری تصویر در داخل صفحه با استفاده از سی اس اس:

<body>

<p style="background-image:url('clouds.jpg');">
...
</p>

</body>

در رابطه با این خاصیت که با استفاده از ویژگی‌های CSS می‌باشد در آموزش‌های CSS میزفا خواهیم خواند.

مسیریابی تصاویر با تگ Map

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

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

نمونه کد مسیریابی تصاویر با تگ Map:

<img src="https://mizfa.com/blog/wp-content/uploads/2019/05/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="https://mizfa.com/blog/wp-content/uploads/2019/04/picture.jpg" alt="Sun">
<area shape="circle" coords="90,58,3" href="https://mizfa.com/blog/wp-content/uploads/2017/05/%D9%86%D8%AA%DB%8C%D8%AC%D9%87-%DA%A9%D8%AF-%D8%AA%DA%AF-span.png" alt="Mercury">
<area shape="circle" coords="124,58,8" href="https://www.w3schools.com/images/venglobe.gif" alt="Venus">
</map>

نمونه تصویر مسیریابی توسط تگ Map:

بخش مورد نظر در تصویر برای image map
بخش مورد نظر در تصویر برای image map

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

نتیجه گیری:

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

همچنین می‌توانید توضیحات عمومی تصاویر در HTML را در وب سایت W3Schools مطالعه کنید.

اگر انتقاد و پیشنهادی در رابطه با بخش تصاویر در HTML دارید، خیلی خوشحال میشیم که در بخش نظرات آن‌ها را با ما در میان بگذارید.

 

آشنایی با تصاویر در HTML
امتیاز 5 از 1 رای
برچسب ها

علی اسمعیلی

سادگی نهایت پیچیدگیست.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره رایگان سئو