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

در مقایسه با موارد دیگر،‌ تصاویر در اغلب موارد مهم‌ترین عاملی هستند که با اشغال کردن حدود ۶۰٪ از پهنای‌باند، باعث تأخیر در لود شدن صفحات می‌شوند و این موضوع باعث شده که تصاویر جای کار زیادی برای بهینه‌ شدن داشته‌ باشند. در این مقاله، روش‌هایی کاربردی‌ را برای بهینه‌سازی تصاویر به‌منظور بالا بردن سرعت لود شدن وب‌سایت‌ ارائه خواهیم کرد.

از شر تصاویر غیرضروری خلاص شوید

در ارتباط با تصاویر حتماً باید یک نکته را مد نظر داشت و آن هم این است که برای نمایش داده‌ شدن، باید در مرورگر کاربری که از سایت شما بازدید می‌کند ابتدا دانلود شوند. اگرچه گفته‌ می‌شود «۱ تصویر بیش از ۱۰۰۰ کلمه تا‌‌ٔثیرگذار است!»، اما بهتر این است که از تصاویر کم‌تری استفاده کنید تا سرعت لود صفحات وب‌سایت خود را افزایش دهید. گاهی‌اوقات با حذف تصاویر غیرضروری و فکر کردن به راه‌کارهای دیگری برای ایجاد تأثیری مشابه تأثیر همان تصاویر، می‌توانیم به نتیجه و سرعت مطلوب‌تری برسیم.

استفاده‌ٔ اصولی از 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 احتمالاً مؤثرترین و کارآمدترین روش‌ها برای ایجاد تصاویر انیمیشنی هستند.

بهینه‌سازی تصاویر

ارائهٔ یک تصویر بهینه برای فرمت‌های فایلی متفاوت گاهی‌اوقات پرزحمت خواهد بود؛ برای این‌که نخواهید همواره اطلاعات و جزئیاتی را دربارهٔ فرمت‌ها و نحوهٔ ایجاد تغییر آن‌ها در ذهن داشته باشید، باید از ابزارهای تخصصی استفاده کنید و تاجایی‌که می‌توانید این پروسه را خودکار کنید.

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

دیگر تکنیک‌ها، کاملاً بی‌ضرر هستند؛ مثلاً بهینه‌سازی‌هایی از جنس Lossless، متادیتا (مانند اطلاعات در مورد دوربین استفاده شده برای عکس‌برداری یا منطقهٔ‌ جغرافیایی عکاسی و …) و یک سری الگوریتم‌های غیرمخرب دیگر را از تصویر حذف می‌کند.

تکنیک‌های بهینه‌سازی تصاویر

در ادامه، مروری می‌کنیم بر گزینه‌های موجود هنگام بهینه‌سازی تصاویر:

ـ‌ قدمِ اول شما، باید انتخاب بهترین فرمت برای هر کدام از تصاویرتان باشد.

ـ در گام دوم، اگر شما یک فرمت Lossy مانند JPEG را انتخاب کنید، مسلماً قبل از سیو کردن فایل باید کمی با گزینه‌های ویرایشی در قسمت تنظیمات بازی کنید؛ شما باید تصمیم بگیرید که برای رسیدن به سایزِ دلخواه فایل خود، حاضر به از دست دادن چه میزان کیفیت هستید. فرمت JPEG یک حالت Progressive هم دارد که در آن سایز فایل کاهش پیدا نمی‌کند و آن هم بدین دلیل است که از الگوریتم‌های فشرده سازی‌ای استفاده می‌کند که این الگوریتم‌ها امواج پی‌در‌پی خطوط تصویر را تا‌زمانی‌که کل تصویر کامل بارگذاری شود محو می‌کنند؛ این روش بهترین راه برای ارائهٔ تصاویر در اتصالات مودمی کم‌سرعت است و کاربرانی که کانکشن‌هایی با سرعت بیشتر دارند خیلی متوجه تفاوت کیفیت تصاویر و نحوهٔ بارگذاری آن‌ها در این حالت نخواهد شد.

