4 تکنیک و روش بهینه سازی تصاویر برای وب - قسمت 2

- visibility ۰ mode_comment

در این مطلب با ادامه تکنیکهای بهینه سازی تصاویر برای استفاده در صفحات وب در خدمتتون هستیم و با استفاده از این موارد میتونین سرعت سایت خودتون رو بیشتر کنید.

4 تکنیک و روش بهینه سازی تصاویر برای استفاده در وب

تبدیل تصاویر انیمیشنی GIF به ویدیو

همه ما GIF های خوب رو دوست داریم و از اونا زیاد استفاده میکنیم. شما با استفاده از GIF میتونید تقریبا هر چیزی رو نمایش بدین ولی مشکلی که دارن اینه که حجم زیادی دارن و نمیشه اونا رو متوقف کرد و ...

ابزارهای زیادی مثل gifsicle و ... وجود دارند که با استفاده از اونا میتونین سایز تصاویر GIF رو تا حدی پایین بیارید ولی بازم این مقدار کاهش حجم خیلی چشم گیر نیست و بازم با حجم اون مشکل داریم و بقیه مشکلات GIF هم سر جای خودش باقی میمونه.

تکنیکی که در اینجا میتونین از اون استفاده کنید، تبدیل فایلهای GIF به ویدیو هست. بعد از تبدیل به ویدیو میتونین اونا رو با استفاده از تگ Video در صفحات خودتون وارد کنید و به کاربران نمایش بدین.

شما با استفاده از روشهای مختلف میتونین این تبدیل رو انجام بدین. یکی از این راه ها استفاده از ابزار FFMpeg هست. با استفاده از این ابزار به راحتی میتونین GIF رو به فرمتهای MP4 یا OGV یا WEBM و ... تبدیل کنید. برای اینکار میتونین از دستورات زیر استفاده کنید:

در دستورات بالا بعد از i یا input میتونین فایل GIF ورودی رو مشخص کنید و با استفاده از b هم میتونین bitrate اون رو مشخص کنید. در نهایت هم نام و فرمت فایل خروجی رو مشخص میکنیم. در یک تست انجام شده یک فایل GIF ورودی با حجم 989 کیلوبایت به ویدیو تبدیل شده و سایز اون بصورت زیر شده است:

  • سایز 155 کیلوبایت در فرمت MP4
  • سایز 109 کیلوبایت در فرمت OGV
  • سایز 85 کیلوبایت در فرمت WebM

با اینکه این تغییر فرمت سایز خیلی زیادی رو کم میکنه ولی کیفیت ویدیو ساخته شده خیلی با GIF اولیه تفاوت نداره. حالا شما میتونین این ویدیوهای ساخته شده رو درون کدهای HTML خودتون قرار بدین. بصورت زیر:

با اینکار اولین فرمتی که توسط مرورگر پشتیبانی بشه انتخاب میشه و در مرورگر نمایش داده میشه.

لود کردن تصاویر با استفاده از IntersectionObserver

احتمالا زیاد از تکنیک Lazy loading برای لود کردن تصاویر استفاده کرده باشید. ولی بیشتر ابزارهایی که برای اینکار مورد استفاده قرار میگیره زیاد از CPU استفاده میکنن چون در هر لحظه موقعیت فعلی اسکرول صفحه رو بررسی میکنن و با توجه به اون تصمیم میگیرن که تصویر مورد نظر باید لود بشه یا خیر. دستگاه هایی که CPU ضعیفی دارند در این مواقع به مشکل بر میخورن و سایت شما رو با اختلال مواجه میکنه.

خوشبختانه با استفاده از Intersection Observer API میتونین خیلی ساده تر و بهینه تر اینکار رو انجام بدین و متوجه بشید که تصویر چه زمانی وارد Viewport میشه و در همون زمان تصویر مورد نظر رو لود کنید تا کاربر بتونه اون رو مشاهده بکنه. نحوه استفاده از این API رو در ادامه توضیح میدیم. در ابتدا تصویر رو در کدهای HTML قرار میدیم:

همونطور که میبینید در src یک تصویر placeholder یا اولیه قرار دادیم تا زمانی که تصویر اصلی لود نشده است اون رو نمایش میدیم. تصویری که میخوایم بصورت Lazy load با استفاده از API اون رو لود کنیم درون ویژگی data-src قرار میدیم. حالا میتونیم با استفاده از کلاس در Javascript به این تصویر دسترسی داشته باشیم و کارهای مورد نظرمون رو انجام بدیم. بصورت زیر:

همونطور که میبینید در ابتدا بررسی شده که Intersection API در مرورگر کاربر پشتیبانی میشه یا خیر. بعد از اون تصاویری که در Viewport قرار میگیرن رو لود میکنیم.

امیدوارم که این تکنیک ها بتونه بهتون کمک کنه.

برای مطالعه بیشتر میتونین این لینک رو ببینید.

 

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.