آموزشآموزش‌های تکی

آموزش تکی، حدود ۳۲ دقیقه خواندن

WebP چیه

جواب کوتاه

WebP (خونده می‌شه «وب‌پی») یه فرمت عکس برای وبه که گوگل سال ۲۰۱۰ معرفیش کرد. همون عکس رو با کیفیتی که چشم فرقش رو نمی‌بینه، معمولا یک‌چهارم تا یک‌سوم سبک‌تر از JPG نگه می‌داره، و هم بی اتلاف داره، هم پس‌زمینه‌ی شفاف، هم عکس متحرک. امروز همه‌ی مرورگرهای اصلی نشونش می‌دن، و با ابزار رایگانی مثل Squoosh می‌شه هر عکسی رو به WebP تبدیل کرد.

اسم

حتما یه بار عکسی از یه سایت ذخیره کردید و دیدید پسوندش «.webp»‌ئه، نه JPG. یا ابزار سرعت سایت بهتون گفته «عکس‌ها رو با فرمت‌های نسل جدید مثل WebP بفرستید». WebP یه فرمت عکسه، مثل JPG و PNG، که برای وب ساخته شده؛ اسمش هم از همین میاد، Web و P از Picture.

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

چرا وزن عکس مهمه

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

فرض کنید یه صفحه ۱۰ تا عکس داره و هر کدوم ۳۰۰ کیلوبایته؛ می‌شه ۳ مگابایت. روی یه اینترنت گوشی کند، این یعنی چند ثانیه صبر. اگه هر عکس ۳۰ درصد سبک‌تر بشه، نزدیک یه مگابایت کمتر دانلود می‌شه. هم خواننده زودتر صفحه رو می‌بینه، هم بسته‌ی اینترنتش کمتر مصرف می‌شه، هم سرور شما کمتر می‌فرسته.

چمدون

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

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

دو جور تا کردن

WebP دو حالت داره، و فرق این دو تا مهم‌ترین چیزیه که باید بدونید:

با اتلاف (lossy): خیلی کوچیک، تقریبا همون شکل.
بی اتلاف (lossless): نقطه به نقطه همون.

حالت «با اتلاف» (lossy) یه سری ریزه‌کاری‌ها رو که چشم آدم متوجه نبودنشون نمی‌شه، دور می‌ریزه. عکس نهایی دقیقا همون عکس اول نیست، ولی به چشم همونه، و خیلی سبک‌تره. این همون کاریه که JPG هم می‌کنه، فقط WebP زرنگ‌تر انجامش می‌ده. برای عکس‌های واقعی، مثل عکس محصول، آدم، منظره، این حالت درسته.

حالت «بی اتلاف» (lossless) هیچ نقطه‌ای رو عوض نمی‌کنه؛ عکسی که باز می‌شه، نقطه به نقطه همون عکس اوله. این همون کاریه که PNG می‌کنه. برای لوگو، طرح‌های ساده، اسکرین‌شات و عکس‌هایی که نوشته دارن، این حالت بهتره، چون حالت با اتلاف دور لبه‌های تیز و نوشته‌ها لک می‌ندازه.

تا کردن با اتلاف

حالت با اتلاف WebP از یه فرمت ویدیو به اسم VP8 اومده. توی ویدیو، هر فیلم چند تا «فریم کلیدی» داره که بی نگاه به فریم‌های دیگه، به‌تنهایی ذخیره می‌شن. WebP در واقع یه فریم کلیدی VP8‌ئه، توی یه فایل عکس. روشش این‌طوریه:

  1. اول عکس به مربع‌های کوچیک تقسیم می‌شه، معمولا ۱۶ در ۱۶ نقطه.
  2. بعد برای هر مربع، از روی مربع‌های بالا و کنارش که قبلا ذخیره شدن، یه حدس زده می‌شه؛ مثلا «این مربع احتمالا ادامه‌ی همون آسمون آبی بالاییه». بعد فقط فرق مربع واقعی با این حدس نگه داشته می‌شه، که معمولا خیلی کوچیکه.
  3. بعد این فرق‌ها از «نقطه به نقطه» به «موج‌های ریز و درشت» برگردونده می‌شن؛ یعنی به‌جای اینکه بگه «این نقطه این رنگه»، می‌گه «این مربع یه رنگ کلی داره، و یه کم تغییر از چپ به راست».
  4. بعد موج‌های خیلی ریز، که چشم تقریبا نمی‌بینه، گرد می‌شن یا کلا دور ریخته می‌شن. این همون «اتلاف»‌ئه، و عدد کیفیت می‌گه چقدر از این ریزه‌ها دور بریزه.
  5. و آخر، چیزی که مونده با یه روش فشرده‌سازی خیلی دقیق، که عددهای پرتکرار رو کوتاه‌تر می‌نویسه، فشرده می‌شه.

