انتخاب بهترین فرمت تصاویر برای سایت

انتخاب بهترین فرمت تصاویر، اولین قدم در فرایند بهینه‌سازی تصاویر برای داشتن یک سایت سریع است.

انتخاب بهترین فرمت تصاویر برای سایت

نکاتی قبل از استفاده از عکس‌ها و تصاویر در وب

اولین سؤالی که باید از خود بپرسید این است که آیا در مکان موردنظر شما وجود یک تصویر ضروری است و در رسیدن به هدف کمکی می‌کند یا خیر؟ یک طراحی خوب باید علاوه بر ظاهر بصری بهینه و سریع نیز باشد، به همین دلیل اگر بتوانید یک عکس غیرضروری را حذف کنید (که اغلب حجم بیشتری نسبت به HTML، CSS، جاوا اسکریپت و سایر دارایی‌های صفحه نیاز دارد) آنگاه بهترین استراتژی بهینه‌سازی را استفاده کرده‌اید. در طرف دیگر، یک تصویر در جای مناسب خودش می‌تواند اطلاعاتی بیشتر از هزار کلمه را منتقل کند، بنابراین یافتن این تعادل به عهده شماست.

دومین مرحله از فرایند انتخاب تصویر مناسب برای سایت یافتن روش‌های کارآمدتر و فناوری‌های جدیدتر برای جایگزینی تصاویر در وب‌سایت است مثلاً در ادامه ۲ مورد کاربردی از این جایگزین‌ها را معرفی می‌کنیم:

  • جلوه‌های CSS (مانند سایه‌ها یا گرادیان‌ها) و انیمیشن‌های CSS را می‌توان برای تولید دارایی‌های مستقل از کیفیت و وضوح استفاده کرد که همیشه در هر رزولوشن و سطح زوم واضح به نظر می‌رسند.
  • فونت‌های وب استفاده از حروف نوشتاری زیبا را در عین حفظ توانایی انتخاب، جستجو و تغییر اندازه متن امکان‌پذیر می‌سازند و بهبود قابل‌توجهی در بهینه‌سازی و سرعت سایت ایجاد خواهند کرد.

سومین نکته‌ای که باید بدان توجه کنید عدم استفاده از تصاویر حاوی متن بجای متون است. به دلایل زیر نباید از تصاویر حاوی متن به جای خود متن استفاده کنید:

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

انتخاب فرمت مناسب برای تصاویر در وب

اگر با تمام توضیحات بالا مطمئن هستید که انتخاب تصویر در محتوای وب بهترین گزینه است، نوبت له آن رسیده است که با دقت فرمت تصویر مناسب را برای این کار انتخاب کنید.

Zoomed-in vector image (L) raster image (R)
بزرگنمایی یک تصویر برداری و یک تصویر  پیکسلی
تفاوت بزرگنمایی یک عکس برداری و یک عکس پیکسلی
  • گرفیک وکتور(Vector graphics): تصاویر برداری از خطوط، نقاط و چندضلعی ها برای نمایش یک تصویر استفاده می کند.
  • گرافیک رَستر (Raster graphics): تصاویر پیکسلی یک تصویر را با رمزگذاری مقادیر جداگانه هر پیکسل در یک شبکه مستطیلی نشان می دهد.

هر قالب مجموعه‌ای از مزایا و معایب خاص خود را دارد. فرمت‌های برداری برای تصاویری که از اشکال هندسی ساده مانند لوگو، متن یا نمادها تشکیل شده‌اند، مناسب هستند. تصاویر برداری هرچقدر که بزرگ هم باشند نتایج واضحی را ارائه می‌دهند که آنها را به فرمتی ایدئال برای صفحه‌نمایش‌های با وضوح بالا و دارایی‌هایی تبدیل می‌کند که باید در اندازه‌های مختلف نمایش داده شوند.

بااین‌حال، فرمت‌های برداری زمانی که تصویر پیچیده می‌شود (مانند عکس) کاربرد خود را از دست می‌دهند، در این حالت از فرمت‌های تصویر پیکسلی یا raster مانند PNG، JPEG یا WebP استفاده می‌شود.

وقتی یک تصویر پیکسلی را بزرگ می‌کنید، گرافیک‌های ناهموار و تار خواهید دید. در نتیجه، ممکن است لازم باشد چندین نسخه از یک تصویر Raster را با وضوح‌های مختلف ذخیره کنید تا تجربه‌ی کاربری خوشایندی برای کاربران ایجاد کنید.

صفحه نمایش با وضوح بالا

دو نوع مختلف از پیکسل‌ها وجود دارد: پیکسل‌های CSS و پیکسل‌های دستگاه. یک پیکسل CSS ممکن است مستقیماً با یک پیکسل دستگاه مطابقت داشته باشد یا ممکن است توسط چندین پیکسل دستگاه پشتیبانی شود. هرچه تعداد پیکسل‌های دستگاه بیشتر باشد، جزئیات محتوای نمایش‌داده‌شده روی صفحه‌نمایش نیز بیشتر می‌شود.

تفاوت بین پیکسل های CSS و پیکسل های دستگاه.چه فرمت هایی برای فایل های وب مناسب است
تفاوت بین پیکسل های CSS و پیکسل های دستگاه.

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

