JPEG و PNG دیگه بس نیست. WebP و AVIF فرمت‌های مدرن با کیفیت بالا و حجم پایین سرعت سایت رو انقلابی میکنن.

WebP

Google 2010. حجم 25-35٪ کمتر از JPEG.
- Lossy و Lossless
- Transparency
- Animation

AVIF

2019 جدیدتر. حجم 50٪ کمتر از JPEG.
- کیفیت بالاتر
- HDR
- کندتر Encoding

سازگاری Browser

WebP: 96٪ مرورگرها
AVIF: 90٪ مرورگرها

Convert

Command Line

cwebp input.jpg -q 80 -o output.webp
avifenc input.jpg output.avif

Photoshop Plugin

SuperPNG، WebPShop

Online

Squoosh.app، cloudinary

<picture> Element

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg">
</picture>

مرورگر بهترین رو انتخاب میکنه.

WordPress

پلاگین‌ها:
- ShortPixel
- Smush
- Imagify
- EWWW Image Optimizer

Server Side

Cloudflare Polish یا Fastly Image Optimizer خودکار Convert میکنن.

Quality Settings

WebP: quality 75-85 معمول
AVIF: quality 40-60 معادل

Lossy vs Lossless

وب: تقریباً همیشه Lossy.
Print یا Archive: Lossless.

Transparent Images

WebP و AVIF هر دو Transparency پشتیبانی میکنن. جایگزین PNG.

Animation

Animated WebP جایگزین GIF. حجم خیلی کمتر.

SVG

برای Icon، لوگو، Vector. WebP/AVIF جایگزین Raster.

Content Delivery Network

Cloudflare Images، Bunny CDN خودکار Convert و Serve.

Progressive Loading

WebP و AVIF از Progressive پشتیبانی نمیکنن مثل JPEG.

Metadata

EXIF، Copyright حفظ میشه.

Color Profile

P3، sRGB پشتیبانی.

Testing

PageSpeed Insights توصیه میکنه.

سباهاست

LiteSpeed سباهاست خودکار WebP/AVIF Serve میکنه.

جمع‌بندی

WebP و AVIF فرمت‌های آینده وب هستن. با سوئیچ کردن، سرعت سایت رو دو برابر کنید.