آموزش استفاده از تگ‌های تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب

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

تگ < img >: نمایش تصاویر

تگ < img > اصلی‌ترین تگ HTML برای نمایش تصاویر است. این تگ نیازی به بسته شدن ندارد و شامل ویژگی‌های متعددی برای مدیریت نمایش تصاویر است.

ساختار پایه تگ < img >

< img src="image.jpg" alt="توضیح تصویر" >

ویژگی‌های مهم تگ < img >

src:

آدرس تصویر را مشخص می‌کند.

< img src="images/example.jpg" >

alt:

متن جایگزین برای تصویر. این ویژگی برای دسترسی‌پذیری و سئو بسیار مهم است.

< img src="images/example.jpg" alt="تصویری از طبیعت" >

width و height:

عرض و ارتفاع تصویر را تعیین می‌کند (بهتر است از CSS برای استایل‌دهی استفاده کنید).

< img src="images/example.jpg" alt="تصویر نمونه" width="300" height="200" >

loading:

نوع بارگذاری تصویر را مشخص می‌کند:

lazy: تصویر تنها زمانی بارگذاری می‌شود که کاربر به آن نزدیک شود.

< img src="images/example.jpg" alt="تصویر نمونه" loading="lazy" >

title:

توضیح کوتاهی که هنگام نگه داشتن ماوس روی تصویر نمایش داده می‌شود.

< img src="images/example.jpg" alt="تصویر نمونه" title="نمونه تصویر" >

استفاده از تصاویر واکنش‌گرا (Responsive Images)

برای سازگاری تصاویر با دستگاه‌های مختلف، می‌توانید از ویژگی‌های زیر استفاده کنید:

استفاده از ویژگی srcset و sizes

این ویژگی‌ها به مرورگر کمک می‌کنند نسخه مناسب تصویر را براساس اندازه دستگاه انتخاب کند.

< img src="images/small.jpg"
     srcset="images/small.jpg 480w, images/medium.jpg 800w, images/large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
     alt="تصویر واکنش‌گرا" >

• srcset: لیستی از تصاویر با اندازه‌های مختلف.

• sizes: تعیین اندازه تصویر بر اساس عرض صفحه.

استفاده از CSS برای واکنش‌گرایی

img {
    max-width: 100%;
    height: auto;
}

استفاده از تگ < picture > برای تصاویر تطبیقی

تگ < picture > امکان تعریف چندین منبع تصویر برای شرایط مختلف را فراهم می‌کند.

نمونه کد:

< picture >
    < source srcset="images/large.jpg" media="(min-width: 1200px)" >
    < source srcset="images/medium.jpg" media="(min-width: 600px)" >
    < img src="images/small.jpg" alt="تصویر تطبیقی" >
< / picture >

• < source >: تصاویر مختلف برای شرایط خاص.

• < img >: تصویر پیش‌فرض.

بهینه‌سازی تصاویر برای وب

• استفاده از فرمت‌های مدرن

  WebP: حجم کمتر و کیفیت بالاتر نسبت به JPEG و PNG.

  AVIF: فرمت جدیدتر با فشرده‌سازی بهتر.

• فشرده‌سازی تصاویر

  از ابزارهایی مانند TinyPNG یا ImageOptim برای کاهش حجم تصاویر بدون افت کیفیت استفاده کنید.

• افزودن ویژگی alt

  ویژگی alt توضیح کوتاهی از تصویر ارائه می‌دهد و به موتورهای جستجو کمک می‌کند مفهوم تصویر را درک کنند.

• فعال‌سازی بارگذاری تنبل (Lazy Loading)

  بارگذاری تنبل با استفاده از ویژگی loading="lazy" سرعت بارگذاری صفحات را افزایش می‌دهد.

نکات بهینه‌سازی تصاویر بر اساس استانداردهای گوگل

• سرعت بارگذاری:

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

• SEO تصاویر:

  از ویژگی‌های alt و title برای توضیح تصاویر و افزودن کلمات کلیدی مرتبط استفاده کنید.

• واکنش‌گرایی:

  اطمینان حاصل کنید که تصاویر در تمامی دستگاه‌ها (موبایل، تبلت و دسکتاپ) به درستی نمایش داده می‌شوند.

• کیفیت بالا با حجم کم:

  تصاویر باید کیفیت مناسبی داشته باشند اما حجم آن‌ها نباید سرعت صفحه را کاهش دهد.

نمونه کد کامل برای مدیریت تصاویر در HTML

< ! DOCTYPE html >
< html lang="fa" dir="rtl" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < meta name="description" content="آموزش استفاده از تگ‌های تصویری در HTML" >
    < meta name="keywords" content="HTML, تصاویر, تگ img, بهینه‌سازی تصاویر" >
    < meta name="author" content="نام شما" >
    < title > آموزش تگ‌های تصویری در HTML < / title >
    < style >
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto;
        }
    < / style >
< / head >
< body >
    < header >
        < h1 > آموزش تگ‌های تصویری در HTML < / h1 >
    < / header >
    < main >
        < section >
            < h2 > نمایش تصویر ساده < / h2 >
            < img src="images/example.jpg" alt="تصویر نمونه" loading="lazy" >
        < / section >
        < section >
            < h2 > تصاویر واکنش‌گرا < / h2 >
            < img src="images/small.jpg"
                 srcset="images/small.jpg 480w, images/medium.jpg 800w, images/large.jpg 1200w"
                 sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
                 alt="تصویر واکنش‌گرا" >
        < / section >
        < section >
            < h2 > تصاویر تطبیقی با تگ < code > picture < / code > < / h2 >
            < picture >
                < source srcset="images/large.jpg" media="(min-width: 1200px)" >
                < source srcset="images/medium.jpg" media="(min-width: 600px)" >
                < img src="images/small.jpg" alt="تصویر تطبیقی" >
            < / picture >
        < / section >
    < / main >
    < footer >
        < p > © 2024 طراحی شده توسط نام شما < / p >
    < / footer >
< / body >
< / html >

جمع‌بندی

تگ‌های تصویری HTML ابزارهای قدرتمندی برای نمایش و مدیریت تصاویر در صفحات وب هستند. با استفاده از تگ‌های < img >، < picture > و ویژگی‌هایی مانند srcset و loading="lazy"، می‌توانید تصاویر بهینه و واکنش‌گرا ایجاد کنید. رعایت استانداردهای گوگل در مدیریت تصاویر به بهبود سرعت بارگذاری، سئو و تجربه کاربری وب‌سایت شما کمک می‌کند.