ـ اگر از فرمت‌هایی مثل PNG یا GIF استفاده می‌کنید، احتمالاً باید تعداد رنگ‌های استفاده شده در تصویر را کاهش بدهید؛ ایجاد مجموعه رنگ محدودتر می‌تواند به طور قابل‌توجهی سایز فایل را کاهش بدهد (البته اگر با تأثیرات بصری و کیفیتی‌اش مشکلی نداشته باشید!)

ـ اگر فرمت SVG را انتخاب می‌کنید، مطمئن شوید که تصویر از طریق ابزارهایی مثل SVGO قابل‌اجرا است چون شاید شما بخواهید تصویر را کوچک‌تر کنید و متادیتای غیرضروری را از بین ببرید.

ـ اگر فرمت‌هایی مثل GIF ،PNG و JPEG را انتخاب کنید، احتمالاً پس از آن تمایل خواهید داشت که دستی داخل تصویر ببرید و روی بهینه‌سازی آن کار کنید. فتوشاپ و دیگر ویرایشگرهای تصویری -مانند Gimp برای کاربران گنو/لینوکس- کارشان در کوچک نگاه داشتن سایز تصویر خوب است اما استفاده از ابزارهای تخصصی‌تر می‌تواند علاوه بر حفظ سایز تصویر در عین بهبود کیفیت، گاهی‌اوقات با کیفیت مناسب، تصویری با سایز کم‌تر به شما ارائه کند.

ابزارهای بهینه‌سازی تصاویر

در چند سال گذشته تعداد زیادی ابزار بهینه‌سازی تصاویر به‌وجود آمده‌اند که در ادامه، برای شروع لیستی از محبوب‌ترین آن‌ها را در اختیار شما قرار می‌دهیم:

ابزارهای کامندلاینی
ـ Grunt و Gulp
ـ OptiPNG
ـ PNGcrush
ـ GIFsicle

ابزارهای آنلاین
ـ SVGO برای فرمت SVG
ـ TingPNG برای فرمت‌های PNG و JPEG
ـ Kraken برای فرمت‌های GIF ،JPEG و SVG
ـ Compressor برای فرمت‌های GIF ،PNG ،JPEG و SVG
ـ imageOptim برای فرمت‌های PNG ،JPEG و GIF

ابزارهای دسکتاپ
ـ JPEGmini برای مک و ویندوز برای فرمت JPEG
ـ ImageOptim برای مک برای فرمت‌های PNG ،JPEG و GIF
ـ Trimage برای لینوکس برای فرمت‌های JPEG و PNG
ـ Squash برای مک برای فرمت‌های JPEG و PNG

لود کردن تصاویری درست و مناسب

در دنیای امروزی وب، تعدد دیوایس‌های مختلف به امری چالش برانگیز تبدیل شده‌ است چراکه سایزهای صفحه نمایش و تراکم‌های پیکسلی مختلف باعث می‌شود که ایجاد وب‌پیجی که بر روی همهٔ دیوایس‌های مختلف خوب و زیبا به‌نظر برسد، کاری دشوار باشد و البته این موضوع بر نحوهٔ استفاده از تصاویر هم تاثیرگذار خواهد بود.

اگر وب‌سایتی مدرن و پیشرفته داشته باشید، احتمالاً تمایل دارید که تصاویر جداگانه‌ای برای صفحه نمایش‌های معمولی و صفحه نمایش‌هایی با DPI بالا ایجاد کنید؛ حتی شاید بخواهید تصاویر جداگانه‌ای برای صفحه نمایش‌های بزرگتر یا کوچکتر ایجاد کنید. (DPI یا Dots Per Inch به‌معنای تعداد نقاط در هر اینچ، واحد اندازه‌گیری تراکم پیکسلی در یک عکس است؛ به‌عبارت دیگر، تعداد نقاط مجزایی که می‌توانند در یک خط به طول ۱ اینچ -۲.۵۴ سانتی‌متر- قرار بگیرند.)

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

