Progressive JPEG چیست و چطور می‌تواند به افزایش سرعت سایت کمک کند؟

بذارید حدس بزنم. یه جایی توی یه راهنمای بهینه‌سازی خوندید که «حتماً تصاویرتون رو Progressive کنید» و از اون موقع یه سوال ته ذهنتون مونده: این کار واقعاً سایت رو سریع‌تر می‌کنه یا فقط یه اصطلاح قشنگه که همه تکرارش می‌کنن؟

قبل از جواب، یه عدد بگم که بفهمید چرا اصلاً سرِ این موضوع بحث می‌کنیم. توی یه صفحه‌ی وب معمولی، سنگین‌ترین بخش نه متنه نه CSS نه جاوااسکریپت — عکس‌هاست. تصاویر تقریباً یک‌سوم کل حجم صفحه رو می‌بلعن و بزرگ‌ترین چیزی‌ان که مرورگر باید دانلود کنه. حالا وقتی یادتون بیاد حجم یه صفحه‌ی موبایلی این روزها راحت به چند مگابایت می‌رسه، می‌فهمید چرا هر تغییر کوچیکی روی عکس‌ها مستقیم می‌ره روی سرعت سایت و در نهایت رتبه‌تون توی گوگل.

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

توی این مقاله می‌خوام بدون شعار و تعارف همه‌چیز رو براتون باز کنم: اول ببینیم Progressive JPEG دقیقاً چیه، بعد بذاریمش کنار رقیب‌های جدیدش یعنی WebP و AVIF، معایب واقعی‌اش رو هم بگیم، و آخرش یه مسیر عملی قدم‌به‌قدم بدم دستتون، مخصوصاً اگه کاربر وردپرسید. قرارمون اینه که وقتی به آخر مقاله رسیدید، بدون دودلی بدونید برای سایت خودتون باید چی کار کنید.

Progressive JPEG چیست؟

برای اینکه بفهمیم قضیه از چه قراره، اول یه چیز ساده رو باید بدونید. هر تصویر JPEG وقتی توی مرورگر باز می‌شه، طی یک یا چند مرحله رمزگشایی و روی صفحه کشیده می‌شه؛ به این مرحله‌ها می‌گن اسکن (Scan). تمام تفاوت بین دو نوع JPEG دقیقاً برمی‌گرده به اینکه این اسکن‌ها چطور چیده شدن.

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

اما توی Progressive JPEG ماجرا فرق داره. اینجا اطلاعات تصویر لایه‌لایه ذخیره شده. مرورگر اول یه نسخه‌ی محو و کم‌جزئیات از کلِ تصویر نشون می‌ده و بعد با رسیدن لایه‌های بعدی، کم‌کم واضحش می‌کنه تا آخرش عکس کامل جلوی چشمتون باشه. یعنی شما از همون ثانیه‌ی اول می‌فهمید عکس راجع‌به چیه، حتی اگه هنوز شفاف نشده باشه.

حالا یه نکته که بهتره همین اول قورتش بدید: این کار حجم فایل رو تقریباً تغییر نمی‌ده. عکس نه سبک‌تر می‌شه نه زودتر دانلود؛ فقط کاربر حس می‌کنه سایتتون سریع‌تر لود شده. این تمایز ظریف در واقع کلید فهمیدن کل مقاله‌ست و چند بار دیگه هم بهش برمی‌گردیم.

و یه اشاره‌ی کوتاه به جایگاهش توی سال ۲۰۲۶: Progressive JPEG هنوز توی شرایط خاص (تصاویر بزرگ، اینترنت ضعیف، مرورگرهای قدیمی) کارتون رو راه می‌ندازه، ولی اگه دنبال کاهش واقعیِ حجم و بهبود سرعت و سئوئید، فرمت‌های مدرن‌تر مثل WebP و مخصوصاً AVIF اولویت اولن. بهترین نقشی که امروز براش می‌شه در نظر گرفت، نقش فرمت پشتیبان (Fallback) ئه؛ که مفصل بهش می‌رسیم.

فایل JPEG چطور لود می‌شود؟

بذارید با یه مثال آشنا روشنش کنم. حتماً شما هم تجربه‌ی باز کردن یه سایت سنگین با اینترنت افتضاح رو داشتید. اگه تصویر Baseline باشه، عکس مثل یه پرده از بالا آروم‌آروم میاد پایین؛ نصف بالاش اومده و نصف پایین هنوز سفیده. ولی اگه همون تصویر Progressive باشه، از اول یه طرح محو از کل عکس جلوی چشمتونه و فقط داره رفته‌رفته شفاف می‌شه.

اینجا همون نکته‌ی بالا رو دوباره تأکید می‌کنم، چون خیلی‌ها اشتباه برداشت می‌کنن: Progressive JPEG باعث نمی‌شه تصویر زودتر دانلود بشه. حجم فایل تقریباً همونیه که بود و در نهایت کل داده‌ها باید برسن. تنها چیزی که عوض می‌شه تجربه‌ی درک‌شده‌ی کاربره (Perceived Performance)، یعنی کاربر حس می‌کنه عکس زودتر آماده شده، چون از ثانیه‌های اول یه چیزی برای دیدن داره و با خیال راحت‌تری منتظر می‌مونه.