JPG هم تقریبا همین قدم‌ها رو داره، به‌جز قدم دوم. حدس زدن از روی همسایه‌ها، یکی از دلیل‌های اصلی سبک‌تر بودن WebP‌ئه؛ مخصوصا برای بخش‌های صاف و یکدست عکس، مثل آسمون یا دیوار.

رنگ و روشنایی

یه ترفند دیگه هم هست که از چشم آدم میاد. چشم ما تغییر روشنایی رو خیلی دقیق‌تر از تغییر رنگ می‌بینه. برای همین WebP با اتلاف، عکس رو اول به دو بخش جدا می‌کنه؛ روشنایی، و رنگ.

روشنایی با همه‌ی جزئیات نگه داشته می‌شه.
رنگ با یک‌چهارم جزئیات؛ چشم فرقی نمی‌بینه.

روشنایی رو برای هر نقطه نگه می‌داره، ولی رنگ رو برای هر چهار نقطه فقط یه بار. یعنی رنگ با یک‌چهارم جزئیات ذخیره می‌شه، و چشم تقریبا هیچ‌وقت فرقی نمی‌بینه. JPG هم معمولا همین کار رو می‌کنه.

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

مربع‌هایی که گاهی دیده می‌شن

اگه کیفیت رو خیلی پایین بیارید، مربع‌ها دیده می‌شن؛ عکس شطرنجی می‌شه، مخصوصا توی آسمون و سایه‌ها. JPG با کیفیت پایین، لبه‌های تیز مربع‌ها رو نشون می‌ده. WebP یه «صافی» داره که بعد از باز کردن، مرز بین مربع‌ها رو نرم می‌کنه. برای همین وقتی کیفیت پایینه، عکس WebP به‌جای شطرنجی، یه کم مات و صاف به نظر میاد.

این نرم کردن یه هزینه هم داره؛ بافت‌های ریز، مثل پارچه یا علف یا مو، ممکنه توی کیفیت پایین صاف و پلاستیکی بشن. برای همین عکس‌هایی که بافت ریز زیادی دارن، کیفیت بالاتری لازم دارن.

تا کردن بی اتلاف

حالت بی اتلاف WebP کلا یه روش دیگه‌ست، که از اول برای WebP ساخته شد. هیچ‌چیز دور ریخته نمی‌شه؛ فقط داده زرنگ‌تر چیده می‌شه. چند تا ترفندش این‌ان:

  1. اول، مثل حالت با اتلاف، هر نقطه از روی همسایه‌هاش حدس زده می‌شه و فقط فرق نگه داشته می‌شه.
  2. بعد رنگ‌ها جابه‌جا می‌شن تا به هم وابسته نباشن؛ مثلا چون توی بیشتر عکس‌ها سبز و قرمز و آبی با هم بالا و پایین می‌رن، سبز از بقیه کم می‌شه و عددها کوچیک‌تر می‌شن.
  3. اگه عکس رنگ‌های کمی داره، مثل یه لوگو، یه جدول رنگ ساخته می‌شه و به‌جای رنگ، شماره‌ی رنگ نگه داشته می‌شه.
  4. اگه یه تیکه از عکس قبلا عینا اومده، به‌جای تکرارش فقط گفته می‌شه «این‌جا همون تیکه‌ایه که فلان‌جا دیدی».
  5. و آخر، عددهای پرتکرار با کد کوتاه‌تر نوشته می‌شن.

نتیجه، فایلی که معمولا یک‌چهارم سبک‌تر از همون عکس با PNG‌ئه، بی اینکه حتی یه نقطه عوض بشه.

پس‌زمینه‌ی شفاف

