23
تشکر

آشنایی با فرمت تصویری WebP

Image Format

Image Format

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

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

آشنایی با WebP

فرمت تصویری WebP اولین بار در سال 2010 توسط گوگل به صورت متن باز معرفی شد اما تا اواخر سال 2012 موفقیت چشمگیری نداشت. اما در سال 2012 این فرمت با ارائه امکاناتی حالا میتواند جایگزینی برای فرمت های JPEG و PNG باشد. این فرمت از انیمیشن نیز پشتیبانی میکند و جایگزین بسیار (بسیار!) خوبی نیز برای GIF محسوب میشود.

بر اساس گفته های توسعه دهندگان، این فرمت در مقایسه با فرمت PNG تا ٪80 و در مقایسه با فرمت JPEG تا ٪30 کاهش حجم انجام میدهد.

WebP vs JPEG vs PNG

WebP vs JPEG vs PNG

بعد از اینک سال پیش گوگل در Chrome Web Store به استفاده از WebP روی آورد، ٪30 از حجم تصاویر این سایت کاهش پیدا کرد که منجر به ذخیره حجم زیادی از پهنای میشود. همچنین گوگل در بخش Play Store نیز به اینکار روی آورده است.

Chrome Web Store

Chrome Web Store

پشتیبانی مرورگرها

همه چیز طبق معمول خوب است تا زمانی که به بحث پشتیبانی مرورگرها میرسیم. این فرمت در حال حاظر تنها در مرورگر کروم دکستاپ و موبایل، اپرا و Opera mobile پشتیبانی میشود.

استفاده از WebP

در این صفحه میتوانید Convertor و Codecهای لازم را برای اضافه کردن به سیستم عامل دانلود و استفاده کنید. همچنین در سایت imp2webp.net میتوانید به صورت آنلاین تصاویر خودتان را به WebP تبدیل کنید.

برای استفاده از تصاویر WebP در وب، بهترین راه استفاده از Modernizr است. یک نمونه استفاده از Modernizr را در کد زیر مشاهده کنید.

if(Modernizr.webp) {
  var webpImg = document.createElement("img");
  webImg.setAttribute('src', '/awsome.webp');
  document.body.appendChild(webImg);
} else {
  //Load other format
}

شما میتوانید ابتدا تمام تصاویر خودتان را با WebP لود کنید و در صورت پشتیبانی نشدن از جایگزین آنها استفاده کنید.

  • علی می‌گه:

    یا مث سایت من که مرجع این جور فرمت هاست

  • نویسنده هم بگیرید بهتر میشه چون خیلی دیر به دیر مطلب میزارید

  • یه اموزش اگه میشه راجب modernizr بزارید کلا منابع فارسیش کمه یا اینکه هرکی یه چیزی واسه خودش میگه کسی نیست که پیوسته و مرتب مثل شما مطلب بزاره.
    موفق باشید.

  • فرمت خوبی هست ولی هنوز اینترنت اکسپلورر و فایر فاکس پشتیبانی خوبی ازش ندارن و فقط گوگل کروم و اپرا اونم ورژن های جدیدش ازش پشتیبانی میکنن پس زیاد کاربردی نیست باید صبر کنیم تا بقیه هم ساپورتش کنن بعد استفاده کنیم که کمه کمش 6 ماه طول میکشه…

    • محسن شفیعی می‌گه:

      آره. ولی برای سایتهایی که عکس زیاد دارند مثل همین سایتهای گوگل که مثال زدم راه حل خوبیه و میشه از Modernizr استفاده کرد.


  • نظرات این مطلب بسته است.