افزایش ترافیک سایت یک از آرزوهای هر صاحب کسب و کار است در مقایسه با موارد دیگر، تصاویر در اغلب موارد مهم‌ترین عاملی هستند که با اشغال کردن حدود ۶۰٪ از پهنای‌باند، باعث تأخیر در لود شدن صفحات می‌شوند و این موضوع باعث شده که تصاویر جای کار زیادی برای بهینه شدن داشته باشند. در این مقاله، روش‌هایی کاربردی را برای بهینه‌سازی تصاویر به‌منظور بالا بردن سرعت لود شدن وب‌سایت ارائه خواهیم کرد.
از شر تصاویر غیرضروری خلاص شوید
در ارتباط با تصاویر حتماً باید یک نکته را مد نظر داشت و آن هم این است که برای نمایش داده شدن، باید در مرورگر کاربری که از سایت شما بازدید می‌کند ابتدا دانلود شوند. اگرچه گفته می‌شود «۱ تصویر بیش از ۱۰۰۰ کلمه تأثیرگذار است!»، اما بهتر این است که از تصاویر کم‌تری استفاده کنید تا سرعت لود صفحات وب‌سایت خود را افزایش دهید. گاهی‌اوقات با حذف تصاویر غیرضروری و فکر کردن به راه‌کارهای دیگری برای ایجاد تأثیری مشابه تأثیر همان تصاویر، می‌توانیم به نتیجه و سرعت مطلوب‌تری برسیم.
استفاده‌ٔ اصولی از CSS
سی‌اس‌اس و قابلیت‌های جدید آن در نسخهٔ ۳ هم‌اکنون بر روی تمام مرورگرهای مدرن قابل‌اجرا است و از آنجایی که CSS3 تأثیر بسزایی در زمینهٔ ایجاد تصاویر دارد، بسیاری از چیزهایی که به عکس نیاز دارند، فقط با چند خط کدنویسی CSS قابل انجام و جایگزینی هستند؛ مثلاً سایه‌ها، شیب‌ها و منحنی‌ها، قسمت‌های شفاف‌تر و حتی انیمیشن‌ها را به‌سادگی با CSS3 می‌توان پیاده‌سازی کرد.
به‌کارگیری از Web Fonts
رندر کردن متن در داخل تصاویر اغلب ایدهٔ خوبی نیست چراکه لود شدن تصویر از پهنای باندی بیشتری استفاده می‌کند؛ علاوه بر این، متن داخل عکس قابلیت کپی شدن و ایندکس شدن توسط موتورهای جستجویی همچون گوگل را ندارد و با صفحه نمایش‌هایی با اندازه و تراکم پیکسلی مختلف، به‌خوبی تطابق نمی‌یابد.
تمام این مشکلات با استفاده از Web Fonts قابل‌اجتناب هستند و با استفاده از فونت‌های وب، شما به مجموعه‌ای از فونت‌های سفارشی بی‌پایان در طراحی صفحات وب خود دسترسی خواهید داشت و این در حالی است که پرفورمنس وب‌سایت شما در مقایسه با استفاده از تصاویر، به طرز قابل‌توجهی افزایش می‌یابد.
انتخاب کردن Format صحیح تصاویر
زمانی که دیگر هیچ راهی وجود نداشت و به یک عکس واقعی احتیاج داشتید و سی‌اس‌اس و فونت‌های وب گزینه‌های مناسبی برایتان نبودند، باید دست به‌کار شوید و فرمت مناسبی برای عکسی که می‌خواهید استفاده کنید را انتخاب کنید.
متأسفانه در بحث انتخاب عکس نمی‌توان یک فرمت را برگزید که در شرایط مختلف کاملاً درست و کارآمد باشد بلکه باید بادقت به هر عکس نگاه کرد و بهترین فرمت ممکن را برای آن برگزید. برای این منظور، یافتن پاسخ به سؤالات زیر می‌تواند به شما در انتخاب فرمت مناسب کمک کند:
۱. آیا تصویر از اشکال هندسی تشکیل شده است؟
زمانی که تصویر شما از خطوط، دایره‌ها و دیگر اشکال هندسی ساخته شده باشد، فرمت SVG بهترین انتخاب است و از آنجایی که این فرمت از نوع برداری است، فلذا تصاویری با استفاده از اشکال هندسی ایجاد می‌کند.
این فرمت برای ایجاد آیکون و لوگو انتخاب بسیار مناسبی است؛ وقتی فرمت SVG را برای تصویری انتخاب کردید، سایز تصویر لزوماً نباید کم و کوچک باشد بلکه تصاویری با فرمت SVG قابلیت این‌را دارند که بدون از دست دادن کیفیت، تغییر سایز پیدا کنند و این باعث می‌شود وابستگی‌ای به رزولوشن صفحه نمایش و تراکم پیکسلی نداشته و از این بابت‌ها محدود نباشند.
۲. آیا تصویر یک عکس یا اسکرین‌شات است؟
هنگامی تصویر دارای جزئیات زیادی است و به باقاعدگی و سادگی اشکال هندسی نیست، فرمت JPEG به احتمال زیاد گزینهٔ مناسبی است. اگرچه JPEG با استفاده از الگوریتم Lossy فشرده‌سازی می‌شود، اما وقتی ترکیب رنگ‌ها و جزئیات در یک تصویر زیاد باشند، JPEG تنها گزینهٔ موجود قابل‌استفاده است (اگر هنگام آپلود و استفاده از تصویر، کمی با کیفیت JPEG بازی کنید، اغلب به تناسب مناسبی میان کیفیت و سایز فایل دست پیدا می‌کنید.)
۳. آیا به تصویری با کیفیت و شفافیت بالا احتیاج دارید؟
زمانی که لازم دارید از عکسی با کیفیت و شفافیت بالا استفاده کنید دیگر فرمت JPEG را کنار بگذارید و به‌جای آن از فرمت PNG استفاده کنید.
مزیت PNG بر JPEG این است که فقط از الگوریتم‌های Lossless استفاده می‌کند و این باعث می‌شود زمانی‌که به حداکثر کیفیت تصویری احتیاج دارید و نمی‌خواهید جزئیات موجود در تصویر را از دست بدهید، فرمت PNG برایتان انتخاب مناسبی باشد (لازم به ذکر است که تمام این مزایا بهایی هم دارند و آن هم این است که فایل‌های PNG از نظر سایزی، فایل‌های نسبتاً بزرگی هستند و بنابراین فقط زمانی باید استفاده شوند که فرمت‌های دیگر کارایی ندارند.
درنهایت، درحین استفاده از فرمت PNG این را هم در نظر داشته باشید که از PNG-8 زمانی استفاده کنید که اصطلاحاً پالت رنگی کوچک‌تر و محدودتری دارید (حدود ۲۵۶ رنگ) و در صورتی که تعداد رنگ‌های بیشتری در تصویر موجود است، از PNG-24 استفاده کنید که این هم باز منجر به افزایش سایر تصویر می‌شود.
استفاده از انیمیشن
امروزه چندین روش مختلف برای ایجاد تصاویر انیمیشنی استفاده می‌شوند که عبارتند از:
ـ فرمت تصویری GIF یک راه‌حل بسیار معمول برای خلق تصاویر انیمیشنی است و ابزارهای بسیاری وجود دارند که به شما در ایجاد GIFهای انیمیشنی کمک می‌کنند و نکتهٔ دیگر این‌که این فرمت به‌خوبی توسط مرورگرها ساپورت می‌شود.
ـ فرمت SVG هم قابلیت‌هایی برای ایجاد تصاویر انیمیشنی ارائه می‌دهد، هرچند ایجاد این گونه تصاویر با این فرمت بسیار پرزحمت خواهد بود و به‌خوبی تصاویر GIF هم در مرورگرها ساپورت نمی‌شوند.
ـ با CSS3 خیلی اتفاقات در انیمیشن‌سازی ممکن شد؛ مسلماً این فرمت هم دارای محدودیت‌هایی در این زمینه است اما CSS3 می‌تواند گزینهٔ مناسبی برای ایجاد تصاویر انیمیشنی باشد.
البته به‌جز موارد ذکر شده، روش‌های بسیار دیگری هم برای ساخت انیمیشن وجود دارد که بررسی آن‌ها در حوصله و تمرکز این مطلب نمی‌گنجد اما از نقطه نظر بهینه‌سازی پرفورمنس وب‌سایت، هنگام استفاده از تصاویر، راه‌کارهای GIF ،SVG و CSS3 احتمالاً مؤثرترین و کارآمدترین روش‌ها برای ایجاد تصاویر انیمیشنی هستند.
بخوانید : تفاوت موشن گرافیک و انیمیشن
بهینه‌سازی تصاویر
ارائهٔ یک تصویر بهینه برای فرمت‌های فایلی متفاوت گاهی‌اوقات پرزحمت خواهد بود؛ برای این‌که نخواهید همواره اطلاعات و جزئیاتی را دربارهٔ فرمت‌ها و نحوهٔ ایجاد تغییر آن‌ها در ذهن داشته باشید، باید از ابزارهای تخصصی استفاده کنید و تاجایی‌که می‌توانید این پروسه را خودکار کنید.
منبع : سئو ویو
نظرات و سوالات کاربران