چگونه یک فرمت عکس مناسب برای سایت پیدا کنیم؟

تحریریه منتوریکس
تحریریه منتوریکس
11:13، 1400/03/16
چگونه یک فرمت عکس مناسب برای سایت پیدا کنیم؟
1 رای    میانگین 5/5
لطفا شما هم امتیاز بدهید!

چگونه یک فرمت عکس مناسب برای سایت پیدا کنیم؟


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

حجم تصویر

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

  • از CSS Effects  و Css Animations می‌توان برای ایجاد Asset های بدون وابستگی به رزولوشن استفاده کرد. به این ترتیب تصاویر در هر رزولوشن و سطح بزرگ‌نمایی، ظاهری شارپ و زیبا دارند و برای این کار فقط به چند بایت فضا نیاز است.
  • با کمک Web Fonts می‌توانید از زیبایی فونت‌ها لذت ببرید و در عین حال از قابلیت تغییر اندازه، تغییر فونت و جستجو در میان فونت‌های مختلف نیز بهره‌مند شوید.

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

از فرمت مناسب برای وبسایت خود استفاده کنید

اگر از این بابت اطمینان دارید که در وبسایت شما به عکس لزوماً نیاز است، این کار را باید با دقت تمام انجام دهید.
https://web-dev.imgix.net/image/admin/dJuB2DQcbhtwD5VdPVlR.png?auto=format&w=650

  • وکتورهای گرافیکی از خطوط، نقاط و چندضلعی‌ها برای ایجاد یک تصویر استفاده می‌کنند
  • رستر گرافیک به ازای هر پیکسل عکس، یک اینکد ایجاد می‌کند

هر یک از این فرمت‌ها، دارای مزایا و معایب منحصر‌به‌فرد هستند. از فرمت وکتور برای تصاویری که شامل اشکال هندسی ساده هستند می‌توان استفاده کرد. لوگوها، متن‌ها یا آیکون‌ها را به این ترتیب می‌توان با وکتور ارائه داد. وکتور اشکال را به‌صورت شارپ نشان می‌دهد. به این ترتیب در تنظیمات رزولوشن مختلف و همچنین شرایط بزرگ‌نمایی، کیفیت این تصاویر کاهش پیدا نمی‌کند. همین مسئله باعث می‌شود تا وکتورها برای نمایشگرهایی با رزولوشن بالا و همچنین Assetهایی که باید در ابعاد مختلف نشان داده شوند، مناسب باشند.
با تمام این مزایا، استفاده از وکتور در موارد پیچیده دچار مشکل می‌شود. به‌عنوان مثال در تصاویر، میزان مارک‌آپ‌های SVG که بخواهد تمام اشکال را توصیف کند، به طور بازدارنده‌ای بالا است. در نهایت خروجی تصویر شما چیزی شبیه به یک نقاشی واقع‌گرایانه خواهد بود و شباهتی به یک تصویر واقعی ندارد. در چنین مواردی، باید از تصویر رستر در فرمت‌هایی همانند PNG، JPEG یا WebP استفاده کنید.
تصاویر رستر همانند تصاویر وکتور نیستند که به رزولوشن وابستگ نداشته باشند. به همین خاطر کیفیت آن‌ها خیلی بالا نیست. زمانی که روی یک تصویر رستر بزرگ‌نمایی انجام دهید، متوجه می‌شوید که لبه‌های تصویر ناخوانا و چهارخونه می‌شوند. در نتیجه شما باید چندین ورژن از یک تصویر رستر را در رزولوشن‌های مختلف ذخیره کنید تا تصویر نهایی برای کاربر به بهترین شکل ممکن نمایش داده شود.

بیشتر بخوانید: چگونه بفهمم عکس‌های سایت ابعاد مناسب دارد؟

