فرمت‌های تصویری پشتیبانی‌شده

JPEG یا PNG یا WebP؟ کدوم رو کِی استفاده کنیم؟

تو درس قبل با تگ img آشنا شدیم، اما یه سؤال مهم هنوز باقی مونده: فایل تصویری که قراره تو src بذاریم، باید چه فرمتی داشته باشه؟ انتخاب فرمت درست تصویر، تأثیر مستقیمی روی سرعت بارگذاری سایت، کیفیت نمایش و حتی سئو داره. تو این درس با مهم‌ترین فرمت‌های تصویری پشتیبانی‌شده در HTML5 آشنا می‌شیم.

فرمت JPEG (یا JPG)

<img src="landscape.jpg" alt="منظره‌ی طبیعی کوهستان در غروب آفتاب">

JPEG یکی از قدیمی‌ترین و رایج‌ترین فرمت‌های تصویریه که مخصوص عکس‌های واقعی (مثل عکاسی طبیعت، پرتره، محصولات) طراحی شده. این فرمت از یه روش فشرده‌سازی به اسم Lossy استفاده می‌کنه؛ یعنی بخشی از کیفیت تصویر برای کاهش حجم فایل از دست می‌ره، اما این افت کیفیت معمولاً برای چشم انسان قابل‌تشخیص نیست. مزیت اصلی JPEG حجم کم فایله، که باعث سرعت بارگذاری بالاتر می‌شه.

مناسب برای: عکس‌های واقعی با رنگ‌های متنوع و گرادیان‌های نرم، مثل عکس‌های طبیعت یا محصولات فروشگاهی.

فرمت PNG

<img src="logo.png" alt="لوگوی شرکت با پس‌زمینه شفاف">

PNG برخلاف JPEG، از فشرده‌سازی Lossless استفاده می‌کنه؛ یعنی هیچ کیفیتی از تصویر از دست نمی‌ره، اما در ازاش حجم فایل معمولاً بیشتره. مهم‌ترین ویژگی PNG، پشتیبانی از شفافیت (Transparency) هست؛ یعنی می‌شه بخشی از تصویر رو کاملاً شفاف نگه داشت تا پس‌زمینه‌ی سایت از پشتش دیده بشه.

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

فرمت GIF

<img src="loading.gif" alt="انیمیشن نشان‌دهنده‌ی در حال بارگذاری بودن صفحه">

فرمت GIF امروزه کمتر برای عکس‌های معمولی استفاده می‌شه، چون فقط از ۲۵۶ رنگ پشتیبانی می‌کنه که برای عکس‌های واقعی کیفیت پایینی داره. اما یه قابلیت خاص داره که هنوزم ازش استفاده می‌شه: پشتیبانی از انیمیشن ساده؛ یعنی چند فریم تصویر پشت‌سرهم که مثل یه ویدیوی کوتاه پخش می‌شن.

مناسب برای: انیمیشن‌های کوتاه و ساده، مثل آیکون‌های در حال بارگذاری.

فرمت SVG

<img src="icon.svg" alt="آیکون سبد خرید">

SVG مخفف Scalable Vector Graphics هست و کاملاً با بقیه‌ی فرمت‌ها متفاوته؛ چون به‌جای ذخیره‌ی تصویر به‌صورت پیکسل‌های رنگی، اطلاعات تصویر رو به‌صورت فرمول‌های ریاضی و مسیرهای هندسی ذخیره می‌کنه. این یعنی SVG رو می‌شه تا هر اندازه‌ای بزرگ کرد، بدون اینکه کیفیتش افت کنه یا پیکسلی (Pixelated) بشه؛ برخلاف JPEG یا PNG که با بزرگ‌نمایی زیاد، تار و بی‌کیفیت می‌شن.

مناسب برای: لوگوها، آیکون‌ها، نمودارها و هر تصویر گرافیکی ساده که ممکنه تو اندازه‌های مختلف (موبایل، دسکتاپ، صفحات بزرگ) نمایش داده بشه. تگ svg رو به‌صورت مستقل و کامل‌تر تو فصل ۹ همین دوره بررسی می‌کنیم.

فرمت WebP: استاندارد مدرن

<img src="photo.webp" alt="عکس محصول جدید فروشگاه">

