راهنمای کامل بهینه‌سازی تصاویر وردپرس (+ معرفی ۵ افزونه برتر)

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

از آنجایی که سرعت سایت یکی از مهم‌ترین فاکتورهای سئو است، هر چه صفحات سایت و المان‌های داخل آن (مثل تصاویر) سریع‌تر بارگذاری شوند، هم تجربه کاربری بهتری ارائه می‌دهید، هم جایگاه بهتری در نتایج گوگل به دست می‌آورید.

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

پس بیایید برویم سراغ اصل مطلب.

🧩 پیشنهاد می‌کنم به دسته‌بندی مقالات سئو سر بزنید و اصول و نکات سئو را مثل یک متخصص یاد بگیرید.

چرا بهینه‌سازی تصاویر وردپرس مهم است؟

اغلب سئوکارها ۴ دلیل برای بهینه‌سازی تصاویر وردپرس دارند:

۱) افزایش سرعت بارگذاری و بهبود Core Web Vitals

گوگل از سال ۲۰۲۱ معیارهایی به نام Core Web Vitals را به فاکتورهای رتبه‌بندی اضافه کرد. سه معیار اصلی این سیستم عبارتند از:

• LCP (Largest Contentful Paint): زمان بارگذاری بزرگ‌ترین عنصر قابل مشاهده در صفحه که باید کمتر از ۲.۵ ثانیه باشد. در بیش از ۷۳٪ صفحات موبایل، این عنصر یک تصویر است.
• CLS (Cumulative Layout Shift): میزان جابجایی ناخواسته المان‌ها هنگام لود که باید کمتر از ۰.۱ باشد. تصاویر بدون width/height مشخص باعث افزایش CLS می‌شوند.
• INP (Interaction to Next Paint): سرعت واکنش صفحه به کلیک کاربر که باید کمتر از ۲۰۰ میلی‌ثانیه باشد. (این معیار از مارس ۲۰۲۴ جایگزین FID شده است.)

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

📌 نکته مهم: در سرچ کنسول، از بخش گزارش Core Web Vitals می‌توانید وضعیت مربوط به این معیارها را در موبایل و دسکتاپ بررسی کنید.

⭐ محتوای مرتبط: بهترین افزونه‌های افزایش سرعت سایت وردپرسی (معرفی ۷ افزونه برتر)

۲) بهبود تجربه کاربری

همان‌طور که گفتیم، عکس‌های بهینه‌نشده و سنگین در وردپرس باعث می‌شوند سرعت بارگذاری صفحات کند شود. اگر لود سایت بیشتر از ۳ ثانیه طول بکشد، درصد قابل توجهی از بازدیدکنندگان صفحه را ترک می‌کنند. این افزایش نرخ پرش (Bounce Rate) سیگنال منفی برای گوگل است و رتبه سایت را پایین می‌آورد.

۳) کسب رتبه بهتر در نتایج جست‌وجو

گوگل و سایر موتورهای جست‌وجو ارج‌و‌قرب خاصی برای سایت‌های سریع قائل هستند برای حمایت از آن‌ها، فاکتور سرعت را هم در رتبه‌بندی لحاظ می‌کند. پس اگر تصاویر سایت وردپرسی شما بهینه شده باشد، طبیعتاً سرعت بهتری هم دارد و به احتمال زیاد در صفحات نتایج موتورهای جست‌وجو (SERP) رتبه خوبی خواهید داشت.

⭐ محتوای مرتبط: بهینه‌سازی نرخ تبدیل یا CRO چیست و چرا خیلی مهم است؟

۴) صرفه‌جویی در فضای هاست و پهنای باند

تصاویر سبک‌تر، فضای کمتری از هاست اشغال می‌کنند و پهنای باند کمتری مصرف می‌کنند و دست‌تان باز است که از فضای هاست‌تان برای اضافه کردن فایل‌ها و محتواهای بیشتر استفاده کنید.

هاست وردپرس لیموهاست

با بهترین عملکرد میزبان سایت وردپرسی شما هستیم. بهینه‌سازی شده برای بالاترین سطح سرعت!

شروع قیمت از
290 هزار تومان

خرید هاست وردپرس