JPG پس‌زمینه‌ی شفاف نداره؛ هر عکسی یه مستطیل کامله. برای لوگو یا عکس محصول بی پس‌زمینه، همیشه PNG لازم بود، که برای عکس‌های واقعی خیلی سنگینه. WebP یه «کانال آلفا» داره، یعنی برای هر نقطه، علاوه بر رنگ، یه عدد هم نگه می‌داره که می‌گه چقدر شفافه.

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

عکس متحرک

GIF، فرمت قدیمی عکس‌های متحرک، فقط ۲۵۶ رنگ داره و خیلی سنگینه. WebP هم عکس متحرک داره، با میلیون‌ها رنگ و شفافیت، و معمولا خیلی سبک‌تر از GIF. هر فریم می‌تونه با اتلاف یا بی اتلاف باشه.

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

داخل فایل

یه فایل WebP یه بسته‌ست به اسم RIFF، کوتاه‌شده‌ی Resource Interchange File Format، یعنی «قالب فایل برای جابه‌جا کردن منبع‌ها»؛ همون بسته‌ای که فایل‌های صوتی WAV هم دارن. اول فایل نوشته «RIFF»، بعد اندازه، بعد «WEBP»، و بعد چند تا تیکه‌ی جدا.

یه تیکه خود عکسه. تیکه‌های دیگه می‌تونن شفافیت، فریم‌های متحرک، پروفایل رنگ، اطلاعات دوربین (EXIF، کوتاه‌شده‌ی Exchangeable Image File Format) و توضیحات دیگه باشن. برای وب، معمولا بهتره اطلاعات دوربین رو بردارید؛ هم فایل سبک‌تر می‌شه، هم چیزهایی مثل محل گرفتن عکس، ناخواسته منتشر نمی‌شه.

عددها

گوگل، که WebP رو ساخته، روی هزاران عکس آزمایش کرده و عددهاش این‌ان. عکس‌های بی اتلاف WebP حدود ۲۶ درصد سبک‌تر از همون عکس‌ها با PNG‌ان. عکس‌های با اتلاف WebP، با کیفیتی که با یه معیار علمی برابر سنجیده شده، ۲۵ تا ۳۴ درصد سبک‌تر از JPG‌ان. و عکس با اتلاف ولی با شفافیت، معمولا حدود یک‌سوم اندازه‌ی همون عکس با PNG‌ئه.

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

کنار بقیه‌ی فرمت‌ها

یه عکس واقعی، با کیفیتی که چشم فرقی نمی‌بینه، توی هر فرمت چقدر وزن داره:

  1. PNGبی اتلاف؛ برای عکس واقعی خیلی سنگین
  2. JPGبا اتلاف؛ نقطه‌ی شروع
  3. WebPحدود یک‌چهارم تا یک‌سوم سبک‌تر از JPG
  4. AVIFمعمولا باز سبک‌تر، ولی ساختنش کندتر

JPG از ۱۹۹۲ هست و هنوز همه‌جا کار می‌کنه. PNG برای طرح و بی اتلاف عالیه، ولی برای عکس واقعی سنگین. GIF فقط برای عکس متحرک کوچیک مونده. WebP جای هر سه‌شون رو می‌گیره. AVIF، فرمتی که از ویدیوی AV1 اومده و سال ۲۰۱۹ منتشر شد، معمولا از WebP هم سبک‌تره، مخصوصا توی کیفیت پایین، ولی ساختنش کندتره و برنامه‌های کمتری بازش می‌کنن. یه فرمت دیگه هم هست به اسم JPEG XL که هنوز همه‌ی مرورگرها نشونش نمی‌دن.

پس امروز WebP امن‌ترین انتخابه؛ تقریبا همه‌جا باز می‌شه و فرقش با JPG بزرگه. اگه بخواید یه قدم جلوتر برید، AVIF رو با WebP به‌عنوان پشتیبان بفرستید.

کجاها کم میاره

WebP همه‌جا بهترین نیست، و خوبه محدودیت‌هاش رو بدونید. اولیش رنگه. WebP برای هر رنگ فقط ۸ بیت داره، یعنی ۲۵۶ پله برای هر کدوم از قرمز و سبز و آبی. برای عکس‌های معمولی وب کافیه، ولی برای عکس‌های HDR، یعنی عکس‌هایی با نور خیلی زیاد و خیلی کم کنار هم که صفحه‌های جدید می‌تونن نشونشون بدن، کمه. AVIF و JPEG XL پله‌های بیشتری دارن.