تفاوت Progressive JPEG و Baseline JPEG

جالبه که شما احتمالاً بارها با هر دو نوع روبه‌رو شدید و فقط اسمش رو نمی‌دونستید. خیلی ساده کنار هم بذاریمشون:

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

برای اینکه توی یک نگاه دستتون بیاد:

یه چیزی رو حتماً یادتون باشه: Progressive JPEG برای همه‌ی تصاویر گزینه‌ی خوبی نیست. برای عکس‌های ریز مثل آیکون و لوگو، اون ساختار لایه‌لایه یه سربار اضافه می‌سازه و ممکنه حجم فایل رو حتی بیشتر کنه. قاعده‌ی کلی ساده‌ست: Progressive رو برای تصاویر بزرگ و محتوایی نگه دارید، نه برای المان‌های ریز گرافیکی.

آیا Progressive JPEG توی سال ۲۰۲۶ هنوز مهم هست؟

رک بگم: آره، ولی نه به اندازه‌ی گذشته و فقط توی شرایط خاص.

تا همین چند سال پیش این فرمت جزو توصیه‌های ثابت هر راهنمای بهینه‌سازی بود. ولی وب امروز با اون موقع زمین تا آسمون فرق داره. دو تا تغییر بزرگ باعث شدن نقشش کم‌رنگ بشه: عوض شدن پروتکل‌هایی که منابع سایت رو لود می‌کنن، و پیشرفت چشمگیر شبکه‌های موبایل. جدا جدا ببینیمشون.

نقش HTTP/2 و HTTP/3

اول باید بدونید چرا Progressive JPEG توی گذشته این‌قدر مهم بود. توی دوران HTTP/1.1، مرورگر فقط می‌تونست تعداد محدودی (معمولاً حدود ۶ تا) اتصال هم‌زمان به هر دامنه باز کنه. یعنی اگه صفحه‌تون ۲۰ تا عکس داشت، عکس‌ها مجبور بودن صف بکشن و پشت سر هم لود بشن. توی همچین وضعیتی Progressive واقعاً به درد می‌خورد، چون دست‌کم کاربر همون اول طرح کلی هر عکس رو می‌دید و انتظار کمتر آزاردهنده می‌شد.

اما با اومدن HTTP/2 ورق برگشت. این پروتکل قابلیتی به اسم Multiplexing داره که اجازه می‌ده کلی درخواست هم‌زمان از یک اتصال رد و بدل بشن. در عمل یعنی اون صف طولانی عملاً از بین رفت و تصاویر خیلی موازی‌تر لود می‌شن. امروز HTTP/2 با سهمی بیش از نصف کل سایت‌ها پرکاربردترین پروتکل وبه و همچنان داره رشد می‌کنه.

نسل بعدی یعنی HTTP/3 یه قدم جلوتر رفته و به‌جای TCP روی پروتکل QUIC (مبتنی بر UDP) کار می‌کنه. مزیت اصلی‌اش حل مشکل «انسداد سرِ صف» (Head-of-Line Blocking) ئه و مخصوصاً توی شبکه‌های ضعیف و پر از افت بسته عملکرد بهتری داره. تا اوایل ۲۰۲۶ همه‌ی مرورگرهای اصلی (کروم، فایرفاکس، سافاری و اج) به‌صورت بومی ازش پشتیبانی می‌کنن و سهمش هم داره بالا می‌ره.

نتیجه این شد که اون سناریوی قدیمیِ عکس‌های قطره‌چکانی امروز خیلی کمتر پیش میاد. برای همینه که سود روزمره‌ی Progressive JPEG کمتر شده، ولی نه صفر. هر جا شبکه واقعاً ضعیف باشه، اون حس «زودتر آماده شدن» هنوز ارزش داره.

پیشرفت شبکه‌های موبایل

تغییر بزرگ دوم خودِ اینترنت موبایله. با گسترش ۴G و ۵G، خیلی از کاربرها دیگه اون لودِ کشدار رو تجربه نمی‌کنن و عکس‌ها تقریباً آنی باز می‌شه. توی این حالت، تفاوت Progressive و Baseline تقریباً به چشم نمیاد.

اما یه نکته‌ی مهم: همه‌ی کاربرها توی شرایط ایده‌آل نیستن. هنوز بخش زیادی از مخاطب‌ها ممکنه با اینترنت ضعیف، شبکه‌ی شلوغ یا سرعت پایین بیان سراغ سایتتون، مخصوصاً توی مناطقی که زیرساخت قوی نیست یا توی ساعت‌های پرترافیک. دقیقاً برای همین گروهه که Progressive JPEG هنوز می‌تونه فرق ایجاد کنه.

پس جمع‌بندی این بخش: اهمیت Progressive JPEG توی ۲۰۲۶ کاملاً به مخاطب و شرایط سایت خودتون بستگی داره. بدنه‌ی کاربرهاتون اینترنت پرسرعت دارن؟ تأثیرش ناچیزه. بخش قابل‌توجهی گاهی با اتصال ضعیف میان؟ هنوز یه گزینه‌ی منطقیه.