درحالی‌که تصاویر پیکسلی چالش بسیار بزرگ‌تری را ایجاد می‌کنند زیرا داده‌های تصویر را بر اساس هر پیکسل کدگذاری می‌کنند؛ بنابراین هرچه تعداد پیکسل‌ها بیشتر باشد، اندازه فایل یک تصویر پیکسلی بزرگ‌تر است. به‌عنوان‌مثال، جدول زیر تفاوت بین یک عکس نمایش‌داده‌شده در 100×100 (CSS) پیکسل را نشان می‌دهد.

رزولوشن صفحه نمایشتعداد کل پیکسل‌هااندازه فایل فشرده نشده
4 بایت برای هر پیکسل
1x100×100= 10,00040,000 بایت
2x100x100x4 = 40,000160,000 بایت
3x100x100x9 = 90,000360,000 بایت

وقتی وضوح صفحه فیزیکی را دوبرابر می‌کنیم، تعداد کل پیکسل‌ها چهار برابر افزایش می‌یابد: دوبرابر تعداد پیکسل‌های افقی، دوبرابر تعداد پیکسل‌های عمودی.

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

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

فرمت‌های مختلف تصاویر پیکسلی (Raster)

علاوه بر الگوریتم‌های فشرده‌سازی مختلف (با اتلاف و بدون اتلاف) فرمت‌های مختلف تصویری از ویژگی‌های مختلفی مانند کانال‌های انیمیشن و شفافیت (آلفا) پشتیبانی می‌کنند. در نتیجه، انتخاب «فرمت مناسب» برای یک تصویر خاص، ترکیبی از نتایج بصری موردنظر و الزامات کاربردی است.

قالبپشتیبانی از Transparency
شفافیت
AnimationBrowser
PNGYesNoAll
JPEGNoNoAll
WebPYesYesAll

PNG و JPEG دوتا از پر استفاده‌ترین فرمت تصاویر وب هستند. علاوه بر این فرمت‌ها، مرورگرهای مدرن از قالب جدیدتر WebP پشتیبانی می‌کنند که فشرده‌سازی کلی بهتر و ویژگی‌های بیشتری را ارائه می‌دهد؛ حال سوال اینجاست که از کدام فرمت تصویری در وب باید استفاده کنید؟

فرمت WebP عموماً فشرده‌سازی بهتری نسبت به فرمت‌های قدیمی ارائه می‌دهد و باید در صورت امکان از آن استفاده کرد. شما می‌توانید از WebP به همراه یک فرمت تصویر دیگر به‌عنوان نسخه بازگشتی استفاده کنید.

پشتیبانی از فرمت تصویری webp در مروگرهای مختلف
پشتیبانی از webp در مروگرهای مختلف

دستورالعمل انتخاب فرمت عکس مناسب

با توجه به تمامی موارد و نکات گفته شده برای انتخاب بهترین فرمت عکس در وب سایت خود دستورالعمل زیر را برای هر مکانی که قصد استفاده از یک گرافیک را دارید رعایت کنید تا علاوه بر تجربه کاربری مناسب بهترین کارایی و سرعت را داشته باشید.

  • اگر به انیمیشن نیاز دارید؟ از عناصر <video> استفاده کنید. GIF چطور؟ GIF پالت رنگ را حداکثر به ۲۵۶ رنگ محدود می‌کند و اندازه فایل به طور قابل‌توجهی بزرگ‌تر از عناصر <video> ایجاد می‌کند.
  • اگر نیاز به حفظ جزئیات دقیق با بالاترین وضوح دارید؟ از PNG استفاده کنید. PNG هیچ الگوریتم فشرده‌سازی با اتلاف را فراتر از انتخاب اندازه پالت رنگ اعمال نمی‌کند. در نتیجه، بالاترین کیفیت تصویر را تولید می‌کند، اما با هزینه‌ای که حجم فایل بسیار بالاتری نسبت به سایر فرمت‌ها دارد. باید عاقلانه استفاده کنید.
  • اگر دارایی تصویر حاوی تصاویری متشکل از اشکال هندسی است، آن را به فرمت برداری (SVG) تبدیل کنید!
  • اگر تصویر حاوی متن است، بهتر است تجدیدنظر کنید. متن موجود در تصاویر قابل انتخاب، جستجو یا “بزرگ‌نمایی” نیست. اگر نیاز به ارائه یک ظاهر سفارشی دارید (به دلیل نام تجاری یا دلایل دیگر)، به‌جای آن از فونت وب استفاده کنید.
  • اگر یک عکس، اسکرین‌شات یا یک تصویر را بهینه می‌کنید؟ از JPEG استفاده کنید. JPEG از ترکیبی از بهینه‌سازی با اتلاف و بدون ضرر برای کاهش حجم فایل دارایی تصویر استفاده می‌کند. چندین سطح کیفیت JPEG را امتحان کنید تا بهترین کیفیت را در مقابل حجم فایل برای دارایی خود بیابید.
  • در نهایت با توجه به اینکه WebP همه قابلیت های jpg و png را دارد و می‌تواند از انیمیشن نیز پشتیابانی کند و علاوه بر آن کیفیت بالاتر و حجم کمتری را به ارمغان می‌اورد می‌توانید از ان در تمامی حالات بالا استفاده کنید.

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

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