مفهوم نمایشگرهای با رزولوشن بالا

 به‌صورت کلی دو نوع پیکسل مختلف وجود دارد: پیکسل CSS و پیکسل دیوایس یا همان دستگاه. یک پیکسل CSS به‌صورت مستقیم می‌تواند با یک یا چند پیکسل دستگاه در ارتباط باشد. خب این چه فایده‌ای دارد؟ این بدان معناست که هرچه پیکسل‌های دستگاه یا همان نمایشگر بیشتر باشد، جزئیات محتوا بر روی صفحه نمایشگر بهتر نشان داده می‌شود.
https://web-dev.imgix.net/image/admin/oQV7qJ9fUMkYsKlUMrL4.png?auto=format&w=500
دستگاه‌هایی که دارای HighDPI یا همان HiDPI هستند، نتایج بسیار زیبایی را به نمایش می‌گذارند. البته این مسئله منوط به آن است که Asset تصویر وبسایت شما نیز کیفیت بالایی داشته باشد تا بتوان از کیفیت صفحه‌ نمایشگر HiDPI بهره‌مند شد. خوشبختانه تصاویر وکتور دقیقاً برای این کار مناسب هستند. آن‌ها در هر رزولوشنی با بیشترین کیفیت و جزئیات رندر می‌شوند. البته در چنین مواقعی شما باید بهای این رندر باکیفیت را پرداخت کنید؛ اما مقدار Asset با مقدار یک تصویر معمولی یکسان است ولی در عین حال ارتباطی با رزولوشن ندارد. پس می‌توانید با کمک وکتور به بهترین نتیجه در نمایشگرهای HiDPI دست پیدا کنید.

مفهوم نمایشگرهای با رزولوشن بالا

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

رزولوشن نمایشگر تعداد کل پیکسل اندازه فایل بدون فشرده‌سازی به ازای 4 بایت در هر پیکسل
1x 10،000 40،000 بایت
2x 40،000 160،000 بایت
3x 90،000 360،000 بایت

زمانی که ما رزولوشن صفحه نمایشگر فیزیکی را 2 برابر کنیم، تعداد سطر‌های طول و کنار عرض 2 برابر می‌شود. به این ترتیب در نهایت تعداد پیکسل‌های کلی 4 برابر خواهد شد. خب از این جدول چه نتیجه‌‌ای می‌گیریم؟
یک نمایشگر با رزولوشن بالا می‌تواند به شما کمک کند تا تصاویری زیبا را مشاهده کنید و این یک قابلیت بسیار مطلوب است؛ اما از طرف دیگر برای نمایش تصاویر باکیفیت در نمایشگر با رزولوشن بالا، تصاویر شما نیز باید رزولوشن بالایی داشته باشند. از‌این‌رو:
•    تا حد امکان از وکتورها استفاده کنید. وکتورها وابستگی به رزولوشن ندارند و در هر حالتی تصاویری شارپ را به نمایش در می‌آورند
•    اگر از تصاویر رستر استفاده می‌کنید، بهتر است تصاویر ریسپانسیو را جایگزین کنید

قابلیت فرمت‌های مختلف تصاویر رستر

قابلیت فرمت‌های مختلف تصاویر رستر

علاوه‌بر میزان متفاوت فشرده‌سازی، فرمت‌های مختلف تصاویر رستر دارای قابلیت‌های متفاوتی همانند انیمیشن و کانال‌های شفاف (transparency alpha channels) هستند. در نتیجه باید بر اساس نیازمندی‌های بصری و نیازمندی‌های عملیاتی وبسایت خود، فرمت مناسب را انتخاب کنید.

فرمت    قابلیت شفافیت قابلیت انیمیشن متحرک اجرا بر روی کدام مرورگر
PNG    دارد    ندارد    تمام مرورگرها
JPEG    ندارد    ندارد    تمام مرورگرها
WebP     دارد    دارد    بر روی مرورگرهای مدرن و جدید

