تصویر چیست؟ المان‌های بصری و تصاویر چه اهمیتی در زیبایی یک وب سایت دارند؟ از چه تگ‌ها و خاصیت‌هایی برای تصاویر می‌توانیم استفاده کنیم؟ آیا می‌توانیم بر روی قسمتی از تصویر عملیاتی را اجرا کنیم؟ در این مقاله می‌خواهیم به صورت کامل با تگ‌های مربوط به تصاویر بپردازیم.
سرفصل‌های پست
آشنایی با تصویر در 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:
در مورد تگ Map، خصوصیات این تگ و ابزار‌های مسیریابی دقیق و سریع در مقاله‌ای کامل توضیح داده‌ایم که پیشنهاد میکنم حتما مقاله مسیریابی در تصاویر ما در میزفا را بخوانید.
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
با توجه به توضیحاتی که دادیم، به نظر شما از تصاویر با چه حجمی باید در وب سایتمان استفاده کنیم؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری:
در این مقاله به صورت کلی با تصویر در HTML آشنا شدیم و پیشنهاد میکنم هرکدام از بخش‌های ارائه شده را که مقاله جامع‌تری در میزفا دارند را بررسی کنید تا به صورت کامل با تصاویر در HTML آشنا شوید.
همچنین می‌توانید توضیحات عمومی تصاویر در HTML را در وب سایت W3Schools مطالعه کنید.
اگر انتقاد و پیشنهادی در رابطه با بخش تصاویر در HTML دارید، خیلی خوشحال میشیم که در بخش نظرات آنها را با ما در میان بگذارید.
11 پاسخ
جواب سوال:
هر چه حجم کمتر ، بهتر!(با در نظر گرفتن اینکه کیفیت قابل قبول و قابل مصرف باشه)
دلیلش هم کاهش زمان لود صفحه برای کاربر هست که همین امر می تونه در کاربر پسند تر کردن سایت موثر باشه و همچنین کاهش هزینه های نگهداری سایت هست(در وبسایت های بزرگ طبیعتا بیشتر به چشم میاد)
سلام’تصاویر هر چه بهینه تر شده باشن بهتره،اینطوری سایت هم راحت تر و سریع تر بارگزاری میشه
سلام درسته مهدی ممنون
هر چقدر حجم کمتر باشه بهتره ! البته نباید از کیفیت تصویر کم بشه تا حدی که تصویر کیفیتشون نسبتا حفظ کنه ولی حجم پایینی هم داشته باشه مثلا نمناک یکی از دلایل بهتر بودنش از زومیت و زومجی و اینا همین سئو تصاویرشه! چون ابعادش کوچکتره که خودش باعث کاهش حجم میشه تصاویر میشه وسرعت بارگذاری رو سریع تر میکنه!
سلام فرهان جان، درست گفتی. در مورد وب سایت هایی که گفتی نمیتونم خیلی باهات موافق باشم ولی همینکه مثال زدی ارزشمنده.
ممنون از مشارکتت و به زودی هدیه‌ات را دریافت می‌کنی.
عکس بهینه ساز شده من یک مثال بزنم مثل این میمونه که من میخواهم یک بازی 100 گیگی دانلود کنم یا 100 مگی خب معلومه 100 مگ به پایین سریعتر و بهینه ساز شده است و ممنون بخاطر سایت خوب میزفا
سلام کیان، دقیقا مثال جالبی زدی. ممنونم ازت. هدیه‌ات را به زودی دریافت می‌کنی.
هر قدر عکس هایی که در وب سایتان بارگذاری می‌کنید بهینه تر باشد سرعت بارگذاری صفحه شما نیز افزایش میابد
سلام علی اکبر، درسته ممنون از شما.
پاسخ سوال :
کمتر از 100k
سلام محمد، آره عدد مناسبیه. البته که جواب سوال بهتر بود بنویسی تصاویر بهینه سازی شده ولی بازم قابل قبوله.