وضعیت اینترنت ایران

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

توی همچین فضایی، همون حس «زودتر آماده شدن» می‌تونه فرق محسوسی توی تجربه‌ی کاربر بذاره و باعث بشه آدم‌ها زودتر سایت رو ترک نکنن. پس اگه ترافیک اصلیتون داخلیه، این فرمت رو باید جدی‌تر از یه سایت کاملاً بین‌المللی بگیرید.

البته یادتون باشه Progressive JPEG به‌تنهایی معجزه نمی‌کنه. بهترین نتیجه وقتیه که کنار چند تا کار دیگه انجامش بدید، فعال کردن بارگذاری تنبل (Lazy Loading) تا عکس‌های پایین صفحه فقط موقع نیاز لود بشن، نگه داشتن یه نسخه‌ی پشتیبان درست، و از همه مهم‌تر تست کردن سایت توی حالت اینترنت کند تا ببینید کاربر واقعی چه تجربه‌ای داره. همه‌ی این‌ها رو پایین‌تر کامل توضیح می‌دم.

مزایای Progressive JPEG

حالا که فهمیدیم کجا به درد می‌خوره، مزایای واقعی‌اش رو مرور کنیم.

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

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

۳. پشتیبانی کامل و بدون دردسر. خبر خوب اینکه نگرانی سازگاری اصلاً وجود نداره. همه‌ی مرورگرهای مدرن بدون استثنا Progressive JPEG رو نشون می‌دن. لازم نیست نگران باشید برای بخشی از کاربرها خراب بشه.

اما (این «اما» خیلی مهمه) هیچ‌کدوم از این‌ها به معنای کاهش واقعی حجم فایل یا سریع‌تر شدنِ واقعیِ دانلود نیست. همه‌چیز برمی‌گرده به تجربه‌ی درک‌شده. این رو نگه دارید توی ذهنتون، چون بخش بعدی دقیقاً از همین‌جا شروع می‌شه.

معایب و محدودیت‌ها

هیچ ابزاری بی‌نقص نیست و این یکی هم استثنا نیست.

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

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

کمی پردازش بیشتر می‌خواد. مرورگر برای نمایش یه Progressive JPEG باید چند تا اسکن رو پردازش کنه که نسبت به Baseline کمی CPU و حافظه‌ی بیشتری مصرف می‌کنه. روی دستگاه‌های قدرتمند اصلاً به چشم نمیاد، ولی روی گوشی‌های قدیمی می‌تونه یه عامل جزئی باشه.

تأثیر واقعی روی LCP و Core Web Vitals

اینجا باید یکی از بزرگ‌ترین سوءتفاهم‌ها رو روشن کنیم. خیلی‌ها فکر می‌کنن چون Progressive JPEG زودتر چیزی نشون می‌ده، پس باید نمره‌ی LCP (یعنی Largest Contentful Paint، زمان نمایش بزرگ‌ترین عنصر صفحه) رو هم بهتر کنه. ولی ماجرا این‌قدرها ساده نیست.

گوگل برای محاسبه‌ی LCP معمولاً زمانی رو در نظر می‌گیره که بزرگ‌ترین تصویر به‌طور کامل لود و رندر شده، نه اون لحظه‌ای که نسخه‌ی محوش ظاهر می‌شه. برای همین Progressive JPEG توی بیشتر موارد نه‌تنها به LCP کمکی نمی‌کنه، بلکه به خاطر همون اسکن‌های اضافه گاهی می‌تونه کمی بدترش هم بکنه. پس اگه تمرکزتون روی Core Web Vitals ئه، این فرمت به‌تنهایی راه‌حل نیست.

اون چیزی که واقعاً LCP رو بهتر می‌کنه: کاهش واقعی حجم تصویر (با WebP و AVIF)، انتخاب ابعاد درست، و پیش‌بارگذاری (Preload) تصویر اصلی بالای صفحه. این‌ها اهرم‌های واقعی سرعت و سئوئن.

و در نهایت، با اومدن WebP و AVIF که هم حجم رو واقعاً کم می‌کنن و هم می‌تونن بارگذاری تدریجی رو شبیه‌سازی کنن، خیلی از کارشناس‌ها معتقدن به‌جای وقت گذاشتن روی Progressive JPEG بهتره مستقیم برید سراغ فرمت‌های جدید. که دقیقاً موضوع بخش بعدیه.

Progressive JPEG در برابر WebP و AVIF

توی سال ۲۰۲۶، JPEG دیگه فرمت اولِ وب نیست. دو تا رقیب قدرتمند به اسم WebP و AVIF اومدن که بازی رو عوض کردن. برخلاف Progressive JPEG که فقط حس سریع‌تر بودن می‌ساخت، این دو تا واقعاً حجم فایل رو پایین میارن و این یعنی تأثیر مستقیم روی سرعت واقعی و سئو.