دومیش همون رنگ با یک‌چهارم جزئیاته. حالت با اتلاف WebP همیشه این کار رو می‌کنه و نمی‌شه خاموشش کرد؛ JPG و AVIF اجازه می‌دن رنگ رو هم با همه‌ی جزئیات نگه دارید. برای عکس‌هایی با رنگ‌های تند و لبه‌های تیز، این یه عیب واقعیه، که یه گزینه‌ی cwebp تا حدی درستش می‌کنه.

سومیش باز شدن تدریجیه. JPG می‌تونه طوری ذخیره بشه که اول یه نسخه‌ی تار از کل عکس بیاد و کم‌کم واضح بشه؛ روی اینترنت کند، خواننده زود یه چیزی می‌بینه. WebP این حالت رو نداره و عکس از بالا به پایین باز می‌شه. البته چون WebP سبک‌تره، معمولا زودتر از JPG تدریجی هم کامل می‌شه.

مرورگرها

سال‌ها مشکل WebP این بود که همه‌ی مرورگرها نشونش نمی‌دادن. مرورگر خود گوگل از اول بلد بود. یکی از مرورگرهای اصلی از اوایل ۲۰۱۹ بلد شد، و آخرین مرورگر بزرگ، که روی گوشی‌ها و کامپیوترهای یه سازنده‌ی معروف هست، از سپتامبر ۲۰۲۰.

امروز تقریبا همه‌ی کسایی که وب رو می‌گردن، مرورگری دارن که WebP رو نشون می‌ده؛ بیش از ۹۵ درصد. برای همین دیگه لازم نیست برای هر عکس یه JPG پشتیبان هم بذارید، مگه اینکه خواننده‌هاتون دستگاه‌های خیلی قدیمی داشته باشن.

بزرگ‌ترین عکس

WebP یه سقف داره که JPG نداره: طول و عرض عکس هر کدوم حداکثر ۱۶۳۸۳ نقطه. برای وب، این تقریبا هیچ‌وقت مشکل نیست؛ بزرگ‌ترین عکس‌های سایت معمولا زیر ۳۰۰۰ نقطه‌ان. ولی اگه بخواید یه نقشه‌ی خیلی بزرگ یا یه عکس پانورامای غول‌پیکر رو WebP کنید، باید اول کوچیکش کنید یا تیکه‌تیکه‌ش کنید.

کیفیت درست

موقع ساختن WebP با اتلاف، یه عدد کیفیت از ۰ تا ۱۰۰ انتخاب می‌کنید. این عدد درصد نیست؛ فقط می‌گه چقدر از ریزه‌کاری‌ها دور ریخته بشه. عدد کیفیت WebP با عدد کیفیت JPG هم یکی نیست؛ WebP با کیفیت ۷۵ معمولا شبیه JPG با کیفیت بالاتره.

برای بیشتر عکس‌های سایت، عددی بین ۷۵ تا ۸۵ خوبه. ابزار خط فرمان WebP، اگه چیزی نگید، ۷۵ می‌ذاره. برای عکس‌های بزرگ بالای صفحه که خیلی دیده می‌شن، یه کم بالاتر؛ برای عکس‌های کوچیک فهرست محصول، یه کم پایین‌تر. بالای ۹۰ معمولا فقط وزن اضافه می‌کنه، بی اینکه چشم فرقی ببینه. بهترین راه، امتحان کردن و نگاه کردن با چشم خودتونه، کنار هم.

اول اندازه

مهم‌ترین نکته‌ی این درس شاید این باشه: پیش از عوض کردن فرمت، اندازه‌ی عکس رو درست کنید. عکسی که با گوشی گرفته شده، معمولا ۴۰۰۰ نقطه پهنا داره. اگه توی سایت توی یه کادر ۸۰۰ نقطه‌ای نشون داده می‌شه، ۲۵ برابر نقطه‌ی بیشتر از لازم داره.

کوچیک کردن همون عکس به ۱۶۰۰ نقطه، که برای صفحه‌های با کیفیت بالا هم کافیه، وزن رو چند برابر کم می‌کنه؛ خیلی بیشتر از عوض کردن JPG به WebP. پس ترتیب درست اینه؛ اول اندازه، بعد WebP، بعد کیفیت. هر دو با هم، یه عکس ۴ مگابایتی رو به زیر ۱۰۰ کیلوبایت می‌رسونن.