فقط تصاویری که نیاز دارید را بارگذاری کنید

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

اما شاید وسوسه شوید و تنبلی کنید و از راهی دیگر که به‌نظر آسان‌تر است استفاده کنید! شاید این راه را با این فکر در پیش بگیرید که چرا فقط تصاویر اصلی را به نمایش نگذاریم و روی آن‌ها کار نکنیم و برای استفادهٔ آن‌ها در حالت پیش‌نمایش فقط عرض و ارتفاع آن‌ها را کم نکنیم؟

درست است که این راه باعث می‌شود دیگر لازم نباشد تصاویر جداگانه‌ای ایجاد کنید اما درعین‌حال، مقدار زیادی از پهنای باند شما را هم به هدر می‌دهد. برای دیدن صفحهٔ کلی، بازدیدکننده باید تعداد زیادی تصاویر بزرگ را دانلود کند -تازه اگر تامب‌نیل‌های کوچک لود بشوند- و باید کلی صبر کند تا بتواند به‌طور کامل تصویری کلی از صفحهٔ وب را مشاهده کند.

استفاده از تصاویر ریسپانسیو

مواردی مثل گالری‌های کوچک تصویر به‌آسان مدیریت می‌شوند؛ ریسپانسیو وب با رزولشون ‌ها و سایزهای متعدد، ارائهٔ تصویری مناسب را دشوار می‌کند. البته لازم نیست خیلی نگران باشید چراکه راه‌کارهایی برای مقابله با این مشکل به‌وجود آمده‌ است.

استفاده از اتریبیوتی به‌نام srcset

در حال حاضر اکثر مرورگرهای مدرن از اتریبیوت srcset بر روی المان img پشتیبانی می‌کنند؛ این ویژگی به شما اجازه می‌دهد که سایزهای متعددی از یک ایمیج را در یک تگ img ایجاد کنید. برای مثال، به کد زیر توجه کنید:

<img  src="learn-mascot.png"
      srcset="learn-mascot.png 1x,
              learn-mascot@2x.png 2x">

 در اینجا ما ۲ فایل تصویری متفاوت که در اتریبیوت srcset قرار گرفته که با کاما از هم جدا شده‌اند، ایجاد کرده‌ایم. علاوه بر اسم فایل، می‌توانیم ویژگی و شرایط هر فایل را هم تعیین کنیم. فایل اول باید بر روی صفحه نمایش‌های ×۱ (معمولی) و فایل دوم باید روی صفحه نمایش‌های ×۲ (با DPI بالا) استفاده شود. بعد از این کار، خود مرورگر تشخیص می‌دهد که بسته به تراکم پیکسلی دستگاه، از کدام تصویر استفاده کند. اگر می‌خواهید تصاویری در اندازه‌های دیگر و متنوع‌تر هم داشته‌ باشید، می‌توانید به صورت زیر از srcset استفاده کنید:

<img src="learn-mascot.png"
     srcset="
       learn-mascot@0.5.png 300w,
       learn-mascot.png 600w,
       learn-mascot@2.png 1200w,
       learn-mascot@3.png 1800w"
    sizes="
      (max-width: 20em) 30vw,
      (max-width: 30em) 60vw,
      (max-width: 40em) 90vw">

در مثال بالا، برای نمایش بهتر تصاویر در حالات مختلف، ما ۴ فایل تصویری متفاوت ایجاد کرده‌ایم؛ بنابراین، به‌جای اضافه کردن ×۱ و ×۲  در پشت اسامی فایل‌ها، اندازهٔ تصویر مربوطه و دلخواه‌مان را اضافه می‌کنیم.

