بنر گیف پر استفادهترین نوع از تبلیغات بصری در فضای اینترنت است و با وجود قدمت بالا، هنوز هم محبوب و پر استفاده است. یکی از دلایل این اتفاق پر کاربرد بودن ان است. بدین شکل که میتوانید از آن در وبسایت خود یا دیگر شبکههای اجتماعی استفاده کنید.
حال کاربری را تصور کنید که در جستجوی مطلب مورد نظر خود وارد وبسایتی میشود که شما قصد قرار دادن بنر خود بهعنوان تبلیغات را در ان دارید. اگر حجم بالایی را برای بنر خود در نظر گرفته باشید، به امید اینکه کاربر با دیدن کیفیت بالای بنر شما بهوجد آید و روی بنر شما کلیک کند، کاملا در اشتباه هستید.
عواملی که در صفحه وبسایت بسرعت بارگذاری شوند چشم کاربر را به خود جذب میکند ! هرچه میخواهد باشد!. لذا وقتی صفحه بارگذاری شود و بنر شما با حجم بالا پس از بارگذاری بقیه موارد به نمایش درآید. چه بسا کاربر اصلا نگاهی به آن نکند و دنبال چیزی که بخاطر آن وارد وبسایت شده برود. البته این بهاین معنا نیست که کیفیت را فدای حجم کنید. بلکه باید بنر خود را بطور هوشمندانه و بهینهای طراحی کنید که با حفظ کیفیت بالا، حجم پائینی داشته باشد.
در این مقاله به این پرسش پاسخ خواهیم داد. که چگونه در عین داشتن بنری با کیفیت، حجم آن را بهینه کنیم ؟
قبل از شروع، پیشنهاد میکنیم که مقاله، نحوه طراحی یک بنر گیف کلیک خور را بخوانید.
چگونه حجم بنر گیف را کنترل کنیم ؟
1- کنترل نرخ فریم
در واقع هر چیز متحرک اعم از فیلم، انیمیشن و بنرگیف از فریمها (عکسهای متوالی پشتهم) تشکیل شده و با حرکت این فریم ها شما تصاویر را بصورت فیلم مشاهده میکنید. حال این نرخ فریم ها در قسمت TimeLine فتوشاپ قابل مدیریت است.
اگر با Timeline فتوشاپ کار میکنید یا ویدئویی را با After Effect طراحی کرده و در فتوشاپ وارد کرده اید. سعی کنید از نرخ فریم مناسب استفاده کنید. هرچه تعداد فریم های جابجایی مطالب را پائینتر آورید حجم بنر گیف کاهش خواهد یافت.
بطور مثال : اگر بنر گیفی با محتوای زیاد دارید، سعی کنید تمام مطالب اسلاید اول را با یک حرکت در 3 فریم 0.03 ثانیهای، به اسلاید دوم جابجا کنید جابجا کنید. ولی اگر بنر گیف شما حجم و مطالب پائینی دارد میتوانید بصورت خط به خط یا المان به المان مطالب را ظاهر کنید. البته اگر عدد 0.03 ثانیه برای نرخ لود هر فریم تنظیم شود. میتواند به گیف شما حالت انتقال طبیعی را القا کند.
2- رنگ بندی
پالت رنگی که بنر گیف شمارا پوشش میدهد و بصورت جهانی استاندارد گذاری شده است. نهایتاً 256 رنگ را پوشش میدهد. بنابراین سعی کنید در طراحی خود از رنگ های Gradient استفاده نکنید و المانهارا بصورت تک رنگ بکار ببرید.
برای انجام این کار برای خود استراتژی طراحی کنید، ابتدا چندین کد رنگ مکمل و متناسب را انتخاب کنید و المانهای خود را محدود به آن رنگها کنید. همچنین رنگ وکتورهای خود را که قرار است در بنر بکار رود به آن رنگ ها تغییر دهید.
برای انجام این کار به یکی از چند سایتی که پیشنهادات پلت رنگی میدهند مانند coolors.co مراجعه کنید. یکی از پلت های مورد نظر خود را انتخاب کنید. سعی کنید پلت هایی را انتخاب کنید که در آن ها نهایتا از 6 یا 7 رنگ استفاده شده باشد.
3- ابعاد
هر چه ابعاد بنر شما بزرگ تر باشد قاعدتا پیکسل های بیشتری در واحد زمان بارگذاری خواهد شد. و در نتیجه حجم بنر گیف افزایش پیدا خواهد کرد. درباره بنرهای بزرگ تر احتمالا مجبور خواهید بود موارد 2 و 1 را شدیدتر اعمال کنید.
4- بهینه سازی
زمانی که بنر گیف خود را طراحی کردید و کار انیمیشن آن را در فتوشاپ به اتمام رساندید زمان بهینه سازی و ذخیره آن است. برای این کار میتوانید کلید ترکیبی Ctrl + Shift + Alt + S را فشار دهید یا گزینه Save As Web (Legacy) واقع در File < Export را بزنید. صفحهای برای شما نمایش داده میشود که تنظیمات زیر را در ستون سمت راست آن مشاهده میکنید.
در این قسمت میتوانید عملیات بهینه سازی را انجام دهید. برای یک بهینه سازی خوب میتوانید تنظیمات زیر را اعمال کنید.
- تب دوم را روی گزینه Selective تنظیم کنید.
- Colors را روی 256 قرار دهید.
- Web Snap گزینه ای برای بهینه سازی است، با افزایش Web Snap رنگ هایی که در پالت رنگ مشابه و نزدیکک به هم هستند ادغام میشوند و در بنر شما به یک رنگ مشابه در خواهند آمد که میتواند از حجم بنر گیف شما بکاهد.
- Lossy مقدار فشرده سازی یا به اصطلاح کمپرس سایت شما است. هرچه این مقدار را افزایش دهید از کیفیت و حجم بنر گیف شما کاسته میشود. مقدار 10 یا 20 برای گزینه Lossy ممکن است کیفیت را آن چنان نکاهد و در چشک کاربر بنری با کیفیت داشته باشید ولی روی کاهش حجم آن بسیار اثر گذار است.
- این دو گزینه را امتحان کنید مقدار های آن را بالا و پایین ببرید تا به بهترین حجم در کیفیت معقول دست پیدا کنید. در نهایت میتوانید بنر گیف خود را ذخیره کنید.