چک‌لیست کامل بهینه‌سازی تصاویر وردپرس

قبل از آپلود هر تصویر این موارد را بررسی کنید:

• نام فایل توصیفی و با خط تیره نوشته شده
• فرمت مناسب انتخاب شده (WebP یا AVIF برای اکثر موارد، SVG برای آیکون‌ها)
• تصویر قبل از آپلود فشرده‌سازی شده
• اندازه تصویر متناسب با محل نمایش است
• Alt Text توصیفی و با کلیدواژه طبیعی نوشته شده
• Width و Height مشخص شده‌اند
• تصویر هیرو از Lazy Loading مستثنا شده
• افزونه بهینه‌سازی فعال است و تصاویر را به WebP/AVIF تبدیل می‌کند

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

۱. انتخاب فرمت مناسب برای تصاویر سایت

انتخاب فرمت درست، اولین و مهم‌ترین قدم برای بهینه‌سازی تصاویر وردپرس است. در حال حاضر ۵ فرمت اصلی برای تصاویر وب داریم:

⭐ JPEG: این فرمت برای عکس‌های رنگارنگ و تصاویری با جزئیات زیاد (مثل عکس‌های محصول، عکس پرتره، تصاویر طبیعت) مناسب است، حجم کم و فشرده‌سازی خوبی دارد و سریع‌تر بارگذاری می‌شوند؛ اما این را هم بگوییم که کیفیت کمتری نسبت به سایر فرمت‌ها دارند. 

⭐ PNG: این فرمت برای تصاویری که شفافیت (ترانسپرنسی) دارند یا باید کیفیت آن‌ها کاملاً حفظ شود (مثل لوگو، آیکون، اسکرین‌شات با متن) مناسب است. تنها نکته‌ منفی‌اش این است که اندازه فایل کمی بزرگ‌تر است و بارگذاری آن زمان و حجم بیشتری می‌خواهد.

⭐ WebP: فرمت WebP فرمت مدرنی است که گوگل توسعه داده است. به طور میانگین نسبت به JPEG حدود ۲۵ تا ۳۴٪ و نسبت به PNG حدود ۲۵٪ سبک‌تر است. از وردپرس ۵.۸ به بعد به صورت پیش‌فرض پشتیبانی می‌شود و انتخاب اول برای اکثر تصاویر سایت است.

⭐ AVIF: این فرمت، جدیدترین فرمت تصویر وب است. نسبت به JPEG تا ۵۰٪ و نسبت به WebP حدود ۲۰ تا ۳۰٪ سبک‌تر است. از وردپرس ۶.۵ به بعد پشتیبانی می‌شود، البته بسته به تنظیمات سرور دارد. در کل این فرمت برای هیرو ایمیج، تصاویر محصول، و هر جایی که حجم کمتر اهمیت زیادی دارد، گزینه بسیار خوبی است.

⭐ GIF: فقط برای تصاویر متحرک از این فرمت استفاده کنید. حجم GIF معمولاً بالای ۱ مگابایت است. اگر نیاز به انیمیشن دارید، استفاده از فرمت WebP انیمیشن یا ویدیوی کوتاه MP4 گزینه بهتری است.

جدول زیر کمک‌تان می‌کند راحت‌تر برای انتخاب فرمت مناسب برای تصاویر وردپرس تصمیم بگیرید:

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

۲. نام‌گذاری صحیح فایل تصاویر

قبل از آپلود تصاویر روی سایت‌تان، حتماً نام فایل تصویر را اصلاح کنید. این کار مستقیماً روی سئو تصویر تأثیر می‌گذارد. برای نام‌گذاری درست تصاویر:

• از کلمات توصیفی و مرتبط با محتوا استفاده کنید
• کلمات را با خط تیره (–) از هم جدا کنید، نه زیرخط (_)
• از نام‌های پیش‌فرض دوربین مثل IMG_2847.jpg پرهیز کنید

مثال می‌زنم:

نمونه بد نام‌گذاری عکس وردپرس: IMG_0021.jpg ❌

نمونه خوب نام‌گذاری تصویر: آموزش-بهینه-سازی-تصاویر-وردپرس.webp یا wordpress-image-optimization-guide.webp ✅