علاوه بر سایز واقعی تصاویر، ما باید به مرورگر اجازهٔ دانستن اندازهٔ لی‌اوت -فضایی که تصویر روی صفحه نمایش اشغال می‌کند- را هم بدهیم؛ با استفاده از اتریبویت sizes، می‌توانیم سایزهای صفحه نمایش مختلفی را -مثلاً بسته به عرض صفحه نمایش- مشخص کنیم (مدیا کوئری‌های ساده و درعین‌حال کاربردی، مدت‌های زیادی است که در زمینهٔ ریسپانسیو وب دیزاین شناخته شده‌ هستند و می‌توانند برای موارد ذکر شده استفاده‌ شوند.) به‌طور‌کلی، ۲ دلیلی که باعث جذابیت و سهولت کار با srcset می‌شود عبارتند از:

۱. توجه داشته‌ باشید که ما به مرورگر نمی‌گوییم که در چه موقعیتی از کدام فایل استفاده کند بلکه مرورگر خودش بر اساس شرایط موجود فایل مناسب را انتخاب می‌کند. ما تنها فایل‌های متعدد و اندازهٔ صفحه نمایشی که تصویر اشغال می‌کند را در اختیار مرورگر قرار می‌دهیم.

۲. همچنین توجه داشته باشید که لازم نیست ما نگران سازگاری مرورگر و srcset باشیم، اگر مرورگر از ویژگی srcset پشتیبانی نکند، به‌سادگی به‌عنوان جایگزین و پاسخی به این مسئله از فایل تعریف شده در src استفاده می‌کند.

المان picture

با به‌کار بردن اتریبیوت srcset که توضیح داده‌ شد، مرورگر خودش انتخاب می‌کند که کدام فایل تصویری را نشان بدهد اما اگر می‌خواهید این وظیفهٔ مرورگر را خودتان به‌عهده بگیرید، باید از المان picture استفاده کنید.

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

به‌عنوان مثال، از یک تصویر پانورمای واید برای صفحه نمایش‌های بزرگ و از یک تصویر کاملاً متفاوت برای صفحه نمایش‌های کوچک (مثلاً یک تصویر کراپ شده یا برش خورده که فقط قسمت‌های مهم عکس را به نمایش می‌گذارد) استفاده‌ کنید (این کار Art Direction یا «مدیریت هنری» نامیده می‌شود.)

<picture>
  <source media="(min-width: 900px)" srcset="mascot.png 1x, mascot@2x.png 2x">
  <source media="(min-width: 400px)" srcset="mascot_small.png 1x, mascot_small@2x.png 2x">
  <img src="mascot_medium.png" srcset="mascot_large.png 2x" id="mascot-image">
</picture>

 همان‌طور که می‌بینید، picture برای المان‌های source متعدد و تگ img به‌عنوان کانتینر عمل می‌کند. می‌توانید از المان‌های source برای نشان دادن این‌که کدام تصویر در چه شرایطی باید نمایش داده شود استفاده‌ کنید. پس از آن، مرورگر بر اساس سورس نوشته‌ شده، تصاویر مختلف را با شرایط و دیوایس‌های مختلف که متناسب هم هستند به‌اصطلاحمَچ می‌کند.

توجه داشته باشید که یک المان source می‌تواند دارای اتریبیوت srcset هم باشد که همان‌طور که پیش‌تر توضیح داده‌ شد، به ما اجازه می‌دهد که برحسب تراکم پیکسلی دستگاه مورد نظر، تصویر مناسبی را به نمایش بگذاریم (تگ img به‌عنوان جایگزینی برای مرورگرهایی عمل می‌کند که از المان picture پشتیبانی نمی‌کنند؛ همچنین استایل‌های CSS روی تگ img اعمال می‌شود و این بدین معنی است که شما نباید المان picture را در CSS خود تارگت یا هدف قرار بدهید.)

نکته‌ای دربارهٔ پشتیبانی مرورگرها
تا به امروز ویژگی srcset در بسیاری ار مرورگرهای فعلی پیاده‌سازی شده‌ است؛ بسته به تارگت گروپ (گروه هدف) شما، المان picture ممکن است در بعضی موارد توسط مرورگر پشتیبانی نشود که البته به لطف تکنولوژی، با استفاده از لایبرری Picturefill Polyfill می‌توانیم از المان picture در این دسته از مرورگرها هم بهره‌مند بشویم.