Squoosh

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

  1. صفحه‌ی squoosh.app رو باز کنید و عکس رو بکشید توش.
  2. صفحه دو نیمه می‌شه؛ چپ عکس اصلی، راست عکس تازه. یه خط وسط هست که می‌شه کشیدش و دو تا رو کنار هم مقایسه کرد.
  3. از فهرست سمت راست، فرمت رو WebP بذارید.
  4. اگه عکس بزرگه، گزینه‌ی Resize رو روشن کنید و پهنا رو کم کنید.
  5. عدد کیفیت رو کم و زیاد کنید و همزمان به عکس و به وزن پایین صفحه نگاه کنید.
  6. وقتی راضی شدید، دکمه‌ی دانلود رو بزنید.

خوبی Squoosh اینه که همون لحظه وزن و درصد کم شدن رو نشون می‌ده، و می‌شه زوم کرد و ریزه‌کاری‌ها رو دید. عیبش اینه که یه عکس در هر بار کار می‌کنه؛ برای صدها عکس، ابزارهای دیگه بهترن. Squoosh هم AVIF و فرمت‌های دیگه رو داره، که برای مقایسه عالیه.

خط فرمان

برای تبدیل تعداد زیادی عکس، یا روی سرور، ابزارهای خط فرمان خود WebP هست. اصلیش cwebp‌ئه؛ c یعنی «فشرده کن». دستور cwebp -q 80 photo.jpg -o photo.webp عکس photo.jpg رو با کیفیت ۸۰ به WebP تبدیل می‌کنه. با گزینه‌ی -lossless بی اتلاف می‌سازه، و با -resize 1600 0 پهنا رو ۱۶۰۰ می‌کنه و ارتفاع رو خودش حساب می‌کنه.

کنارش dwebp هست که WebP رو به PNG برمی‌گردونه، gif2webp که GIF متحرک رو به WebP متحرک تبدیل می‌کنه، و webpinfo که می‌گه داخل یه فایل WebP چیه. با یه حلقه‌ی ساده توی خط فرمان، می‌شه کل یه پوشه عکس رو یه‌جا تبدیل کرد.

گزینه‌های بیشتر

cwebp چند تا گزینه‌ی دیگه هم داره که دونستنشون فرق می‌سازه. گزینه‌ی -sharp_yuv موقع جدا کردن رنگ از روشنایی، دقیق‌تر کار می‌کنه و لبه‌های رنگی تند رو تمیزتر نگه می‌داره؛ ساختن فایل یه کم کندتر می‌شه، ولی وزن تقریبا عوض نمی‌شه. برای طرح‌ها و عکس‌های پر از رنگ تند، ارزشش رو داره.

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

و گزینه‌ی -size به‌جای عدد کیفیت، یه وزن هدف می‌گیره؛ مثلا «این عکس رو حدود ۸۰ کیلوبایت کن»، و خودش کیفیتی پیدا می‌کنه که به اون وزن برسه.

تگ picture

اگه بخواید هم WebP بدید هم برای مرورگرهای خیلی قدیمی JPG، یا هم AVIF هم WebP، توی HTML تگی به اسم picture هست. داخلش چند تا source می‌ذارید، هر کدوم با یه فرمت، و آخرش یه img معمولی. مرورگر از بالا شروع می‌کنه و اولین فرمتی که بلده رو برمی‌داره؛ اگه هیچ‌کدوم رو بلد نبود، همون img آخر رو.

ترتیب مهمه؛ سبک‌ترین فرمت اول. پس معمولا AVIF، بعد WebP، و آخر JPG توی img. یه نکته‌ی مهم هم اینه که توضیح عکس (alt) و اندازه‌هاش روی همون img آخر می‌مونه؛ source فقط آدرس فایل رو عوض می‌کنه.

چند اندازه، چند صفحه

یه عکس بالای صفحه روی گوشی شاید ۴۰۰ نقطه پهنا داشته باشه و روی یه صفحه‌ی بزرگ دسکتاپ ۱۲۰۰. اگه برای همه یه عکس ۱۶۰۰ نقطه‌ای بفرستید، گوشی چند برابر بیشتر از لازم دانلود می‌کنه. برای همین توی HTML می‌شه یه عکس رو با چند اندازه داد، با ویژگی srcset؛ مثلا یه نسخه‌ی ۴۰۰، یه نسخه‌ی ۸۰۰ و یه نسخه‌ی ۱۶۰۰.