کوتاه معرفی‌شون کنم. WebP رو گوگل توسعه داده و معمولاً تصاویر رو حدود ۲۵ تا ۳۵ درصد کوچک‌تر از JPEG با کیفیت مشابه ارائه می‌ده. از ۲۰۲۰ به بعد همه‌ی مرورگرهای مدرن (از جمله سافاری) پشتیبانی می‌کنن و دیگه کاملاً جا افتاده.

AVIF اما نسل جدیدتر و قوی‌تره. معمولاً حدود ۱۵ تا ۲۵ درصد کوچک‌تر از WebP و در مقایسه با JPEG تا حدود ۵۰ درصد سبک‌تره. خبر مهم اینکه نگرانی پشتیبانی هم تقریباً تموم شده؛ تا اوایل ۲۰۲۶ پوشش جهانی AVIF به حدود ۹۴ درصد رسیده و همه‌ی مرورگرهای اصلی به‌صورت پیش‌فرض ازش پشتیبانی می‌کنن. یعنی AVIF حالا به همون نقطه‌ی اطمینانی رسیده که WebP چند سال پیش بهش رسیده بود.

استراتژی هوشمندانه: فرمت اصلی + فرمت پشتیبان

شاید با خودتون بگید «خب پس JPEG رو کامل بذاریم کنار و فقط AVIF بذاریم!» ولی صبر کنید. با اینکه AVIF عالیه، هنوز یه درصد کوچیکی از کاربرها، کسایی که با مرورگر یا دستگاه خیلی قدیمی میان، بعضی ربات‌ها و بعضی سرویس‌های شبکه‌ی اجتماعی، ممکنه نتونن ببیننش. اگه فقط AVIF بذارید، برای این گروه تصویر اصلاً نمایش داده نمی‌شه.

راه حرفه‌ای اینه که یه ساختار چندلایه بچینید:

1. AVIF به‌عنوان فرمت اصلی برای مرورگرهای جدید (سبک‌ترین حالت)
2. WebP به‌عنوان لایه‌ی دوم برای مرورگرهایی که AVIF رو نمی‌شناسن
3. JPEG (ترجیحاً Progressive) به‌عنوان آخرین لایه‌ی پشتیبان برای بقیه

این‌طوری هر کاربر بهترین نسخه‌ای رو که مرورگرش می‌تونه نمایش بده می‌گیره و هیچ‌کس بدون عکس نمی‌مونه. دقیقاً توی همین لایه‌ی آخره که Progressive JPEG ارزش واقعی‌اش رو نشون می‌ده.

چطور این استراتژی را پیاده کنیم؟

راه‌حل یه عنصر ساده‌ی HTML به اسم <picture> ئه. کارش اینه که چند نسخه از یه تصویر رو به مرورگر معرفی می‌کنه و خودِ مرورگر اولین نسخه‌ای رو که می‌شناسه برمی‌داره:

html

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="توضیح دقیق تصویر" width="800" height="600" loading="lazy">
</picture>

خط به خط چی کار می‌کنه:

• مرورگر از بالا به پایین <source>ها رو بررسی می‌کنه. اول AVIF رو امتحان می‌کنه؛ پشتیبانی کرد، همون رو لود می‌کنه و تمام.
• نشناخت؟ می‌ره سراغ WebP.
• هیچ‌کدوم نشد؟ می‌رسه به <img> و نسخه‌ی JPEG رو لود می‌کنه.

یه نکته که خیلی‌ها ازش غافل می‌شن: اون <img> آخر فقط یه پشتیبان معمولی نیست، نگهبان همه‌ی اطلاعات حیاتیه. ویژگی alt برای سئو و دسترس‌پذیری، و width و height برای جلوگیری از پرش چیدمان (که مستقیم روی نمره‌ی CLS اثر می‌ذاره) باید روی همین <img> تعریف بشن. loading="lazy" هم باعث می‌شه تصویر فقط موقع نیاز لود بشه.

ترتیب <source>ها هم مهمه: همیشه مدرن‌ترین و سبک‌ترین فرمت (AVIF) باید اول بیاد، چون مرورگر اولین گزینه‌ای که بشناسه رو برمی‌داره و بقیه رو نگاه نمی‌کنه.

اگه بخواید یه قدم حرفه‌ای‌تر برید، می‌تونید همین ساختار رو با srcset و sizes ترکیب کنید تا برای هر اندازه‌ی صفحه ابعاد مناسبی سرو بشه (تصاویر ریسپانسیو). ولی اون خودش یه مقاله‌ی جداست و برای الان همین ساختار پایه کافیه.

چطور بفهمیم سایتمان از کدام فرمت استفاده می‌کند؟

قبل از هر تغییری باید بدونید الان توی چه وضعیتی هستید. هیچ منطقی نداره تصاویری رو تبدیل کنید که از قبل Progressive هستن.

روش اول — خط فرمان. اگه با ترمینال راحتید، مطمئن‌ترین راه ابزار رایگان ImageMagick ئه:

bash

identify -verbose image.jpg | grep -i interlace

اگه توی خروجی Interlace: None دیدید، یعنی تصویرتون Baseline ئه. اگه Interlace: JPEG (یا Plane) بود، یعنی همون Progressive ئه که دنبالشید. ساده و قطعی.

