echoWebNerds / Portfolio

our portfolio me and minoo
GNU General Public License v3.0
1 stars 0 forks source link

format image Webp #15

Open mohmmadView opened 1 year ago

mohmmadView commented 1 year ago

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

  1. تبدیل تصاویر به فرمت WebP:

    • برای استفاده از فرمت WebP، باید تصاویر خود را به این فرمت تبدیل کنید. برای این کار، می‌توانید از ابزارهای تبدیل تصویری آنلاین یا نرم‌افزارهایی که این قابلیت را دارند استفاده کنید.
    • به عنوان مثال، برای تبدیل تصاویر به فرمت WebP در زبان برنامه‌نویسی JavaScript، می‌توانید از کتابخانه‌هایی مانند sharp یا imagemin استفاده کنید.
  2. استفاده از تگ <picture>:

    • برای ارائه تصاویر با فرمت WebP به کاربران، می‌توانید از تگ <picture> در HTML استفاده کنید. این تگ به شما امکان می‌دهد تصاویر در فرمت‌های مختلف (مانند WebP و JPEG) را ارائه دهید و مرورگر به تصویر مناسب برای دستگاه کاربر هدایت می‌شود.
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="تصویر">
</picture>
  1. فشرده‌سازی تصاویر:

    • پس از تبدیل تصاویر به فرمت WebP، می‌توانید از ابزارهای فشرده‌سازی تصویر مانند TinyPNG یا ImageOptim برای کاهش حجم تصاویر و حفظ کیفیت استفاده کنید. این ابزارها به شما امکان می‌دهند تصاویر را بهینه‌سازی کنید تا حجم کمتری داشته باشند.
  2. توجه به کیفیت:

    • در هنگام تبدیل تصاویر به فرمت WebP و فشرده‌سازی، توجه به کیفیت تصاویر بسیار مهم است. باید تنظیماتی را انتخاب کنید که حجم تصاویر را کاهش دهند اما کیفیت را حفظ کنند. تنظیمات معمولاً به شما اجازه می‌دهند کیفیت تصاویر را درصدی تنظیم کنید.
  3. تست و ارزیابی:

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

با استفاده از فرمت WebP و انجام کاهش حجم تصاویر، می‌توانید بهبود چشمگیری در سرعت بارگذاری وب‌سایت‌ها خود داشته باشید و تجربه کاربری بهتری را ارائه دهید.