چگونه تصاویر سایت را فشرده کنیم بدون افت کیفیت دیداری؟
چگونه تصاویر سایت را فشرده کنیم بدون آنکه کیفیت دیداری سایت افت کند؟ راهنمای عملی از تفاوت فشرده‌سازی Lossy و Lossless و فرمت‌های WebP و AVIF تا ابزارها و اشتباهات رایجی که تصاویر را بی‌کیفیت یا سایت را کند می‌کند.
سایتی را به یاد می‌آورم که تصاویر محصولش را با نرم‌افزار گرافیکی معمولی ذخیره می‌کرد؛ یک صفحه دسته‌بندی، پنج مگابایت تصویر داشت و در موبایل، پنج ثانیه طول می‌کشید تا باز شود. ده دقیقه وقت گذاشتم و همان تصاویر را فشرده کردم؛ حجم صفحه به کمتر از یک مگابایت رسید، بدون آنکه تفاوت بصری برای کاربر قابل تشخیص باشد. آن روز تأکید دوباره‌ای شد برای من که فشرده‌سازی (compression) تصاویر، ساده‌ترین بردِ سرعت است که خیلی‌ها نادیده می‌گیرند. این نوشته، همان روشی است که در پروژه‌های واقعی برای فشرده‌سازی تصاویر سایت به‌کار می‌برم.
فشرده‌سازی تصاویر دقیقاً چه چیزی را کاهش می‌دهد؟
فشرده‌سازی تصاویر، حذف اطلاعات غیرضروری از فایل تصویر است تا حجم آن کمتر شود، بدون آنکه کیفیت دیداری افت محسوسی داشته باشد. این کاهش در سه سطح اتفاق می‌افتد:
- سطح بیت‌های داده: حذف داده‌های تکراری و کدگذاری هوشمندانه‌تر.
- سطح ابعاد (dimensions): کاهش پیکسل‌های واقعی تصویر، اگر تصویر بیشتر از نیاز نمایش بزرگ باشد.
- سطح متادیتا: حذف اطلاعات جانبی مثل EXIF (Exchangeable Image File Format) و داده‌های دوربین.
در پروژه‌ها، بیشترین کاهش حجم از سطح ابعاد می‌آید؛ نه از سطح بیت‌ها. تصویری که در صفحه فقط در اندازه ۴۰۰ پیکسل نمایش داده می‌شود، اگر با ابعاد اصلی ۴۰۰۰ پیکسل بارگذاری شود، مرورگر کاربر آن را دانلود می‌کند و بعد کوچک نمایش می‌دهد. اگر مفهوم تصویر بهینه برای وب برایتان تازه است، ابتدا سئوی تصویر چیست را بخوانید و بعد به این مقاله برگردید.
فشرده‌سازی تصویر، مثل کم‌کردن وزن چمدان است: هنوز همان لباس‌ها را دارد، اما آن‌قدر سنگین نیست که سفر را طولانی کند. تصویر سبک، سایت را سریع‌تر و کاربر را راضی‌تر می‌کند.
ذهنیت درست: کاهش هوشمند، نه کاهش کورکورانه
بزرگ‌ترین اشتباه در فشرده‌سازی تصاویر، کاهش کورکورانه کیفیت است. سه اصلی که در پروژه‌ها رعایت می‌کنم:
- هدف، تعادل میان حجم و کیفیت است: فشرده‌سازی زیاد، حجم را کم می‌کند اما کیفیت را پایین می‌آورد. نقطه تعادل، به نوع تصویر و کاربردش بستگی دارد.
- اندازه درست پیش از فشرده‌سازی: تصویری که ابعادش بیش از نیاز صفحه است، حتی با فشرده‌سازی قوی هم سنگین می‌ماند. اول ابعاد را اصلاح کنید، بعد فشرده‌سازی.
- تصویر اصلی را نگه دارید: پیش از فشرده‌سازی، نسخه اصلی را آرشیو کنید. اگر بعداً به کیفیت بالاتر نیاز شد، باید از نسخه اصلی شروع کنید.
در تجربه‌ام، تیم‌هایی که این سه اصل را رعایت می‌کنند، هم سایت سریعی دارند و هم کیفیت بصری را حفظ می‌کنند. اگر با تأثیر تصویر بر سرعت سایت آشنایی ندارید، تأثیر تصاویر سنگین بر Core Web Vitals و چگونه سرعت سایت بر سئو تأثیر می‌گذارد را ببینید.
Lossy و Lossless: تفاوت‌ها و کاربرد هرکدام
دو روش اصلی فشرده‌سازی تصویر وجود دارد که هرکدام در جای خودش مناسب است:
| روش | ویژگی | مناسب برای |
|---|---|---|
| Lossy (با افت) | حذف اطلاعات غیرقابل‌تشخیص برای چشم انسان | عکس واقعی، تصاویر محصول، عکس‌های خبری |
| Lossless (بدون افت) | حفظ تمام اطلاعات پیکسلی، کاهش فقط از کدگذاری بهتر | لوگو، آیکون، نمودار، تصویر با متن |
در پروژه‌ها، تصمیم بین این دو، بر اساس نوع تصویر گرفته می‌شود:
- برای عکس واقعی: فشرده‌سازی Lossy با کیفیت ۷۰ تا ۸۵ درصد، در بیشتر موارد تفاوت بصری ندارد و حجم را تا ۸۰ درصد کاهش می‌دهد.
- برای گرافیک تخت و لوگو: فشرده‌سازی Lossless، چون هر پیکسل در این تصاویر حاوی اطلاعات است. برای لوگو، فرمت SVG می‌تواند جایگزین بهتری باشد.
- برای تصویر با متن: فشرده‌سازی Lossy با کیفیت بالاتر (۹۰ به بالا)، چون لبه حروف در فشرده‌سازی Lossy بیشتر آسیب می‌بیند.
در تجربه‌ام، بیشترین اشتباه در این مرحله، اعمال Lossy روی لوگو و آیکون است. لوگویی که با Lossy فشرده شده، لبه‌هایش بلور می‌شود و هویت برند را ضعیف می‌کند.
فرمت درست: JPEG، WebP، AVIF یا PNG؟
انتخاب فرمت تصویر، به‌اندازه خود فشرده‌سازی مهم است. در پروژه‌ها، فرمت را بر اساس نوع تصویر و نیاز مرورگر انتخاب می‌کنم:
| فرمت | ویژگی | مناسب برای |
|---|---|---|
| JPEG | پشتیبانی گسترده، حجم متوسط | عکس واقعی و تصاویر بدون شفافیت |
| WebP | حجم کمتر، پشتیبانی مدرن | جایگزین عمومی برای JPEG و PNG |
| AVIF | حجم بسیار کم، پشتیبانی محدودتر | تصاویر مدرن با مخاطب به‌روز |
| PNG | بدون افت، از شفافیت پشتیبانی می‌کند | لوگو، آیکون، تصویر با شفافیت |
| SVG | وکتور، مقیاس‌پذیر بدون افت | لوگو و آیکون‌های ساده |
مقایسه دقیق فرمت‌ها را در بهترین فرمت تصویر برای وب کدام است و WebP یا JPEG برای سرعت سایت باز کرده‌ام. قاعده سرانگشتی من: تصویر عمومی با WebP، تصویر لوگو با SVG یا PNG، تصویر عکس واقعی با WebP یا AVIF در نسخه‌های مدرن، و فقط برای پشتیبانی مرورگرهای قدیمی، نسخه JPEG نگه می‌دارم.
انتخاب فرمت، مثل انتخاب ظرف برای غذا است: برای غذای مایع، کاسه؛ برای غذای خشک، بشقاب. اگر ظرف اشتباه را انتخاب کنید، حجم و کیفیت هر دو ضربه می‌خورند.
ابعاد و اندازه درست، پیش از فشرده‌سازی
در پروژه‌ها، اولین کاری که پیش از هر فشرده‌سازی انجام می‌دهم، اصلاح ابعاد است. سه اقدام ساده که بیشترین اثر را دارند:
- حذف تصاویر بی‌استفاده: تصاویر بزرگی که در صفحه استفاده نمی‌شوند، از کتابخانه رسانه حذف می‌شوند. این کار، حجم سایت و حجم پشتیبان را هم کم می‌کند.
- تولید سایزهای مختلف: وردپرس به‌طور خودکار چند سایز از هر تصویر تولید می‌کند. با فعال بودن
srcset، مرورگر اندازه مناسب دستگاه کاربر را می‌گیرد. - محدودسازی ابعاد آپلود: اگر کاربران می‌توانند تصویر آپلود کنند، می‌توانید با کد سفارشی حداکثر ابعاد مجاز را تعیین کنید.
اثر این اقدامات، در تجربه‌ام، از فشرده‌سازی دوباره قوی‌تر است. تصویری که ابعادش درست نیست، حتی با فشرده‌سازی حرفه‌ای، سنگین باقی می‌ماند. اگر می‌خواهید تصاویر ریسپانسیو در وردپرس را بهتر بشناسید، تصاویر ریسپانسیو چیست و چگونه تصاویر را برای موبایل بهینه کنیم را ببینید.
ابزارهای فشرده‌سازی تصاویر
ابزارهای فشرده‌سازی تصویر به سه دسته کلی تقسیم می‌شوند که در پروژه‌ها از هر سه استفاده می‌کنم:
- ابزارهای خط فرمان: ImageMagick، cwebp و avifenc. مناسب برای فشرده‌سازی انبوه و خودکارسازی. کنترل کامل روی کیفیت و ابعاد.
- ابزارهای آنلاین: TinyPNG، Squoosh و مشابه. مناسب برای فشرده‌سازی موردی و بررسی سریع تفاوت کیفیت.
- افزونه‌های وردپرس: فشرده‌سازی خودکار هنگام آپلود. گزینه‌های برتر در بهترین افزونه‌های بهینه‌سازی تصویر وردپرس و مقایسه افزونه‌های بهینه‌سازی تصاویر آمده است.
نمونه‌ای از فشرده‌سازی دسته‌ای با ابزار خط فرمان cwebp:
for img in *.jpg; do
cwebp -q 80 "$img" -o "${img%.jpg}.webp"
doneاین دستور، همه فایل‌های JPEG را با کیفیت ۸۰ درصد به WebP تبدیل می‌کند. در پروژه‌های واقعی، ابتدا روی چند تصویر نمونه تست می‌کنم و بعد فشرده‌سازی انبوه انجام می‌شود. اگر با ابزارهای آنلاین کار می‌کنید، همیشه پیش از فشرده‌سازی، نسخه اصلی را نگه دارید.
خودکارسازی فشرده‌سازی در وردپرس
در وردپرس، سه روش برای خودکارسازی فشرده‌سازی وجود دارد که در پروژه‌ها به‌کار می‌برم:
- افزونه فشرده‌سازی: هنگام آپلود، تصویر به‌طور خودکار فشرده و تبدیل می‌شود. تنظیمات مهم: فعال بودن تبدیل خودکار به WebP، فشرده‌سازی Lossy برای عکس واقعی و Lossless برای لوگو.
- فشرده‌سازی سمت سرور: با ابزارهایی مثل ImageMagick که روی هاست نصب می‌شوند، فشرده‌سازی بخشی از فرآیند آپلود است. راهنمای پیکربندی در مستندات هاست.
- CDN با بهینه‌سازی خودکار: بعضی سرویس‌های CDN (Content Delivery Network) تصاویر را در لحظه تحویل، به فرمت و سایز بهینه تبدیل می‌کنند. روش راه‌اندازی در راه‌اندازی CDN برای سایت وردپرسی و نقش CDN در سرعت سایت آمده است.
در پروژه‌ها، ترکیب افزونه و CDN بیشترین اثر را دارد. افزونه، تصاویر را فشرده می‌کند و CDN، آن‌ها را به فرمت مدرن‌تر در لبه شبکه تحویل می‌دهد. اگر روی هاست اشتراکی هستید، از فشرده‌سازی سمت سرور با ImageMagick استفاده کنید؛ سبک‌تر از افزونه‌های سنگین است.
اشتباهات رایج در فشرده‌سازی تصاویر سایت
در پروژه‌هایی که فشرده‌سازی تصاویر انجام شده، چند الگوی تکراری دیده‌ام:
- کاهش کورکورانه کیفیت: فشرده‌سازی با کیفیت ۴۰ درصد روی همه تصاویر اعمال می‌شود؛ نتیجه، تصاویر بی‌کیفیت که کاربر را فراری می‌دهد.
- نادیده گرفتن ابعاد: فشرده‌سازی انجام می‌شود، اما ابعاد تصویر بیش از نیاز صفحه باقی می‌ماند؛ حجم نهایی کم نمی‌شود.
- فشرده‌سازی مجدد فایل فشرده‌شده: هر بار فشرده‌سازی روی فایل قبلی، کیفیت را پایین می‌آورد. همیشه از نسخه اصلی شروع کنید.
- اعمال Lossy روی لوگو و آیکون: لبه‌های لوگو بلور می‌شود و هویت برند ضعیف می‌شود.
- نادیده گرفتن فرمت مدرن: فقط JPEG و PNG استفاده می‌شود و WebP و AVIF نادیده می‌ماند؛ حجم بیشتر از حد لازم باقی می‌ماند.
- فراموش کردن srcset: همه کاربران یک سایز تصویر می‌گیرند، در حالی که با
srcsetمرورگر سایز مناسب دستگاه را انتخاب می‌کند. - نبود نسخه پشتیبان از تصاویر اصلی: بعد از فشرده‌سازی، نسخه اصلی گم می‌شود؛ در صورت نیاز به کیفیت بالاتر، چاره‌ای نیست.
- فشرده‌سازی فقط برای تصاویر جدید: کتابخانه تصاویر قدیمی دست‌نخورده می‌ماند؛ در حالی که بخش بزرگی از حجم سایت مربوط به همان تصاویر قدیمی است.
برای مرور ساختاریافته‌تر، اشتباهات رایج در بهینه‌سازی تصاویر و ترندهای بهینه‌سازی تصاویر را ببینید. اگر فروشگاه اینترنتی دارید، بهینه‌سازی موبایل برای فروشگاه‌های اینترنتی نکات اختصاصی تصاویر محصول را دارد.
پرسش‌های پرتکرار درباره فشرده‌سازی تصاویر
- چگونه تصاویر سایت را فشرده کنیم؟ با اصلاح ابعاد تصویر پیش از هر چیز، انتخاب فرمت مناسب (WebP یا AVIF برای عکس، SVG یا PNG برای لوگو)، اعمال فشرده‌سازی Lossy برای عکس واقعی و Lossless برای گرافیک تخت، و خودکارسازی با افزونه و CDN.
- تفاوت Lossy و Lossless چیست؟ Lossy با حذف اطلاعات غیرقابل‌تشخیص، حجم را زیاد کم می‌کند اما کمی افت کیفیت دارد؛ Lossless حجم را کمتر کم می‌کند اما کیفیت را کامل حفظ می‌کند.
- بهترین فرمت تصویر برای وب کدام است؟ برای عکس واقعی، WebP یا AVIF؛ برای لوگو و آیکون ساده، SVG؛ برای تصویر با شفافیت، PNG. استفاده از فرمت‌های مدرن در کنار نسخه قدیمی برای پشتیبانی مرورگرهای قدیمی توصیه می‌شود.
- کیفیت فشرده‌سازی چه عددی مناسب است؟ برای عکس واقعی، ۷۰ تا ۸۵ درصد؛ برای تصویر با متن، ۹۰ درصد یا بیشتر. عدد نهایی، به نوع تصویر و تحمل کیفیت مخاطب بستگی دارد.
- آیا فشرده‌سازی تصویر روی سئو تأثیر دارد؟ بله. تصویر سبک، سرعت سایت را بالا می‌برد و سرعت، بخشی از تجربه صفحه است که گوگل در رتبه‌بندی می‌سنجد. تصویر سبک همچنین در جستجوی تصویری، شانس بیشتری برای نمایش سریع دارد.
تصویر سبک، سایت سریع، کاربر راضی
فشرده‌سازی تصاویر، ساده‌ترین بردی است که در پروژه‌های وب می‌توان به دست آورد. تجربه‌ام می‌گوید سایت‌هایی که فشرده‌سازی تصاویر را جدی گرفته‌اند، هم سریع‌تر بار می‌شوند، هم در موبایل تجربه بهتری می‌سازند و هم پهنای باند کمتری مصرف می‌کنند. اگر امروز فقط یک کار می‌کنید، کتابخانه رسانه سایت خودتان را باز کنید، ده تصویر سنگین را انتخاب کنید و همین حالا آن‌ها را با فرمت مدرن و کیفیت ۸۰ درصد فشرده کنید؛ تفاوت را در سرعت صفحه، خودتان خواهید دید. اگر در پروژه‌ای با تصویری برخورد کرده‌اید که پس از فشرده‌سازی کیفیتش به‌طور غیرقابل‌قبول افت کرده، برای من جالب است بدانید آن تصویر چه نوعی بود و چطور تعادل را برگرداندید؛ تجربه‌تان را در دیدگاه‌ها بنویسید تا برای خواننده بعدی، انتخاب روشن‌تری ساخته شود. 🖼️
نویسنده در وردپرس کار.