روش دوم — ابزارهای آنلاین. نمی‌خواید درگیر ترمینال بشید؟ آدرس تصویر یا خود فایل رو توی یه ابزار آنالیز آنلاین آپلود کنید تا نوع فرمت و مشخصاتش رو نشون بده. برای چک کردن سریع یکی دو تا عکس عالیه.

روش سوم — تست کل سایت با WebPageTest. می‌خواید به‌جای یه عکس، وضعیت کلی سایتتون رو بسنجید؟ آدرس سایت رو وارد کنید، تست رو اجرا کنید و توی نتایج دنبال بخش تصاویر و گزینه‌ی «Progressive JPEGs» بگردید. علامت رد یا FAILED دیدید؟ یعنی تصاویرتون هنوز Baseline هستن.

یه نکته‌ی صادقانه: رابط کاربری WebPageTest توی این سال‌ها تغییر کرده و ممکنه مسیر دقیق این گزینه با چیزی که توی راهنماهای قدیمی دیدید فرق داشته باشه. اگه دقیقاً همون مسیر رو پیدا نکردید نگران نشید، توی بخش بهینه‌سازی تصاویر بگردید. ضمناً یادتون باشه این ابزار از سرورهای خارج تست می‌گیره، پس نتیجه‌ی سرعتش لزوماً همون چیزی نیست که کاربر داخلی شما تجربه می‌کنه.

روش‌های تبدیل و بهینه‌سازی

یه یادآوری قبل از شروع: توی ۲۰۲۶ بهترین استراتژی برای بیشتر سایت‌ها اینه که فرمت اصلیتون WebP یا AVIF باشه و Progressive JPEG فقط پشتیبان بمونه. خبر خوب اینکه خیلی از این روش‌ها هر دو کار رو هم‌زمان انجام می‌دن.

روش اول — ابزارهای آنلاین (برای تعداد کم)

اگه فقط چند ده تصویر دارید، راحت‌ترین راه همینه.

برای کنترل دقیق روی یک تصویر، Squoosh (ساخته‌ی گوگل) فوق‌العاده‌ست؛ هم انکودر MozJPEG (که گزینه‌ی Progressive داره) رو پشتیبانی می‌کنه، هم WebP و AVIF، و کل پردازش داخل مرورگر خودتون انجام می‌شه (یعنی عکستون جایی آپلود نمی‌شه). فقط بدونید که Squoosh هرچند هنوز کار می‌کنه، از ۲۰۲۳ به بعد به‌روزرسانی مهمی نداشته و هر بار فقط یک تصویر رو پردازش می‌کنه.

عکس بیشتری دارید و دنبال پردازش دسته‌ای هستید؟ TinyPNG انتخاب خوبیه که JPEG، PNG، WebP و AVIF رو پشتیبانی می‌کنه و می‌تونه حجم رو تا حدود ۸۰ درصد کم کنه.

روش دوم — نرم‌افزار دسکتاپ (کنترل بیشتر)

ترجیح می‌دید آفلاین کار کنید؟ Caesium Image Compressor یه گزینه‌ی رایگان و متن‌باز عالیه که روی ویندوز، مک و لینوکس کار می‌کنه و پردازش دسته‌ای داره. (اگه قبلاً اسم نرم‌افزار قدیمی RIOT رو شنیدید، Caesium جایگزین مدرن و به‌روزِ همونه.)

راه دیگه GIMP ئه که رایگان و چندسکوییه. تصویر رو باز کنید و موقع Export As با فرمت JPEG، گزینه‌ی Progressive رو توی تنظیمات پیشرفته تیک بزنید. مناسب وقتیه که می‌خواید روی تک‌تک تصاویر کنترل کامل داشته باشید.

روش سوم — افزونه‌های وردپرس (بهترین راه برای سایت‌های واقعی)

اگه سایتتون صدها یا هزاران تصویر داره، تبدیل دستی عملاً غیرممکنه. اینجاست که افزونه‌های بهینه‌سازی تصویر نجاتتون می‌دن؛ یک بار تنظیمشون می‌کنید و از اون به بعد هر تصویری که آپلود می‌کنید خودکار بهینه می‌شه.

یه نکته‌ی مهم: بیشتر افزونه‌های خوب توی ۲۰۲۶ دیگه تمرکزشون رو فقط روی Progressive JPEG نذاشتن، بلکه تصاویرتون رو مستقیماً به WebP و AVIF تبدیل می‌کنن و همون ساختار <picture> رو هم پشت صحنه براتون اجرا می‌کنن. یعنی دقیقاً همون استراتژی «فرمت اصلی مدرن + پشتیبان» رو خودکار پیاده می‌کنن.

از بین گزینه‌های معتبر و پرکاربرد:

• ShortPixel و Imagify: دو تا از محبوب‌ترین‌ها که هم تبدیل به WebP و AVIF رو انجام می‌دن و هم توی تنظیمات پیشرفته گزینه‌ی فعال‌سازی Progressive JPEG دارن. دنبال یه گزینه‌ی همه‌کاره‌اید؟ این دو تا انتخاب‌های امنی‌ان.
• Smush و EWWW Image Optimizer: دو افزونه‌ی پرنصب، قدیمی و قابل‌اعتماد با امکانات کامل بهینه‌سازی و بارگذاری تنبل.
• Converter for Media و CompressX: گزینه‌های سبک و مدرن که مخصوصاً روی تبدیل سریع به فرمت‌های نسل جدید تمرکز دارن.

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

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

راه‌اندازی افزونه Imagify (قدم به قدم)

از پیشخان وردپرس برید به افزونه‌ها ← افزودن، عبارت «Imagify» رو جستجو کنید و نصب و فعالش کنید.

برخلاف بعضی افزونه‌ها، Imagify برای کار کردن به یه کلید API رایگان نیاز داره. بعد از فعال‌سازی روی «Create a free API key» بزنید، ایمیلتون رو وارد کنید و کلیدی که براتون میاد رو توی تنظیمات افزونه بذارید و ذخیره کنید. تبدیل به WebP و AVIF توی همون پلن رایگان در دسترسه، پس از همون اول می‌تونید سراغ فرمت‌های نسل جدید برید.

بعد از اتصال، برید به تنظیمات ← Imagify و این‌ها رو تنظیم کنید:

• گزینه‌ی بهینه‌سازی خودکار هنگام آپلود رو فعال کنید.
• نگه‌داشتن نسخه‌ی پشتیبان از تصاویر اصلی رو هم فعال بذارید (تا اگه خواستید بتونید همه‌چیز رو برگردونید).
• حالت فشرده‌سازی رو روی Smart Compression رها کنید که به‌صورت پیش‌فرض تعادل خوبی بین کیفیت و حجم برقرار می‌کنه.

توی تب Optimization، فرمت نسل جدید (WebP و/یا AVIF) رو انتخاب کنید و گزینه‌ی «Display images in Next-Gen format on the site» رو فعال کنید. اینجا دو روش نمایش دارید: Use Rewrite Rules که توصیه‌شده‌ست و کدِ سایت رو تغییر نمی‌ده، و Use picture tags که اگه از Cloudflare یا CDN استفاده می‌کنید مناسب‌تره.

اگه می‌خواید JPEG پشتیبانتون هم Progressive باشه، توی تنظیمات پیشرفته (مخصوصاً توی ShortPixel و Imagify) تیک گزینه‌ی Progressive JPEG رو هم بزنید.

و آخرش، دکمه‌ی بهینه‌سازی انبوه (Bulk Optimization) رو بزنید تا افزونه کل کتابخانه‌ی رسانه‌ی موجودتون رو هم یکجا پردازش کنه.

خبر خوب اینکه تقریباً همه‌ی این افزونه‌ها از فایل‌های اصلیتون نسخه‌ی پشتیبان نگه می‌دارن. یعنی اگه از نتیجه راضی نبودید می‌تونید برگردید عقب. پس با خیال راحت امتحانشون کنید.

روش چهارم — CDN و خط فرمان (حرفه‌ای)

اگه سایت پربازدید دارید یا توسعه‌دهنده‌اید، حرفه‌ای‌ترین راه استفاده از CDN با قابلیت بهینه‌سازی تصویره. سرویس‌هایی مثل Cloudflare (با ویژگی Polish)، Bunny Optimizer یا Cloudinary می‌تونن خودکار و در لحظه بهترین فرمت رو برای هر کاربر سرو کنن، بدون اینکه لازم باشه حتی یه فایل رو دستی تبدیل کنید. هم بار سرورتون کم می‌شه، هم سرعت تحویل بالا می‌ره.

و برای کسایی که دوست دارن همه‌چیز توی یه فرایند خودکار (مثلاً موقع بیلد) انجام بشه، ابزارهای خط فرمان مثل cwebp (برای WebP)، avifenc (برای AVIF)، ImageMagick و کتابخانه‌ی Sharp بیشترین کنترل و سرعت رو می‌دن.

جایگزینی تصاویر جدید و مدیریت کش

تا اینجا تصاویرتون رو بهینه کردید. حالا باید این نسخه‌های جدید واقعاً روی سایت بشینن.

اگه با افزونه‌ی وردپرس کار کردید، این مرحله خودکار انجام شده و کاری براتون نمی‌مونه، مستقیم برید سراغ بخش کش. ولی اگه دستی (با ابزار آنلاین یا نرم‌افزار دسکتاپ) کار کردید، دو راه دارید:

راه اول: File Manager کنترل‌پنل هاست (مثل cPanel یا DirectAdmin). برید به مسیر public_html/wp-content/uploads/ و فایل جدید رو با همون نام قبلی آپلود و جایگزین کنید.

راه دوم: کلاینت FTP مثل FileZilla. به هاست وصل بشید، برید به پوشه‌ی تصاویر و فایل‌های قدیمی رو با جدیدها عوض کنید.

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

چرا بعد از جایگزینی هنوز نسخه‌ی قدیمی نمایش داده می‌شود؟