WebP یه فرمت نسبتاً جدیدتره که توسط گوگل معرفی شده و مزیت بزرگش اینه که هم می‌تونه مثل JPEG فشرده‌سازی Lossy داشته باشه، هم مثل PNG از شفافیت پشتیبانی کنه، و در کل حجم فایلش معمولاً به‌طور قابل‌توجهی کمتر از JPEG و PNG با کیفیت مشابهه. امروزه اکثر مرورگرهای مدرن ازش پشتیبانی می‌کنن.

مناسب برای: تقریباً هر نوع تصویری، به‌عنوان جایگزین سبک‌تر برای JPEG و PNG.

جدول مقایسه‌ی فرمت‌ها

فرمت	پشتیبانی از شفافیت	پشتیبانی از انیمیشن	بهترین کاربرد
JPEG	خیر	خیر	عکس‌های واقعی
PNG	بله	خیر	لوگو، آیکون، پس‌زمینه شفاف
GIF	بله (محدود)	بله	انیمیشن‌های ساده
SVG	بله	محدود	گرافیک‌های برداری، آیکون‌ها
WebP	بله	بله	جایگزین سبک‌تر JPEG و PNG

چطور فرمت مناسب رو انتخاب کنیم؟

یه راهنمای کوتاه برای تصمیم‌گیری سریع:

• عکس واقعی (طبیعت، محصول، پرتره) → JPEG یا WebP
• لوگو یا آیکون با پس‌زمینه‌ی شفاف → PNG یا SVG
• گرافیک ساده که قراره تو اندازه‌های مختلف نمایش داده بشه → SVG
• انیمیشن ساده و کوتاه → GIF یا ویدیو (که تو فصل ۹ بررسی می‌کنیم)

چند اشتباه رایج

• استفاده از PNG برای عکس‌های واقعی و پیچیده، که باعث حجم فایل بی‌دلیل بزرگ می‌شه.
• استفاده از JPEG برای لوگو یا تصاویری که نیاز به پس‌زمینه‌ی شفاف دارن، در حالی که JPEG اصلاً از شفافیت پشتیبانی نمی‌کنه.
• استفاده از GIF برای تصاویر ثابت معمولی، که هم کیفیت پایین‌تری داره، هم حجمش لزوماً کمتر از فرمت‌های دیگه نیست.
• بی‌توجهی به فرمت WebP به‌عنوان یه گزینه‌ی سبک‌تر و مدرن‌تر.

بهترین روش‌ها

• برای عکس‌های واقعی، همیشه بین JPEG و WebP، گزینه‌ی سبک‌تر (معمولاً WebP) رو در نظر بگیر.
• برای هر تصویری که نیاز به شفافیت داره، از PNG یا SVG استفاده کن.
• برای آیکون‌ها و لوگوهای ساده، SVG رو در اولویت قرار بده، چون در هر اندازه‌ای کیفیتش حفظ می‌شه.

نکته‌ی سئو

حجم بالای تصاویر یکی از رایج‌ترین دلایل کندی بارگذاری سایت است، و سرعت بارگذاری صفحه یکی از فاکتورهای مستقیم رتبه‌بندی گوگل محسوب می‌شود. انتخاب فرمت درست (مثل WebP به‌جای JPEG سنگین) می‌تواند تأثیر محسوسی روی سرعت و در نتیجه سئوی سایت داشته باشد.

نکته‌ی دسترسی‌پذیری

فرمت تصویر تأثیر مستقیمی روی دسترسی‌پذیری ندارد، اما سرعت بارگذاری بهتر (با انتخاب فرمت مناسب) تجربه‌ی کاربری بهتری برای همه‌ی کاربران، از جمله کسانی که با اینترنت کندتر کار می‌کنند، فراهم می‌کند.

جمع‌بندی

هر فرمت تصویری برای یک هدف خاص طراحی شده است: JPEG برای عکس‌های واقعی، PNG برای تصاویر با پس‌زمینه‌ی شفاف، GIF برای انیمیشن‌های ساده، SVG برای گرافیک‌های برداری و مقیاس‌پذیر، و WebP به‌عنوان یک جایگزین مدرن و سبک‌تر برای اکثر موارد. انتخاب درست فرمت، تأثیر مستقیمی روی سرعت بارگذاری و کیفیت نمایش سایت دارد.