کنارش ویژگی sizes به مرورگر می‌گه عکس توی صفحه چقدر جا می‌گیره، و مرورگر خودش، با در نظر گرفتن اندازه‌ی صفحه و تیزی صفحه‌نمایش، کوچیک‌ترین نسخه‌ای که کافیه رو انتخاب می‌کنه. این‌ها با picture و WebP با هم کار می‌کنن؛ هر source می‌تونه srcset خودش رو داشته باشه. وردپرس خودش برای عکس‌هایی که آپلود می‌کنید، چند اندازه می‌سازه و srcset رو خودکار می‌ذاره.

یه کار دیگه هم هست؛ ویژگی loading="lazy" روی عکس‌هایی که پایین صفحه‌ان. این‌جوری مرورگر اون عکس‌ها رو فقط وقتی دانلود می‌کنه که خواننده نزدیکشون اسکرول کنه. ولی هیچ‌وقت این رو روی عکس بزرگ بالای صفحه نذارید؛ اون عکس باید هر چه زودتر بیاد، و تنبل کردنش LCP رو بدتر می‌کنه.

انتخاب با سرور

یه راه دیگه اینه که آدرس عکس همون photo.jpg بمونه، ولی سرور خودش تصمیم بگیره چی بفرسته. هر مرورگر توی درخواستش یه سرآیند به اسم Accept می‌فرسته که می‌گه چه فرمت‌هایی رو بلده؛ اگه توش image/webp باشه، سرور نسخه‌ی WebP رو می‌فرسته، وگرنه JPG.

اینجا یه تله هست. اگه بین سرور و خواننده یه کش یا CDN باشه، ممکنه نسخه‌ی WebP رو برای یه نفر نگه داره و به نفر بعدی هم، که مرورگرش بلد نیست، همون رو بده. برای جلوگیری، سرور باید سرآیند Vary: Accept رو بفرسته، یعنی «این جواب بسته به Accept فرق داره، جدا نگهش دار». بعضی CDNها خودشون تبدیل به WebP رو انجام می‌دن و این کار رو درست مدیریت می‌کنن.

WebP در وردپرس

وردپرس از نسخه‌ی ۵٫۸، ژوئیه‌ی ۲۰۲۱، اجازه می‌ده مستقیم عکس WebP آپلود کنید؛ اگه سرور ابزار پردازش عکسی داشته باشه که WebP رو بلده، وردپرس اندازه‌های کوچیک‌تر رو هم با WebP می‌سازه. از نسخه‌ی ۶٫۵ هم AVIF رو می‌شناسه.

ولی وردپرس عکس‌های JPG قبلی شما رو خودش WebP نمی‌کنه. برای این کار یا عکس‌ها رو پیش از آپلود با Squoosh یا cwebp تبدیل کنید، یا یه افزونه‌ی بهینه‌سازی عکس بذارید که موقع آپلود، و برای عکس‌های قبلی یه‌جا، نسخه‌ی WebP بسازه و جای JPG بفرسته. درس عکس در وردپرس جزئیاتش رو داره.

برگردوندن به JPG

گاهی یه عکس WebP از یه سایت ذخیره می‌کنید و یه برنامه‌ی قدیمی بازش نمی‌کنه. ساده‌ترین راه، باز کردنش توی خود مرورگر یا یه برنامه‌ی عکس جدید و ذخیره‌ی دوباره با JPG یا PNG‌ئه. Squoosh هم این کار رو می‌کنه؛ عکس WebP رو بکشید توش و فرمت رو JPG بذارید.

فقط بدونید که هر بار تبدیل با اتلاف، یه ذره کیفیت از دست می‌ره. WebP با اتلاف رو به JPG ببرید، دوباره ریزه‌کاری‌ها دور ریخته می‌شن. اگه می‌خواید ویرایشش کنید و دوباره ذخیره کنید، PNG بهتره؛ بی اتلافه و چیزی رو بدتر نمی‌کنه.

جاهایی که هنوز JPG

با همه‌ی این‌ها، چند جا هست که هنوز بهتره JPG یا PNG بفرستید. اولیش ایمیله؛ خیلی از برنامه‌های ایمیل، مخصوصا روی کامپیوترهای اداری، هنوز WebP رو نشون نمی‌دن، و عکس خبرنامه‌ی شما به یه مربع خالی تبدیل می‌شه.

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