این یکی از رایج‌ترین سوال‌هاست. فایل رو عوض کردید ولی سایت رو باز می‌کنید و همون عکس قدیمی رو می‌بینید! دلیلش اینه که نسخه‌ی قدیمی توی یکی از این لایه‌های کش ذخیره شده:

• کش مرورگر خودتون: ساده‌ترین حالت. یه Hard Refresh بزنید (Ctrl+Shift+R) یا کش مرورگرتون رو پاک کنید.
• کش افزونه‌ی کش وردپرس: اگه از WP Rocket، LiteSpeed Cache یا W3 Total Cache استفاده می‌کنید، از داخل خود افزونه دکمه‌ی Clear/Purge Cache رو بزنید.
• کش CDN: اگه Cloudflare یا مشابهش دارید، باید کش CDN رو هم جداگانه Purge کنید، وگرنه همچنان نسخه‌ی قدیمی رو به کاربرها می‌ده.

بعد از پاک کردن این‌ها، نسخه‌ی جدید به همه نمایش داده می‌شه. اگه به هر دلیلی نمی‌تونید کش رو پاک کنید، یه راه جایگزین اینه که اسم فایل جدید رو کمی تغییر بدید (مثلاً یه شماره‌ی نسخه بهش اضافه کنید) و لینک‌ها رو به‌روز کنید؛ ولی این دردسر بیشتری داره و معمولاً پاک کردن کش راه ساده‌تریه.

تست نهایی و تأیید عملکرد

رسیدیم به مرحله‌ی آخر. بعد از این‌همه زحمت باید مطمئن بشید واقعاً به نتیجه رسیدید. سه تا کار پیشنهاد می‌کنم.

۱. دوباره فرمت تصاویر رو چک کنید. همون روش تشخیص رو دوباره اجرا کنید. با خط فرمان کار می‌کنید؟ دستور ImageMagick رو روی یکی از تصاویر جدید بزنید و ببینید حالا Interlace: JPEG نشون می‌ده. با WebPageTest تست می‌کنید؟ ببینید وضعیت بخش Progressive JPEGs از FAILED به PASSED تغییر کرده باشه. اگه هنوز FAILED بود، یا چند تا تصویر جا موندن یا دارید کش قدیمی رو می‌بینید.

۲. نمره‌ی کلی سرعت رو بسنجید. Google PageSpeed Insights رو روی صفحاتتون اجرا کنید. یه نکته‌ی صادقانه: این ابزار مستقیماً Progressive JPEG رو بررسی نمی‌کنه، ولی اگه تصاویرتون رو به WebP یا AVIF هم تبدیل کرده باشید، باید یه بهبود واضح توی بخش بهینه‌سازی تصاویر و حتی توی نمره‌ی LCP ببینید. این همون تأثیر واقعی روی سئوئه که دنبالش بودیم.

۳. تجربه‌ی واقعی کاربر رو تست کنید. این مهم‌ترین و در عین حال فراموش‌شده‌ترین مرحله‌ست. توی کروم DevTools رو باز کنید، برید به تب Network و سرعت اینترنت رو روی حالت کند (مثلاً Slow 4G) بذارید. حالا صفحه رو رفرش کنید و با چشم خودتون ببینید تصاویر Progressive چطور از همون اول طرح کلی‌شون ظاهر می‌شه. این دقیقاً همون تجربه‌ایه که کاربرهاتون با اینترنت ضعیف خواهند داشت و اگه مخاطب اصلیتون داخل ایرانه، این تست بیشترین ارزش رو براتون داره. در نهایت سایت رو روی یه موبایل واقعی هم باز کنید و زمان بارگذاری قبل و بعد رو مقایسه کنید.

بالاخره برای سایت شما چی درسته؟

خب، به انتهای راه رسیدیم. جواب صادقانه اینه که بستگی به وضعیت خودتون داره. چند تا سناریوی رایج رو ببینید تا جای خودتون رو پیدا کنید.

سناریو اول — سایت مدرن دارید. سایتتون وردپرسیه و می‌تونید افزونه‌ی بهینه‌سازی نصب کنید؟ توصیه‌ی روشن من اینه که مستقیم برید سراغ WebP و AVIF. این‌ها کاهش حجم واقعی ایجاد می‌کنن و تأثیر مستقیم روی سرعت و سئو دارن. توی این حالت Progressive JPEG فقط به‌عنوان فرمت پشتیبان برای اون اقلیت کوچیک ارزش داره و نباید دغدغه‌ی اصلیتون باشه.

سناریو دوم — سایت پرتصویر دارید. گالری، فروشگاه آنلاین یا سایتی با عکس‌های بزرگ دارید و مثل خیلی از سایت‌های داخل ایران، بخش قابل‌توجهی از کاربرهاتون گاهی با اتصال ضعیف میان؟ باز هم WebP/AVIF فرمت اصلیتونه، ولی اینجا فعال کردن Progressive JPEG برای لایه‌ی پشتیبان اهمیت بیشتری پیدا می‌کنه و واقعاً به تجربه‌ی اون کاربرها کمک می‌کنه.