۳. فشرده‌سازی تصاویر وردپرس (Compression)

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

در کل دو نوع فشرده‌سازی وجود دارد:

• Lossy (با افت کیفیت): حجم را بیشتر کاهش می‌دهد و برای اکثر تصاویر وب مناسب است.
• Lossless (بدون افت کیفیت): حجم کمتری کاهش می‌دهد و برای تصاویری که نیاز به کیفیت بالا دارند بهتر است.

بگذارید یک مثال بزنم که متوجه تفاوت‌شان بشوید.

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

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

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

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

پس حتماً در فشرده‌سازی تصاویر این نکته را گوشه ذهن‌تان داشته باشید که 👇

تصویر باید در حین کم‌حجم بودن، برای کاربر واضح و جذاب به نظر برسد. فشرده‌سازی Lossy با کیفیت ۷۰ تا ۸۵٪ معمولاً برای اکثر تصاویر وب عالی است.

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

• Squoosh.app (ابزار گوگل، خیلی قوی و رایگان)
• TinyPNG / TinyJPG
• Compressor.io

۴. تغییر اندازه تصاویر (Resize)

قبل از آپلود، حتماً تصویر را به اندازه واقعی مورد نیازتان ری‌سایز کنید. اگر محل نمایش تصویر روی سایت ۸۰۰ پیکسل عرض دارد، آپلود کردن تصویر ۴۰۰۰ پیکسلی هم منابع‌تان را هدر می‌دهد، هم سایت‌تان را کند می‌کند.

وردپرس یک‌سری اندازه‌های پیش‌فرض برای تصاویر در نظر گرفته که به این صورت است:

• کوچک: ۱۵۰ × ۱۵۰ پیکسل
• متوسط: تا ۳۰۰ × ۳۰۰ پیکسل
• بزرگ: تا ۱۰۲۴ × ۱۰۲۴ پیکسل
• اندازه کامل: اندازه اصلی فایل آپلودشده

می‌توانید این مقادیر را از مسیر تنظیمات > رسانه در پیشخوان وردپرس تغییر دهید.

💡 نکته مهم برای جلوگیری از افزایش CLS: همیشه ویژگی width و height را در تگ تصویر مشخص کنید. وردپرس این کار را به صورت خودکار انجام می‌دهد، اما اگر تصاویر را دستی در کد HTML وارد می‌کنید، این نکته را فراموش نکنید. بدون این دو ویژگی، مرورگر فضایی برای تصویر رزرو نمی‌کند و وقتی تصویر لود می‌شود، محتوا جابجا می‌شود (Layout Shift).

۵. نوشتن متن جایگزین (Alt Text)

Alt Text یا متن جایگزین، متنی است که وقتی تصویر لود یا نمایش داده نمی‌شود (یا توسط Screen Reader خوانده می‌شود) نشان داده می‌شود. از طرفی هم گوگل‌بات نمی‌تواند مستقیماً تصاویر را ببیند و از طریق همین متن جایگزین محتوای تصویر را درک و آن را ایندکس می‌کند.

پس خیلی مهم است که تصاویر سایت‌تان حتماً تگ آلت را داشته باشد. برای نوشتن یک Alt Text خوب:

• توضیحی ساده، کوتاه و دقیق از محتوای تصویر بنویسید
• کلمات کلیدی اصلی و فرعی را به‌صورت طبیعی (نه اجباری) در آن بگنجانید
• از keyword stuffing پرهیز کنید
• Alt Text کوتاه و مشخص (زیر ۴۰ کاراکتر) معمولاً عملکرد بهتری در گوگل ایمیجز دارد
• برای تصاویر تزئینی که اطلاعاتی نمی‌دهند، Alt Text را خالی بگذارید (alt=””)

مثال می‌زنم:

❌ alt=”وردپرس تصویر بهینه سازی سئو افزونه”

✅ alt=”تنظیمات افزونه Imagify در وردپرس”

۶. نوشتن عنوان تصویر (Title Attribute)

