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

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

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

استفاده‌ٔ اصولی از CSS
سی‌اس‌اس و قابلیت‌های جدید آن در نسخهٔ ۳ هم‌اکنون بر روی تمام مرورگرهای مدرن قابل‌اجرا است و از آنجایی که CSS3 تأثیر بسزایی در زمینهٔ ایجاد تصاویر دارد، بسیاری از چیزهایی که به عکس نیاز دارند فقط با چند خط کدنویسی CSS قابل‌انجام هستند (مثلاً سایه‌، شیب‌ و منحنی‌، قسمت‌های شفاف‌تر و حتی انیمیشن‌ را به‌ سادگی با CSS3 می‌توان پیاده‌سازی کرد.)

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

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

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

- آیا تصویر از اَشکال هندسی تشکیل شده‌ است؟ زمانی که تصویر شما از خطوط، دایره‌ها و دیگر اَشکال هندسی ساخته شده‌ باشد، فرمت SVG بهترین انتخاب است و از آنجایی که این فرمت از نوع بُرداری است، فلذا تصاویری با استفاده از اَشکال هندسی ایجاد می‌کند. این فرمت برای ایجاد آیکون‌ و لوگو انتخاب بسیار مناسبی است؛ وقتی فرمت SVG را برای تصویری انتخاب کردید، سایز تصویر لزوماً نباید کم و کوچک باشد بلکه تصاویر طراحی شده با فرمت SVG قابلیت این‌ را دارند تا بدون از دست دادن کیفیت، تغییر سایز پیدا کنند و این باعث می‌شود وابستگی‌ای به رزولوشن صفحه نمایش و تراکم پیکسلی نداشته و از این بابت‌ها محدودی برای دیزاینر ایجاد نکنند.

- آیا تصویر یک عکس یا اسکرین‌شات است؟ هنگامی تصویر دارای جزئیات زیادی است و به باقاعدگی و سادگی اَشکال هندسی نیست، فرمت JPEG به احتمال زیاد گزینهٔ مناسبی است. اگرچه JPEG با استفاده از الگوریتم Lossy فشرده‌سازی می‌شود، اما وقتی ترکیب رنگ‌ها و جزئیات در یک تصویر زیاد باشند، JPEG تنها گزینهٔ موجود قابل‌استفاده است (اگر هنگام آپلود و استفاده از تصویر، کمی با کیفیت JPEG بازی کنید، اغلب به تناسب مناسبی میان کیفیت و سایز فایل دست پیدا می‌کنید.)

- آیا به تصویری با کیفیت و شفافیت بالا احتیاج دارید؟ زمانی که لازم دارید از عکسی با کیفیت و شفافیت بالا استفاده کنید، باید فرمت JPEG را کنار بگذارید و به‌ جای آن از فرمت PNG استفاده کنید. مزیت PNG بر JPEG این است که فقط از الگوریتم‌های Lossless استفاده می‌کند و این باعث می‌شود زمانی‌ که به حداکثر کیفیت تصویری احتیاج دارید و نمی‌خواهید جزئیات موجود در تصویر را از دست بدهید، فرمت PNG برایتان انتخاب مناسبی باشد (لازم به ذکر است که تمام این مزایا بهایی هم دارند و آن هم اینکه فایل‌های PNG از نظر سایز فایل‌های نسبتاً بزرگی هستند و بنابراین فقط زمانی باید استفاده شوند که فرمت‌های دیگر کارایی ندارند.)

در نهایت، در حین استفاده از فرمت PNG این را هم در نظر داشته باشید که از PNG-8 زمانی استفاده کنید که اصطلاحاً پالت رنگی کوچک‌تر و محدودتری دارید (حدود ۲۵۶ رنگ) و در صورتی که تعداد رنگ‌های بیشتری در تصویر موجود است، از PNG-24 استفاده کنید که این هم باز منجر به افزایش سایر تصویر می‌شود!

استفاده از انیمیشن
امروزه بسیاری از وب‌سایت‌های مختلف را می‌بینیم که برای جذب کاربر، از انیمیشن استفاده می‌کنند. به طور کلی، چندین روش مختلف برای ایجاد تصاویر انیمیشنی استفاده می‌شوند که عبارتند از:

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

- SVG: فرمت SVG که پیش از این با ماهیتش آشنا شدید، قابلیت‌هایی برای ایجاد تصاویر انیمیشنی ارائه می‌دهد، هرچند ایجاد این‌گونه تصاویر با این فرمت بسیار پُرزحمت خواهد بود و به‌ خوبی تصاویر GIF هم در مرورگرها ساپورت نمی‌شوند!

- CSS3: با نسخهٔ سه زبان سی‌اس‌اس خیلی اتفاقات در انیمیشن‌سازی ممکن شد. مسلماً این فرمت هم دارای محدودیت‌هایی در این زمینه است اما CSS3 می‌تواند گزینهٔ مناسبی برای ایجاد تصاویر انیمیشنی باشد.

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

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

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

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

اگر از فرمت‌هایی مثل PNG یا GIF استفاده می‌کنید، احتمالاً باید تعداد رنگ‌های استفاده شده در تصویر را کاهش بدهید به طوری که ایجاد مجموعه رنگ محدودتر می‌تواند به طور قابل‌توجهی سایز فایل را کاهش بدهد (البته اگر با تأثیرات بصری و کیفیتی‌اش مشکلی نداشته باشید.) اگر هم فرمت SVG را انتخاب می‌کنید، مطمئن شوید که تصویر از طریق ابزارهایی مثل SVGO قابل‌اجرا است چون شاید شما بخواهید تصویر را کوچک‌تر کنید و متادیتای غیرضروری را از بین ببرید.

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

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

ابزارهای کامندلاینی
- Grunt Contrib Imagemin و Gulp Imagemin
- 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 قرار گرفته ایجاد کرده‌ایم که با کاما از هم جدا شده‌اند. علاوه بر اسم فایل، می‌توانیم ویژگی و شرایط هر فایل را هم تعیین کنیم به طوری که فایل اول باید بر روی صفحه نمایش‌های ×1 (معمولی) و فایل دوم باید روی صفحه نمایش‌های ×2 و با 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">

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

علاوه بر سایز واقعی تصاویر، ما باید مرورگر را مطلع کنیم که اندازهٔ لی‌اوت یا فضایی که تصویر روی صفحه نمایش اشغال می‌کند چقدر است که با استفاده از اتریبویت 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 پشتیبانی نمی‌کنند. همچنین استایل‌های سی‌اس‌اس روی تگ img اعمال می‌شود و این بدین معنی است که شما نباید اِلِمان picture را در سی‌اس‌اس خود تارگت یا هدف قرار بدهید.)

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