فرمت‌های PNG و JPEG جزء فرمت‌های جهانی تصاویر رستر هستند. به علاوه اینکه برخی از مرورگرهای جدید و به روز از فرمت جدیدی با نام WebP استفاده می‌کنند. WebP قادر به فشرده‌سازی بیشتر با کمترین میزان کاهش کیفیت است و در نتیجه عملکرد بهتری دارد. با توجه به تمامی این موارد، شما کدام فرمت را برای وبسایت خود انتخاب می‌کنید؟
فرمت WebP در مقایسه با فرمت‌های قدیمی، فشرده‌سازی بهتری دارد، پس در صورت امکان بهتر است از آن استفاده کنید. همچنین می‌توانید از WebP در کنار یک تصویر دیگر به‌عنوان فال – بک استفاده کنید. با وجود این اگر قصد استفاده از فرمت‌های قدیمی را دارید، ملاحظات زیر را در نظر داشته باشید:

1. به انیمیشن متحرک در تصاویر خود نیاز دارید؟ از المان video استفاده کنید

  • Gif چطور؟ GIF پالت رنگ را به 256 رنگ محدود می‌کند و همین مسئله باعث می‌شود تا سایز آن در مقایسه با مقایسه با video افزایش پیدا کند.

2.    آیا باید در رزولوشن بالا کیفیت عکس را در حالت مطلوب حفظ کنید؟ از PNG استفاده نمایید

  • PNG از هیچ‌گونه الگوریتم فشرده‌سازی برای کاهش سایز پالت رنگ استفاده نمی‌کند. در نتیجه تصاویر PNG کیفیت بسیار مطلوبی دارند؛ اما هزینه این کیفیت مطلوب را باید با سایز بیشتر پرداخت کنید. بهتر است انتخابی عاقلانه و منطقی داشته باشید.
  • اگر Asset تصویری شما بیشتر شامل اشکال هندسی می‌شود، آن را به یک وکتور با فرمت SVG تبدیل کنید.
  • اگر Asset شما شامل فایل متنی می‌شود، درباره استفاده از آن تجدید نظر کنید. اگر از متن در تصویر استفاده کنید، متن شما دیگر قابل انتخاب کردن، قابل جستجو کردن و قابل بزرگ‌نمایی نخواهد بود. اگر به‌خاطر برندینگ یا هر دلیل دیگر می‌خواهید تصویر شما ظاهری شخصی‌سازی‌شده داشته باشد، می‌توانید از Web Font استفاده نمایید.

3.    آیا شما در حال بهینه‌سازی یک تصویر، یک اسکرین‌شات یا چنین تصاویری هستید؟ از JPEG استفاده کنید

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

در نهایت باید تأکید کنیم که از WebView برای رندر محتوا در platform-specific application خود استفاده کنید. فقط در چنین حالتی می‌توانید کنترل کامل بر مشتری خود داشته باشید و به‌صورت انحصاری از WebP استفاده نمایید. فیسبوک و بسیاری از وبسایت‌های دیگر از WebP برای استفاده از تصاویر در تمامی بخش‌های وبسایت خود استفاده می‌کنند. این فرمت در استفاده از منابع به شدت صرفه‌جویی می‌کند.

فرمت عکس یکی از عوامل اثرگذار در تجربه کاربری و در نتیجه سئو سایت است. اگر دوست دارید در این زمینه بیشتر مطالعه کنید، سری به مقالات core web vitals منتوریکس بزنید.

از طرفی اگر برای کسب‌وکارتان نیاز به مشاوره دیجیتال مارکتینگ دارید یا می‌خواهی وضعیت وب‌سایتتان را از نظر جدیدترین فاکتورهای رتبه‌بندی گوگل بسنجید، با ما تماس بگیرید.

تحریریه منتوریکس
تحریریه منتوریکس

این مطالب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.

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

ما نظرات و سوالات شما را با دقت می‌خوانیم و پاسخ می‌دهیم
نظرات تعداد کاراکترهای باقی مانده: 300
انصراف