انتخاب بهترین فرمت تصاویر برای سایت
آنچه در این مقاله می‌خوانیم
نکاتی قبل از استفاده از عکس‌ها و تصاویر در وب
اولین سؤالی که باید از خود بپرسید این است که آیا در مکان موردنظر شما وجود یک تصویر ضروری است و در رسیدن به هدف کمکی می‌کند یا خیر؟ یک طراحی خوب باید علاوه بر ظاهر بصری بهینه و سریع نیز باشد، به همین دلیل اگر بتوانید یک عکس غیرضروری را حذف کنید (که اغلب حجم بیشتری نسبت به HTML، CSS، جاوا اسکریپت و سایر دارایی‌های صفحه نیاز دارد) آنگاه بهترین استراتژی بهینه‌سازی را استفاده کرده‌اید. در طرف دیگر، یک تصویر در جای مناسب خودش می‌تواند اطلاعاتی بیشتر از هزار کلمه را منتقل کند، بنابراین یافتن این تعادل به عهده شماست.
دومین مرحله از فرایند انتخاب تصویر مناسب برای سایت یافتن روش‌های کارآمدتر و فناوری‌های جدیدتر برای جایگزینی تصاویر در وب‌سایت است مثلاً در ادامه ۲ مورد کاربردی از این جایگزین‌ها را معرفی می‌کنیم:
سومین نکته‌ای که باید بدان توجه کنید عدم استفاده از تصاویر حاوی متن بجای متون است. به دلایل زیر نباید از تصاویر حاوی متن به جای خود متن استفاده کنید:
انتخاب فرمت مناسب برای تصاویر در وب
اگر با تمام توضیحات بالا مطمئن هستید که انتخاب تصویر در محتوای وب بهترین گزینه است، نوبت له آن رسیده است که با دقت فرمت تصویر مناسب را برای این کار انتخاب کنید.
هر قالب مجموعه‌ای از مزایا و معایب خاص خود را دارد. فرمت‌های برداری برای تصاویری که از اشکال هندسی ساده مانند لوگو، متن یا نمادها تشکیل شده‌اند، مناسب هستند. تصاویر برداری هرچقدر که بزرگ هم باشند نتایج واضحی را ارائه می‌دهند که آنها را به فرمتی ایدئال برای صفحه‌نمایش‌های با وضوح بالا و دارایی‌هایی تبدیل می‌کند که باید در اندازه‌های مختلف نمایش داده شوند.
بااین‌حال، فرمت‌های برداری زمانی که تصویر پیچیده می‌شود (مانند عکس) کاربرد خود را از دست می‌دهند، در این حالت از فرمت‌های تصویر پیکسلی یا raster مانند PNG، JPEG یا WebP استفاده می‌شود.
وقتی یک تصویر پیکسلی را بزرگ می‌کنید، گرافیک‌های ناهموار و تار خواهید دید. در نتیجه، ممکن است لازم باشد چندین نسخه از یک تصویر Raster را با وضوح‌های مختلف ذخیره کنید تا تجربه‌ی کاربری خوشایندی برای کاربران ایجاد کنید.
صفحه نمایش با وضوح بالا
دو نوع مختلف از پیکسل‌ها وجود دارد: پیکسل‌های CSS و پیکسل‌های دستگاه. یک پیکسل CSS ممکن است مستقیماً با یک پیکسل دستگاه مطابقت داشته باشد یا ممکن است توسط چندین پیکسل دستگاه پشتیبانی شود. هرچه تعداد پیکسل‌های دستگاه بیشتر باشد، جزئیات محتوای نمایش‌داده‌شده روی صفحه‌نمایش نیز بیشتر می‌شود.
صفحه‌نمایش‌های باکیفیت خروجی زیبایی ایجاد می‌کنند اما نکته مهم برای دریافت خروجی باکیفیت استفاده از عکس‌های باکیفیت است. تصاویر برداری برای این کار ایده‌آل هستند، زیرا می‌توانند با هر وضوحی نمایش داده شوند و از کیفیت آنها کم نشود درحالی‌که تصاویر پیکسلی در صفحات نمایشگر بزرگتر و باکیفیت‌تر یا کوچک‌تر نمایش داده می‌شوند و یا کیفیت خود را از دست می‌دهند.
درحالی‌که تصاویر پیکسلی چالش بسیار بزرگ‌تری را ایجاد می‌کنند زیرا داده‌های تصویر را بر اساس هر پیکسل کدگذاری می‌کنند؛ بنابراین هرچه تعداد پیکسل‌ها بیشتر باشد، اندازه فایل یک تصویر پیکسلی بزرگتر است. به‌عنوان‌مثال، جدول زیر تفاوت بین یک عکس نمایش‌داده‌شده در 100×100 (CSS) پیکسل را نشان می‌دهد.
| رزولوشن صفحه نمایش | تعداد کل پیکسل‌ها | اندازه فایل فشرده نشده 4 بایت برای هر پیکسل |
|---|---|---|
| 1x | 100×100= 10,000 | 40,000 بایت |
| 2x | 100x100x4 = 40,000 | 160,000 بایت |
| 3x | 100x100x9 = 90,000 | 360,000 بایت |
وقتی وضوح صفحه فیزیکی را دوبرابر می‌کنیم، تعداد کل پیکسل‌ها چهار برابر افزایش می‌یابد: دوبرابر تعداد پیکسل‌های افقی، دوبرابر تعداد پیکسل‌های عمودی.
صفحه‌نمایش‌های با وضوح بالا شما را قادر می‌سازد تصاویر زیبایی ارائه دهید که می‌تواند یک ویژگی عالی سایت شما باشد. بااین‌حال، صفحه‌نمایش‌های با وضوح بالا نیز به تصاویر با وضوح بالا نیاز دارند، بنابراین :
فرمت‌های مختلف تصاویر پیکسلی (Raster)
علاوه بر الگوریتم‌های فشرده‌سازی مختلف (با اتلاف و بدون اتلاف) فرمت‌های مختلف تصویری از ویژگی‌های مختلفی مانند کانال‌های انیمیشن و شفافیت (آلفا) پشتیبانی می‌کنند. در نتیجه، انتخاب «فرمت مناسب» برای یک تصویر خاص، ترکیبی از نتایج بصری موردنظر و الزامات کاربردی است.
| قالب | پشتیبانی از Transparency شفافیت | Animation | Browser |
|---|---|---|---|
| PNG | Yes | No | All |
| JPEG | No | No | All |
| WebP | Yes | Yes | All |
PNG و JPEG دوتا از پر استفاده‌ترین فرمت تصاویر وب هستند. علاوه بر این فرمت‌ها، مرورگرهای مدرن از قالب جدیدتر WebP پشتیبانی می‌کنند که فشرده‌سازی کلی بهتر و ویژگی‌های بیشتری را ارائه می‌دهد؛ حال سوال اینجاست که از کدام فرمت تصویری در وب باید استفاده کنید؟
فرمت WebP عموماً فشرده‌سازی بهتری نسبت به فرمت‌های قدیمی ارائه می‌دهد و باید در صورت امکان از آن استفاده کرد. شما می‌توانید از WebP به همراه یک فرمت تصویر دیگر به‌عنوان نسخه بازگشتی استفاده کنید.
دستورالعمل انتخاب فرمت عکس مناسب
با توجه به تمامی موارد و نکات گفته شده برای انتخاب بهترین فرمت عکس در وب سایت خود دستورالعمل زیر را برای هر مکانی که قصد استفاده از یک گرافیک را دارید رعایت کنید تا علاوه بر تجربه کاربری مناسب بهترین کارایی و سرعت را داشته باشید.