تبدیل تصویر به WebP و AVIF: کی و چطور؟
۳ دقیقه مطالعهبروزرسانی:
تصویر معمولاً سنگین‌ترین بخش یک صفحه است. تبدیل درست فرمت و کیفیت می‌تواند حجم تصویرها را به‌طور محسوس کم کند، بی‌آنکه با چشم تفاوتی دیده شود. اینجا می‌گوییم کدام فرمت را کجا بگذارید و چطور بی‌دردسر تبدیل کنید.
هر فرمت برای چه کاری خوب است؟
| فرمت | نقطه‌ی قوت | محدودیت | مناسب برای |
|---|---|---|---|
| JPEG | رایج و سازگار با همه‌چیز | شفافیت ندارد، حجم نسبتاً زیاد | عکس، وقتی سازگاری مطلق می‌خواهید |
| PNG | بدون افت کیفیت، شفافیت | برای عکس سنگین است | لوگو، تصویر با لبه‌ی تیز، اسکرین‌شات |
| WebP | حجم کم، شفافیت و انیمیشن | در ویرایشگرهای قدیمی ممکن است باز نشود | انتخاب پیش‌فرض وب |
| AVIF | معمولاً کوچک‌ترین حجم | ساخت کندتر؛ مرورگرهای خیلی قدیمی نمی‌شناسند | تصویرهای مهم و بزرگ، با جایگزین |
| SVG | برداری، در هر اندازه شفاف | فقط برای گرافیک ساده | آیکون، لوگو، نمودار |
| GIF | همه‌جا باز می‌شود | کیفیت و حجم ضعیف | فقط وقتی راه دیگری نیست؛ WebP انیمیشن بهتر است |
کیفیت چقدر باشد؟
کیفیت بالاتر لزوماً بهتر نیست. برای عکس، معمولاً کیفیتی بین ۷۵ تا ۸۵ حجم را بسیار کم می‌کند و تفاوتش با چشم دیده نمی‌شود. اعداد پایین‌تر از ۶۰ معمولاً ریزدانگی و لکه‌ی رنگی ایجاد می‌کنند. بهترین راه امتحان است: با ابزار تصویر پیش‌نمایش و تفاوت حجم را ببینید و پایین‌ترین کیفیتی را انتخاب کنید که هنوز خوب است.
گام‌ها
- اول اندازه را درست کنید. تصویری که در صفحه ۶۰۰ پیکسل نمایش داده می‌شود، لازم نیست ۴۰۰۰ پیکسل باشد. عرض را تا حدود دو برابر اندازه‌ی نمایش (برای صفحه‌های با تراکم بالا) محدود کنید.
- تصویر را در ابزار تصویر بارگذاری کنید.
- فرمت WebP را انتخاب کنید (یا AVIF برای تصویرهای مهم).
- کیفیت را تنظیم و حجم قبل و بعد را مقایسه کنید.
- فایل را دانلود و جایگزین کنید.
استفاده‌ی امن در سایت
برای اینکه مرورگرهای ناشناس با AVIF یا WebP مشکل نداشته باشند، از picture استفاده کنید؛ مرورگر اولین فرمتی را که می‌شناسد انتخاب می‌کند:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="توضیح تصویر" width="800" height="500">
</picture>- همیشه
widthوheightرا بنویسید تا جا از قبل رزرو شود و CLS خراب نشود. - به تصاویر زیر صفحه
loading="lazy"بدهید، ولی به تصویر اصلی بالای صفحه (که معمولاً LCP است) ندهید. altتوصیفی بنویسید؛ هم برای دسترس‌پذیری و هم برای سئوی تصویر.
اشتباه‌های رایج
- تبدیل JPEG به PNG برای «بهتر شدن کیفیت»؛ کیفیت از دست‌رفته برنمی‌گردد و حجم چند برابر می‌شود.
- فشرده‌سازی چندباره‌ی یک فایل. هر بار کیفیت کم می‌شود؛ همیشه از فایل اصلی شروع کنید.
- بزرگ کردن تصویر کوچک که فقط حجم را بیشتر و تصویر را تار می‌کند.
- گذاشتن عکس خام دوربین (چند مگابایت) در صفحه.
با ابزار امتحان کنید
سؤالات متداول
همه‌ی مرورگرها WebP را نمایش می‌دهند؟
تقریباً همه‌ی مرورگرهای امروزی بله. برای اطمینان کامل از picture با جایگزین JPEG استفاده کنید.
AVIF حتماً از WebP بهتر است؟
معمولاً حجم کمتری می‌دهد، ولی ساخت آن کندتر است و پشتیبانی مرورگرهای قدیمی‌تر کمتر. اگر زمان کم دارید، WebP انتخاب ساده و کافی است.
اطلاعات مکان و دوربین (EXIF) در تصویر می‌ماند؟
در ابزار ما به‌طور پیش‌فرض حذف می‌شود، که برای حریم خصوصی و کم شدن حجم خوب است. اگر لازم دارید بماند، گزینه‌اش را خاموش کنید.