سناریو سوم — نمی‌تونید سراغ فرمت‌های مدرن برید. به خاطر محدودیت فنی، سیستم قدیمی یا هر دلیل دیگه‌ای دستتون بسته‌ست؟ اون‌وقت Progressive JPEG یه جایگزین کاملاً قابل‌قبول و بی‌دردسره که دست‌کم تجربه‌ی کاربری رو بهتر می‌کنه.

و یه قانون طلایی که توی هر سه سناریو صادقه: سعی نکنید همه‌ی تصاویر سایت رو به زور Progressive کنید. برای آیکون‌ها و لوگوها این کار نه‌تنها فایده نداره، بلکه ممکنه حجم فایل رو بیشتر هم بکنه. هوشمندانه عمل کنید و فقط تصاویر بزرگ و محتوایی رو هدف بگیرید.

۵ اشتباه رایج که نباید مرتکب بشید

۱. تبدیل کورکورانه‌ی همه‌ی تصاویر به Progressive. خیلی‌ها فکر می‌کنن باید هر عکسی رو Progressive کنن. ولی برای تصاویر کوچیک زیر ۱۰ کیلوبایت، این کار نه‌تنها فایده نداره بلکه ممکنه فایل رو سنگین‌تر کنه.

۲. قاطی کردن «حسِ سرعت» با «سرعت واقعی». Progressive JPEG حجم رو کم نمی‌کنه و تصویر رو واقعاً سریع‌تر دانلود نمی‌کنه؛ فقط به کاربر حس سریع‌تر بودن می‌ده.

۳. انتظار معجزه‌ی سئو ازش داشتن. این فرمت به‌تنهایی نمره‌ی LCP و Core Web Vitals رو بهتر نمی‌کنه (و گاهی کمی بدترش می‌کنه). اهرم واقعی سئو، کاهش حجم با فرمت‌های مدرنه.

۴. چسبیدن به JPEG و نادیده گرفتن WebP و AVIF. بزرگ‌ترین فرصتی که خیلی‌ها از دست می‌دن همینه. توی ۲۰۲۶ فرمت اصلیتون باید WebP یا AVIF باشه.

۵. خراب کردن لینک‌ها یا فراموش کردن کش. اگه دستی فایل‌ها رو عوض می‌کنید و نام فایل جدید رو دقیقاً مثل قبلی نذارید، لینک‌های سایتتون خراب می‌شن. و اگه بعد از تغییر کش (مرورگر، افزونه و CDN) رو پاک نکنید، همچنان نسخه‌ی قدیمی نمایش داده می‌شه.

البته فرمت تصویر فقط یه تکه از پازله. اگه صفحاتتون کش نشده باشن و فایل‌های CSS و JS سنگین باشن، باز هم سایتتون سریع نمی‌شه. برای همین بهتره سراغ راه‌حلی برید که کل مسیر رو پوشش بده.

راحت‌ترین راه: افزونه‌ی رخش

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

• تبدیل خودکار تصاویر به WebP هنگام آپلود (با حفظ فایل اصلی) و امکان تبدیل گروهی کل کتابخانه‌ی رسانه
• بارگذاری تنبل و افزودن ابعاد تصویر برای جلوگیری از پرش چیدمان و بهبود نمره‌ی CLS
• کش صفحات و خزنده‌ی پیش‌گرم‌کننده تا حتی اولین بازدیدکننده هم صفحه‌ی آماده ببینه
• فشرده‌سازی و تعویق CSS و JS، کش آبجکت، پاکسازی پایگاه داده و اتصال به Cloudflare و CDN

یعنی همه‌ی کارهایی که توی این مقاله گفتیم، بدون نوشتن یک خط کد و از داخل پیشخوان خودتون.

پیش‌نیازها: وردپرس ۶٫۵ یا بالاتر، PHP ۸٫۱ یا بالاتر و پشتیبانی هاست از فرمت WebP. قبل از فعال‌سازی روی سایت زنده حتماً بک‌آپ بگیرید.

سوالات متداول

جمع‌بندی

اول مقاله یه سوال ساده پرسیدیم: «واقعاً ارزش داره سراغ Progressive JPEG بریم؟» خلاصه‌ی کل ماجرا توی یک جمله: Progressive JPEG مُرده نیست، ولی دیگه قهرمان داستان هم نیست.

اگه فقط یک چیز از این مقاله یادتون بمونه، بذارید این باشه: تفاوت بین «حسِ سرعت» و «سرعت واقعی». Progressive JPEG به کاربر حس سریع‌تر بودن می‌ده ولی حجم چیزی رو کم نمی‌کنه. در مقابل، فرمت‌های مدرنی مثل WebP و AVIF حجم تصاویر رو واقعاً پایین میارن و دقیقاً همین‌جاست که هم سرعت واقعی سایت و هم رتبه‌تون توی گوگل بهتر می‌شه.

پس مسیر برنده توی ۲۰۲۶ ساده‌ست: فرمت اصلیتون رو WebP یا AVIF بذارید و Progressive JPEG رو فقط به‌عنوان یه پشتیبان هوشمند کنارش نگه دارید. شاد و سربلند باشید. 🙂

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.