SVG | PNG | JPG | GIF: کدام‌یک را در طراحی سایت استفاده کنیم؟

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

درآمدی بر فرمت SVG
SVG یک فرمت مبتنی بر XML برای ذخیره‌سازی تصاویر وکتور است که بر خلاف بسیاری از فرمت‌های معروف که از داده‌های پیکسلی برای نمایش تصاویر استفاده می‌کنند، SVG از نقاطی به نام بردار (وکتور) تشکیل شده است که در یک شبکهٔ هماهنگ دوبُعدی ترسیم شده‌اند (اکثر طراحان حرفه‌ای از نرم‌افزارهای مخصوص طراحی تصاویر وکتور مانند Adobe Illustrator استفاده می‌کنند اما برای طراحی‌های ساده‌تر می‌توان از ابزارهای رایگان و تحت وب مانند Method Draw استفاده کرد.)

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

این فرمت تنها برای استفاده در تصاویر سادهٔ گرافیکی مناسب است و برای هر موقعیتی کارآمد نیست! به عنوان مثال، نمی‌توان در تصاویر با جزئیات بالا از این فرمت استفاده کرد و در چنین شرایطی بهتر است از فرمت‌های پیکسلی مانند PNG استفاده می‌شود.

تصاویر با فرمت SVG مستقل از رزولوشن هستند اما تصاویر پیکسلی دارای رزولوشنی ثابت می‌باشند و در صورتی که همهٔ عوامل دیگر برابر باشند، تصاویر دارای پیکسل بیشتر، صفحه را کُندتر می‌کنند. گاهی‌ اوقات بهتر است به مرورگر این اجازه را بدهید که تصویر را اصطلاحاً Rescale کند. به عبارت دیگر، اگر تعداد پیکسلی که برای یک دستگاه ارسال می‌شود بیشتر از تعداد پیکسل نمایشی خود دستگاه باشد، خودِ مرورگر آن را بهینه می‌کند. در کل بهتر است که شما تصاویر را بهینه‌سازی کنید به طوری که برای هر دستگاه تصویری بالاتر از رزولوشن مورد نیاز ارسال نشود. 

درآمدی بر فرمت PNG
فرمت SVG برای استفاده در شکل‌های هندسی بسیار مناسب است در حالی که JPG برای تصاویر هنری مناسب‌تر است. با این حال، بعضی اوقات برای یک شکل هنری نمی‌توان فرمت SVG پیدا کرد و تأثیرات فشرده‌سازی JPG باعث بی‌کیفیت شدن تصویر در بخش‌های دارای رنگ‌های فِلَت یا خطوط هندسی می‌شود به علاوه اینکه ممکن است که تصویر شما دارای پس‌زمینهٔ شفاف باشد که در این مواقع بهترین گزینه PNG است که در دو حالت PNG-8 و PNG-24 عرضه شده است.

PNG-8 از یک پالت رنگی که تا 256 رنگ را پشتیبانی می‌کند استفاده کرده که یکی از آن‌ها رنگ شفاف (Transparent) است اما این شفافیت باینری است. به عبارتی، یا بخشی از شکل کاملاً شفاف است یا کاملاً مات و هیچ درجه‌بندی جزئی برای آن وجود ندارد. اگر یک تصویر PNG-8 دارای پیکسل‌های روشنی باشد که روی یک پس‌زمینهٔ تیره قرار داشته باشد، لبه‌های ناهمواری ایجاد شده که به وضوح نشان داده می‌شوند اما قابلیت خوب این فرمت حجم نسبتاً مناسب آن است.

PNG-24 از پالت رنگی کامل و شفافیت دارای درجه‌بندی بهره می‌برد و در نتیجه تصاویر با وضوح و شفافیت در این فرمت خود را نشان می‌دهند و تنها فرمتی است که برای نشان دادن شفافیت به طور کامل به کار می‌رود اما نکتهٔ منفی این فرمت، حجم بالای آن است.

اگر واقعاً مجبور هستید تا از فرمت PNG استفاده کنید، بهتر است از PNG-8 استفاده کرده و سعی کنید که تا حد امکان پالت رنگی خود را محدود کنید و فقط در مواقعی از PNG-24 استفاده کنید که تصویر مورد نظر دارای شفافیت درصدی است (همچنین اگر شفافیت در تمام عکس یکسان است، می‌توانید از فرمت کم‌حجم‌تر و کمی کدنویسی CSS استفاده کنید.)

درآمدی بر فرمت GIF
فرمت GIF در دههٔ 1990 خیلی استفاده می‌شد اما امروزه دلیل استفاده نکردن از این فرمت خیلی واضح است و آن هم چیزی نیست جز اینکه GIF باعث افزایش حجم تصویر حتی بیشتر از یک ویدئوی HTML5 می‌شود (اگر واقعاً مجبورید که از تصاویر GIF استفاده کنید، حتماً به حجم صفحه توجه داشته باشید.)

بارگذاری تصاویر JPG به صورت تدریجی
روش بارگذاری تصاویر JPG اصولاً بدین صورت است که هر بخش از تصویر از بالا به پایین دانلود می‌شود و به صورت بخش به بخش روی صفحه به نمایش درمی‌آید اما می‌توان آن‌ها را به صورت تدریجی بارگذاری کرد به این صورت که ابتدا تصویر تار بارگذاری می‌شود و پس از چند ثانیه تصویر واضح و نهایی نشان داده می‌شود.

این روش هیچ تأثیری روی سرعت بارگذاری تصویر ندارد اما به خاطر تأثیر ادراکی روی مخاطب سایت، به نظر می‌رسد که سرعت بارگذاری سایت بیشتر است و بالتبع تجربهٔ کاربری بهتری برای وب رقم خواهد خورد. چشم انسان در یک زمان تنها می‌تواند روی یک بخش بسیار کوچک متمرکز شود و از همین روی، از دید کاربران بارگذاری تدریجی تصاویر از تار به کاملاً شفاف سریع‌تر از حالت بارگذاری از بالا به پایین به نظر می‌رسد که این صرفاً یک خطای شناختی است!