اولین سوالی که هنگام انتخاب یک عکس باید از خودتان بپرسید، این است که آیا تأثیری که می‌خواهید را بر روی مخاطب شما می‌گذارد یا نه؟ یک طراحی مطلوب در عین سادگی، شما را به هدفتان می‌رساند. اگر بتوانید منابع مصرفی یک عکس، یعنی حجم مصرفی آن در HTML، CSS، جاوا اسکریپت و دیگر Assets هایی که روی وبسایت شما قرار دارند را کاهش دهید، به یک استراتژی بهینه‌سازی مطلوب دست پیدا خواهید کرد.
به زبان ساده‌تر باید حجم تصویر را تا حد امکان کاهش دهید. فراموش نکنید که یک عکس می‌تواند تاثیری معادل هزاران کلمه را داشته باشد. پس از تأثیر تصاویر در وبسایت خود غافل نشوید و در عین حال تعادل را حفظ کنید. در ادامه شما را با روش‌هایی آشنا خواهیم کرد که می‌توانید به بهترین شکل به نتیجه مطلوب دست پیدا کنید. برای دریافت و انجام خدمات سئو سایت، می توانید روی منتوریکس حساب کنید.
- از CSS Effects و Css Animations می‌توان برای ایجاد Asset های بدون وابستگی به رزولوشن استفاده کرد. به این ترتیب تصاویر در هر رزولوشن و سطح بزرگ‌نمایی، ظاهری شارپ و زیبا دارند و برای این کار فقط به چند بایت فضا نیاز است.
- با کمک Web Fonts می‌توانید از زیبایی فونت‌ها لذت ببرید و در عین حال از قابلیت تغییر اندازه، تغییر فونت و جستجو در میان فونت‌های مختلف نیز بهره‌مند شوید.
به این ترتیب، از این پس اگر می‌خواهید یک متن را به یک فایل تصویری Encode کنید، در این کار تجدید نظر نمایید. داشتن یک تایپوگرافی منحصر‌به‌فرد برای طراحی مطلوب، برندینگ و همچنین به‌وجود‌آوردن خوانایی در وبسایت شما نیاز است.
در عین حال استفاده از متن در تصویر باعث می‌شود تا کاربر حس منفی را از وبسایت شما دریافت کند. متن در تصویر قابل انتخاب، قابل جستجو، قابل بزرگ‌نمایی و قابل دسترسی نیست و به‌صورت کلی برای دستگاه‌هایی که دارای DPI بالایی هستند، اصلاً مناسب نخواهد بود.
برای استفاده از Web Fonts، باید از یک سری بهینه‌سازی مخصوص به آن استفاده کنید؛ این راهکار تمام مشکلات شما در زمینه نشان‌دادن فایل متنی بر روی وبسایت شما را رفع خواهد کرد.
از فرمت مناسب برای وبسایت خود استفاده کنید
اگر از این بابت اطمینان دارید که در وبسایت شما به عکس لزوماً نیاز است، این کار را باید با دقت تمام انجام دهید.
- وکتورهای گرافیکی از خطوط، نقاط و چندضلعی‌ها برای ایجاد یک تصویر استفاده می‌کنند
- Raster graphics به ازای هر پیکسل عکس، یک encode ایجاد می‌کند
هر یک از این فرمت‌ها، دارای مزایا و معایب منحصر‌به‌فرد هستند. از فرمت وکتور برای تصاویری که شامل اشکال هندسی ساده هستند می‌توان استفاده کرد. لوگوها، متن‌ها یا آیکون‌ها را به این ترتیب می‌توان با وکتور ارائه داد. وکتور اشکال را به‌صورت شارپ نشان می‌دهد. به این ترتیب در تنظیمات رزولوشن مختلف و همچنین شرایط بزرگ‌نمایی، کیفیت این تصاویر کاهش پیدا نمی‌کند. همین مسئله باعث می‌شود تا وکتورها برای نمایشگرهایی با رزولوشن بالا و همچنین Assetهایی که باید در ابعاد مختلف نشان داده شوند، مناسب باشند.
با تمام این مزایا، استفاده از وکتور در موارد پیچیده دچار مشکل می‌شود. به‌عنوان مثال در تصاویر، میزان مارک‌آپ‌های SVG که بخواهد تمام اشکال را توصیف کند، به طور بازدارنده‌ای بالا است. در نهایت خروجی تصویر شما چیزی شبیه به یک نقاشی واقع‌گرایانه خواهد بود و شباهتی به یک تصویر واقعی ندارد. در چنین مواردی، باید از تصویر Raster در فرمت‌هایی همانند PNG، JPEG یا WebP استفاده کنید.
تصاویر Raster همانند تصاویر وکتور نیستند که به رزولوشن وابستگ نداشته باشند. به همین خاطر کیفیت آن‌ها خیلی بالا نیست. زمانی که روی یک تصویر Raster بزرگ‌نمایی انجام دهید، متوجه می‌شوید که لبه‌های تصویر ناخوانا و چهارخونه می‌شوند. در نتیجه شما باید چندین ورژن از یک تصویر Raster را در رزولوشن‌های مختلف ذخیره کنید تا تصویر نهایی برای کاربر به بهترین شکل ممکن نمایش داده شود.
بیشتر بخوانید: چگونه بفهمم عکس‌های سایت ابعاد مناسب دارد؟
مفهوم نمایشگرهای با رزولوشن بالا
به‌صورت کلی دو نوع پیکسل مختلف وجود دارد: پیکسل CSS و پیکسل دیوایس یا همان دستگاه. یک پیکسل CSS به‌صورت مستقیم می‌تواند با یک یا چند پیکسل دستگاه در ارتباط باشد. خب این چه فایده‌ای دارد؟ این بدان معناست که هرچه پیکسل‌های دستگاه یا همان نمایشگر بیشتر باشد، جزئیات محتوا بر روی صفحه نمایشگر بهتر نشان داده می‌شود.
دستگاه‌هایی که دارای HighDPI یا همان HiDPI هستند، نتایج بسیار زیبایی را به نمایش می‌گذارند. البته این مسئله منوط به آن است که Asset تصویر وبسایت شما نیز کیفیت بالایی داشته باشد تا بتوان از کیفیت صفحه نمایشگر HiDPI بهره‌مند شد. خوشبختانه تصاویر وکتور دقیقاً برای این کار مناسب هستند. آن‌ها در هر رزولوشنی با بیشترین کیفیت و جزئیات رندر می‌شوند. البته در چنین مواقعی شما باید بهای این رندر باکیفیت را پرداخت کنید؛ اما مقدار Asset با مقدار یک تصویر معمولی یکسان است ولی در عین حال ارتباطی با رزولوشن ندارد. پس می‌توانید با کمک وکتور به بهترین نتیجه در نمایشگرهای HiDPI دست پیدا کنید.
از طرف دیگر، اجرای تصاویر Raster در چنین شرایطی یک چالش بسیار بزرگ است. آن‌ها داده‌های هر پیکسل را encodes می‌کنند. از‌این‌رو افزایش تعداد پیکسل، باعث افزایش سایز و حجم تصویر Raster می‌شود. در جدول زیر، تفاوت بین یک Asset تصویری که با رزولوشن 100 در 100 CSS پیکسل به نمایش در می‌آید را به شما نشان خواهیم داد:
| رزولوشن نمایشگر | تعداد کل پیکسل | اندازه فایل بدون فشرده‌سازی به ازای 4 بایت در هر پیکسل |
| 1x | 10،000 | 40،000 بایت |
| 2x | 40،000 | 160،000 بایت |
| 3x | 90،000 | 360،000 بایت |
زمانی که ما رزولوشن صفحه نمایشگر فیزیکی را 2 برابر کنیم، تعداد سطر‌های طول و کنار عرض 2 برابر می‌شود. به این ترتیب در نهایت تعداد پیکسل‌های کلی 4 برابر خواهد شد. خب از این جدول چه نتیجه‌‌ای می‌گیریم؟
یک نمایشگر با رزولوشن بالا می‌تواند به شما کمک کند تا تصاویری زیبا را مشاهده کنید و این یک قابلیت بسیار مطلوب است؛ اما از طرف دیگر برای نمایش تصاویر باکیفیت در نمایشگر با رزولوشن بالا، تصاویر شما نیز باید رزولوشن بالایی داشته باشند. از‌این‌رو:
• تا حد امکان از وکتورها استفاده کنید. وکتورها وابستگی به رزولوشن ندارند و در هر حالتی تصاویری شارپ را به نمایش در می‌آورند
• اگر از تصاویر Raster استفاده می‌کنید، بهتر است تصاویر ریسپانسیو را جایگزین کنید
قابلیت فرمت‌های مختلف تصاویر Raster
علاوه‌بر میزان متفاوت فشرده‌سازی، فرمت‌های مختلف تصاویر Raster دارای قابلیت‌های متفاوتی همانند انیمیشن و کانال‌های شفاف (transparency alpha channels) هستند. در نتیجه باید بر اساس نیازمندی‌های بصری و نیازمندی‌های عملیاتی وبسایت خود، فرمت مناسب را انتخاب کنید.
| فرمت | قابلیت شفافیت | قابلیت انیمیشن متحرک | اجرا بر روی کدام مرورگر |
| PNG | دارد | ندارد | تمام مرورگرها |
| JPEG | ندارد | ندارد | تمام مرورگرها |
| WebP | دارد | دارد | بر روی مرورگرهای مدرن و جدید |
فرمت‌های PNG و JPEG جزء فرمت‌های جهانی تصاویر Raster هستند. به علاوه اینکه برخی از مرورگرهای جدید و به روز از فرمت جدیدی با نام 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 منتوریکس بزنید.
از طرفی اگر برای کسب‌وکارتان نیاز به مشاوره دیجیتال مارکتینگ دارید یا می‌خواهی وضعیت وب‌سایتتان را از نظر جدیدترین فاکتورهای رتبه‌بندی گوگل بسنجید، با ما تماس بگیرید.
این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.
انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وبسایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.