Title Attribute اطلاعات تکمیلی را درباره تصویر به موتورهای جستجو و کاربران می‌دهد. این عنوان هنگام hover کردن روی تصویر نمایش داده می‌شود.
این فیلد را در وردپرس هنگام آپلود تصویر می‌توانید پر کنید. لازم نیست عین Alt Text باشد ولی می‌تواند توضیح تکمیلی‌تری درباره عکس داشته باشد.

۷. فعال‌سازی Lazy Loading

Lazy Loading یک قابلیت در وردپرس است که فعال‌سازی آن باعث می‌شود تصاویری که هنوز در دید کاربر نیستند، لود نشوند و وقتی کاربر به سمت پایین اسکرول می‌کند، تصاویر یکی یکی لود می‌شوند.

از وردپرس نسخه ۵.۵ به بعد، Lazy Loading به صورت پیش‌فرض برای تمام تصاویر فعال است.

یک نکته مهم: تصویر اول صفحه (هیرو ایمیج یا تصویر شاخص) را هرگز Lazy Load نکنید. این تصویر معمولاً همان عنصر LCP است و باید سریع‌ترین لود ممکن را داشته باشد. 

۸. تصاویر واکنش‌گرا (Responsive Images)

وردپرس از نسخه ۴.۴ به بعد به‌صورت خودکار ویژگی srcset را به تصاویر اضافه می‌کند؛ یعنی مرورگر بسته به اندازه صفحه، سایز مناسب تصویر را انتخاب و دانلود می‌کند. مثلاً یک موبایل به جای دانلود تصویر ۲۰۰۰ پیکسلی، تصویر ۶۰۰ پیکسلی را دریافت می‌کند.

برای اینکه مطمئن شوید این ویژگی روی سایت شما هم فعال است، روی یکی از تصاویر سایت‌تان راست‌کلیک کنید و «inspect» را بزنید. اگر تگ <img> شما شامل srcset بود، همه چیز درست است.

۹. سایت‌مپ تصاویر (Image Sitemap)

اگر می‌خواهید تصاویر سایت‌تان در Google Images ایندکس شوند و ترافیک بگیرند، اضافه کردن تصاویر به سایت‌مپ بسیار مهم است. اکثر افزونه‌های سئو مثل Yoast SEO و Rank Math این کار را به صورت خودکار انجام می‌دهند.

۱۰. پاک‌سازی کتابخانه پرونده‌های چندرسانه‌ای

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

قبل از پاک‌سازی، حتماً یک نسخه پشتیبان (Backup) کامل از سایت تهیه کنید. بعد می‌توانید با افزونه‌هایی مثل Media Cleaner یا Unused Images تصاویر بلااستفاده را شناسایی و حذف کنید.

۱۱. استفاده از CDN برای تصاویر

CDN (شبکه توزیع محتوا) تصاویر شما را روی سرورهایی در نقاط مختلف جهان ذخیره می‌کند و آن‌ها را از نزدیک‌ترین سرور به کاربر ارائه می‌دهد.

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

افزونه‌های بهینه‌سازی تصویر در وردپرس

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

💡 نکته: افزونه‌ای را انتخاب کنید که فرایند بهینه‌سازی را روی سرورهای خودش انجام دهد، نه روی سرور هاست شما؛ این کار منابع سایت شما را درگیر نمی‌کند.

در جدول زیر بهترین افزونه‌های بهینه‌سازی تصاویر وردپرس را معرفی کردیم:

اگر بودجه دارید، Imagify یا ShortPixel بهترین انتخاب هستند. اگر به دنبال گزینه رایگان هستید، Smush WP یا EWWW Image Optimizer گزینه‌های خوبی‌اند.

جمع‌بندی

بهینه‌سازی تصاویر یکی از مؤثرترین کارهایی است که می‌توانید برای سرعت و سئو سایت وردپرسی‌تان انجام دهید. با اعمال نکاتی که در این راهنما گفتیم، می‌توانید حجم تصاویر را به شکل چشمگیری کاهش دهید، امتیاز Core Web Vitals سایت را بهبود ببخشید، در نتایج گوگل ایمیجز هم ترافیک بگیرید و تجربه کاربری بهتری برای بازدیدکنندگان‌تان ایجاد کنید.

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

منابع: hostinger