آشنایی با تصاویر در 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، خصوصیات این تگ و ابزار‌های مسیریابی دقیق و سریع در مقاله‌ای کامل توضیح داده‌ایم که پیشنهاد می‌کنم حتما مقاله مسیریابی در تصاویر ما در میزفا را بخوانید.

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

با توجه به توضیحاتی که دادیم، به نظر شما از تصاویر با چه حجمی باید در وب سایتمان استفاده کنیم؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری:

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

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

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

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

11 نظر

11 پاسخ

  1. جواب سوال:
    هر چه حجم کمتر ، بهتر!(با در نظر گرفتن اینکه کیفیت قابل قبول و قابل مصرف باشه)
    دلیلش هم کاهش زمان لود صفحه برای کاربر هست که همین امر می تونه در کاربر پسند تر کردن سایت موثر باشه و همچنین کاهش هزینه های نگهداری سایت هست(در وبسایت های بزرگ طبیعتا بیشتر به چشم میاد)

  2. سلام’تصاویر هر چه بهینه تر شده باشن بهتره،اینطوری سایت هم راحت تر و سریع تر بارگزاری میشه

  3. هر چقدر حجم کمتر باشه بهتره ! البته نباید از کیفیت تصویر کم بشه تا حدی که تصویر کیفیتشون نسبتا حفظ کنه ولی حجم پایینی هم داشته باشه مثلا نمناک یکی از دلایل بهتر بودنش از زومیت و زومجی و اینا همین سئو تصاویرشه! چون ابعادش کوچکتره که خودش باعث کاهش حجم میشه تصاویر میشه وسرعت بارگذاری رو سریع تر میکنه!

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

  4. عکس بهینه ساز شده من یک مثال بزنم مثل این میمونه که من میخواهم یک بازی 100 گیگی دانلود کنم یا 100 مگی خب معلومه 100 مگ به پایین سریعتر و بهینه ساز شده است و ممنون بخاطر سایت خوب میزفا

    1. سلام کیان، دقیقا مثال جالبی زدی. ممنونم ازت. هدیه‌ات را به زودی دریافت می‌کنی.

  5. هر قدر عکس هایی که در وب سایتان بارگذاری می‌کنید بهینه تر باشد سرعت بارگذاری صفحه شما نیز افزایش میابد

    1. سلام محمد، آره عدد مناسبیه. البته که جواب سوال بهتر بود بنویسی تصاویر بهینه سازی شده ولی بازم قابل قبوله.

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=