WebP و گوگل

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

یه نکته‌ی کوچیک: وقتی عکس‌های یه سایت قدیمی رو به WebP می‌برید و آدرس‌ها عوض می‌شن، آدرس‌های قدیمی رو به جدید منتقل کنید، تا عکس‌هایی که قبلا توی جستجوی عکس بودن، از دست نرن.

کمی تاریخ

گوگل سال ۲۰۱۰ یه شرکت ویدیویی رو خرید که فرمت VP8 رو ساخته بود، و همون سال، سپتامبر ۲۰۱۰، WebP رو معرفی کرد؛ یه فریم VP8، توی یه فایل عکس. نسخه‌ی اول فقط با اتلاف بود. سال ۲۰۱۱ حالت بی اتلاف و شفافیت اضافه شد، و چند سال بعد عکس متحرک.

سال‌ها فقط مرورگر گوگل و چند تا برنامه WebP رو نشون می‌دادن، و خیلی‌ها می‌گفتن هیچ‌وقت جا نمی‌افته. بین ۲۰۱۸ و ۲۰۲۰ بقیه‌ی مرورگرهای اصلی هم اومدن، و از اون به بعد WebP کم‌کم فرمت عادی وب شد. امروز تقریبا هر ابزار بهینه‌سازی سرعت، اولین پیشنهادش برای عکس‌ها همینه.

تمرین

  1. یه عکس از گوشیتون رو توی Squoosh بندازید، پهنا رو ۱۶۰۰ کنید و WebP با کیفیت ۸۰ بسازید؛ وزن اول و آخر رو مقایسه کنید.
  2. یه لوگو یا اسکرین‌شات رو یه بار با اتلاف و یه بار بی اتلاف بسازید و دور نوشته‌ها رو زوم کنید.
  3. با تست سرعت، ببینید صفحه‌ی اصلی سایتتون چند تا عکس JPG و PNG سنگین داره.

اشتباه‌های رایج

  • «WebP کردن عکس بی‌کیفیت، کیفیتش رو بهتر می‌کنه.» نه؛ هر چی از دست رفته، برنمی‌گرده.
  • «فقط فرمت رو عوض کنم کافیه.» اندازه‌ی درست عکس، خیلی بیشتر از فرمت وزن رو کم می‌کنه.
  • «برای عکس واقعی، بی اتلاف بهتره.» بی اتلاف برای عکس واقعی خیلی سنگینه؛ با اتلاف با کیفیت خوب کافیه.
  • «کیفیت ۱۰۰ یعنی بهترین.» بالای ۹۰ معمولا فقط وزن اضافه می‌کنه.
  • «سرور WebP می‌فرسته، کش هم که هست.» بی Vary: Accept، کش ممکنه فرمت اشتباه رو به مرورگر اشتباه بده.

جمع‌بندی. آنچه از این درس با خودتان می‌برید.

  • WebP یه فرمت عکسه که همون عکس رو سبک‌تر از JPG و PNG نگه می‌داره.
  • دو حالت داره؛ با اتلاف برای عکس‌های واقعی، بی اتلاف برای طرح و نوشته.
  • شفافیت و عکس متحرک هم داره؛ یعنی جای JPG، PNG و GIF رو با هم می‌گیره.
  • اول اندازه‌ی عکس رو درست کنید، بعد به WebP ببرید، با کیفیت حدود ۷۵ تا ۸۵.
  • Squoosh توی مرورگر، بی فرستادن عکس به جایی، تبدیل و مقایسه رو نشون می‌ده.

خودتون رو بسنجید

۱۵ پرسش، هر بار تازه از میان ۳۰ پرسش این درس. آخرش فقط کارنامه رو می‌بینید: چند تا درست، چند تا نادرست.

خودتون رو بسنجید

۱۵ پرسش

  • هر بار پرسش‌ها و ترتیب گزینه‌ها عوض می‌شه.
  • تا آخر نمی‌گیم کدوم جواب درست بوده؛ می‌تونید برگردید و جوابتون رو عوض کنید.
  • آخرش کارنامه می‌گیرید: چند تا درست، چند تا نادرست.
  • اگه وسطش بستید، دوباره که باز کنید از همون‌جا ادامه می‌دید.

فصل‌های این درس